2

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!

7 Answers 7

2

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);
2
  • nextSibling does not work the same in Firefox and IE. This code will not work correctly in one or the other. Jun 18, 2012 at 8:54
  • Hi @ClaraOnager: The cross-browser issue is normalized by checking "node.nodeType === 1" as is done on line 6. Jun 18, 2012 at 16:23
2

Another solution would be to store the generated Ids in an array (making sure that you give everything an Id attribute) and use the array to index the elements.

1

You are not supposed to ever have more than one element on the page with the same ID. Classes can be repeated, but IDs should be unique.

You are on the right track with using the context of the button pressed. This type of thing is much easier if you use a framework such as jQuery. Jquery has many methods for traversing the DOM http://api.jquery.com/category/traversing/ one is next() which will find the next sibling element.

Using jQuery will also make it easier to move your javascript events out of the HTML, so instead of onclick="" you can assign events in a separate JS file, keeping markup separate from behavior.

1

To reliably get the next control in a form, you can iterate over the form's elements collection to find the subject element, then get the next one, e.g.:

function getNextControl(el) {
  var elements = el && el.form && el.form.elements;
  if (elements) {
    for (var i=0, iLen=elements.length; i<iLen; i++) {
      if (elements[i] == el) {
        return elements[i + 1];
      }
    }
  }
}

Now you can structure your HTML however you like, the above will return the next form control or undefined if there isn't one.

0

Get a reference to the current button, e.g. the event's target property or just use this in the event handler. Then you'll find the node next to that button in the nextSibling property, but watch out: this is usually a whitespace text node. So use nextElementSibling instead.

0

You can use jquery next() method.

If you want a pure javascript solution, See this post Get next/previous element using Javascript

best voted answer in that post is,

use the nextSibling and previousSibling properties:

<div id="foo1"></div> <div id="foo2"></div> <div id="foo3"></div>

 document.getElementById('foo2').nextSibling; // #foo3
 document.getElementById('foo2').previousSibling; // #foo1

However in some browsers (I forget which) you also need to check for whitespace and comment nodes:

 var div = document.getElementById('foo2'); var nextSibling =
 div.nextSibling; while(nextSibling && nextSibling.nodeType != 1) {
     nextSibling = nextSibling.nextSibling }

Libraries like jQuery handle all these cross-browser checks for you out of the box.

0

If you have a reference to the button, and you want the element after the button, you could use the property

nextSibling;

Make sure you avoid any text objects that comes from comments, line breaks or white spaces.

For a complete overview over the HTML Dom object take a look at http://www.w3schools.com/jsref/dom_obj_all.asp

3
  • nextSibling won't be a function
    – Bergi
    Dec 8, 2011 at 7:10
  • That will not work because sometimes the nextSibling will be some other element or a text node. Some browsers insert a text node if there is any whitespace in the markup between elements, others don't.
    – RobG
    Dec 8, 2011 at 7:22
  • alright, I accepted wilmoore's answer..seems to be the neatest code..although, it seems to be too costly to iterate all over the elements that way.. nice code though Dec 8, 2011 at 7:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.