javascript getting reference to control in same cell of table

Question

I have a table which is generated from data from a datbase. It might have 3 rows and 2 cells.

Each cell has a checkbox in it and 2 hidden form fields.

So, a typical row might look like this:

<tr>
<td>
<input type="checkbox" id="Assign" onclick="setchanged(this);">
<input type="hidden" id="hfChanged" value="0">
<input type="hidden" id="hfAgentID value="272">
</td>
<td>
<input type="checkbox" id="Assign" onclick="setchanged(this);">
<input type="hidden" id="hfChanged" value="0">
<input type="hidden" id="hfAgentID value="324">
</td>
</tr>

The requirement is - when a checkbox is clicked, it should set the value of the hfChanged hidden field in the same cell to 1.

This works in Internet Explorer:

function setchanged(me)
{
me.parentElement.all("hfChanged").value = 1;
}

How can I set the value of hfChanged in Standards Compliant browsers like Firefox or Chrome?

Will you be able to use a external library like http://jquery.com/ which will make your life easier in a cross browser environment — Arun P Johny, Jan 21 '13 at 16:44
You cannot have multiple HTML elements with the same ID in the same document. Consider using classes or a better way to identify your elements — Andrew Hall, Jan 21 '13 at 16:41
@AndrewHall You can, it's just not valid or suggested. Things still work fine in Javascript though, if you use them correctly - http://jsfiddle.net/AqdwJ/ — Ian, Jan 21 '13 at 17:01
@Ian fair enough - my point was its not valid, thanks for the correction — Andrew Hall, Jan 22 '13 at 09:06

the system · Answer 1 · 2013-01-21T16:53:23.983

Use repeating classes instead of IDs

<tr>
    <td>
    <input type="checkbox" class="Assign" onclick="setchanged(this);">
    <input type="hidden" class="hfChanged" value="0">
    <input type="hidden" class="hfAgentID value="272">
    </td>
    <td>
    <input type="checkbox" class="Assign" onclick="setchanged(this);">
    <input type="hidden" class="hfChanged" value="0">
    <input type="hidden" class="hfAgentID value="324">
    </td>
</tr>

Then change your function to select by class name, and iterate the result.

function setchanged(me) {
    var changed = me.parentNode.querySelectorAll(".hfChanged");

    for (var i = 0; i < changed.length; i++) {
        changed[i].value = 1;
    }
}

The .querySelectorAll method will not work in IE6/7 if that matters to you. If it does, it's not hard to adjust a little for greater compatibility.

I see now that there's only one in the same cell. In that case, you can do this instead.

function setchanged(me) {
    me.parentNode.querySelector(".hfChanged").value = 1;
}

Thank you for your answer. I'll certainly bear that in mind for the future. The site I am working on to try to make work cross browser is about 10 years old and was written in ASP and specifically for IE. (In those happy days, Firefox and Chrome were not yet a twinkle in their fathers' eyes so all the javascript is IE specific). So I don't want to change to using classes as selectors in this particular site. — Martin Smellworse, Jan 21 '13 at 18:13

score 0 · Answer 2 · answered Jan 21 '13 at 16:46

0

This code is not tested, but could give you a starting point.

$("input[type=checkbox]").change(function(){
     $(this).siblings(".hfChanged").prop("value", this.checked ? 1 : 0);
});

Note: Change id to class.

answered Jan 21 '13 at 16:46

Jose Vega

10,128
7
40
57

score 0 · Accepted Answer · edited May 23 '17 at 12:12

0

You can use the following function to find out the next element as given in this answer

function next(elem) {
    do {
        elem = elem.nextSibling;
    } while (elem && elem.nodeType != 1);
    return elem;        
}

Working demo here.

Code:

function setchanged(me){
    next(me).value = me.checked == true ? 1 : 0;
}

function next(elem) {
    do {
        elem = elem.nextSibling;
    } while (elem && elem.nodeType != 1);
    return elem;        
}

edited May 23 '17 at 12:12

Community

1
1

answered Jan 21 '13 at 16:55

Arun P Johny

384,651
66
527
531

Thanks for that. I've actually got 5 hidden fields in each cell, and all repeated in a table that can get huge - so loads of controls with the same name - but with your code I can just recursively call your function next(elem) and get the values of all the hidden fields in any particular cell. – Martin Smellworse Jan 21 '13 at 18:10

javascript getting reference to control in same cell of table

3 Answers3