单选按钮阵列

Question

I have a form where at some point you can add multiple rows of the same question. Simplified version looks like this:

<input type="text" name="name[]" value=""/>
<input type="radio" name="opted[]" value="Yes" /> Yes 
<input type="radio" name="opted[]" value="No" /> No

Above rows are cloned on every "Add friend" button click. This works nicely for a text field, as I get values from all the rows on submit, but radio button doesn't work because it has the same name and clicking on it interferes with other cloned rows.

Any idea how to get around this issue?

Answer 1

Replace name="opted[]" with name="opted[123]" , where 123 is an unique identifier, so that each set of answets are grouped.

Then, you can access the form elements through either of the following methods:

var method1 = document.getElementsByName("opted[123]");
var method2 = document.querySelectorAll("[name='opted[123]']");
//Both vanilla-JavaScript methods return a NodeList, consisting of all
//  elements with name="opted[123]"