Question

I have the following two fields in a form:

<input type="button" value="Rep" id="rep" name="rep" style="width:50px" onclick="addRep()" />
<input type="hidden" value="<?php echo $comment_id; ?>" />

I need to get the value of the hidden field in the form. So I thought to use some function to call the hidden field field next to the button whenever it is triggered.

I need to get that hidden field specifically, that comes after the button pressed.

I cant use methods like getElementByID,,cause I generate many of those hidden fields and buttons with the same id.. (I generate them dynamically with php).

In theory, I think that I could get the context of the button pressed (after trapping its event) and then use some function to find the next element in the form..

But I am not sure how to do that!

Answer 1

Consider that you might have another element between your button and your hidden element. For example:

<input type="button" value="Rep" id="rep" name="rep" style="width:50px" onclick="addRep()"/>
<input type="text" id="someText" value="whatever"/>
<input type="hidden" id="someButton" value="anything"/>

In this case, you can target the hidden input element that is “closest” to the identified button by performing some checks:

var rootNode    = document.getElementById('rep'),
    currentNode = rootNode.nextSibling,
    closestHidden;

function check(node) {
  return node.nodeType === 1 && node.localName === 'input' && node.type === 'hidden'
};

do {
  if (check(currentNode)) {
    closestHidden = currentNode; break;
  }
} while (currentNode = currentNode.nextSibling);

alert(closestHidden.id);