Question

I have a function that used to work before I changed the names of my form into arrays. When you check yes or no for one radio button autoselect() chooses yes or no for another set of radio buttons. The problem I’m having is that javascript will not let me access the element by name because there are two elements with the same name. Here is my code:

<script language="javascript" type="text/javascript">
function autoselect(selectedOption, updateCompleted)
{
if(selectedOption.value=="No")
    updateCompleted[0].checked=true;
else
    updateCompleted[1].checked=true;
}
</script>

<input type="radio" onclick="autoselect(this,document.form<?php echo $i; ?>.elements['data[<?= $i; ?>][completed]']);" name="data[<?= $i ?>][needed]" value="Yes">Yes

<input type="radio" onclick="autoselect(this,document.form<?php echo $i; ?>.elements['data[<?= $i; ?>][completed]']);" name="data[<?= $i ?>][needed]" value="No">No

...

<input type="radio" id="completed<?php echo $i."1"; ?>" name="data[<?= $i ?>][completed]" value="Yes"><span id="completed<?php echo $i."3"; ?>">Yes</span>

<input type="radio" id="completed<?php echo $i."2"; ?>" name="data[<?= $i ?>][completed]" value="No"><span id="completed<?php echo $i."4"; ?>">No</span>

There are multiple forms with the same elements on each page, and their names are incremented using the $i index.

Answer 1

You can use jQuery to return an array of the items and then access the one you want with the index

var el1=$('input[name="elementName"]')[0];
var el2=$('input[name="elementName"]')[1];

etc