I'm trying to separate a few sections that all have the same name attribute for each input.
<div class="section">
<h4>Radio-option</h4>
<input type="radio" name="radio_array[]" value="yes" />Yes
<input type="radio" name="radio_array[]" value="no" />no
</div>
<div class="section">
<h4>Radio-option</h4>
<input type="radio" name="radio_array[]" value="yes" />Yes
<input type="radio" name="radio_array[]" value="no" />no
</div>
<input type="button" onclick="functionToAddAnotherSection()" value="Add Section" />
These div sections can be added, duplicated and even sorted (jQuery sortable). I don't have any ID keys for these sections, they're all mashed into an array and when they're being displayed again, i simply break the array and put each value in each section.
You need to either give each set of radio buttons a unique name
, OR place each set of radio buttons into their own <form>
element.
Either of these should fix your problem. Which one you use really depends on how you're handling the data on the server side:
Unique form
elements:
<div class="section">
<form>
<h4>Radio-option</h4>
<input type="radio" name="radio_array[]" value="yes" />Yes
<input type="radio" name="radio_array[]" value="no" />no
</form>
</div>
<div class="section">
<h4>Radio-option</h4>
<form>
<h4>Radio-option</h4>
<input type="radio" name="radio_array[]" value="yes" />Yes
<input type="radio" name="radio_array[]" value="no" />no
</form>
</div>
Unique names:
<div class="section">
<form>
<h4>Radio-option</h4>
<input type="radio" name="radio_array_section1[]" value="yes" />Yes
<input type="radio" name="radio_array_section1[]" value="no" />no
</form>
</div>
<div class="section">
<h4>Radio-option</h4>
<input type="radio" name="radio_array_section2[]" value="yes" />Yes
<input type="radio" name="radio_array_section2[]" value="no" />no
</div>
You can use nested arrays
<form>
<div class="section">
<h4>Radio-option</h4>
<input type="radio" name="radio_array[0][]" value="yes" />Yes
<input type="radio" name="radio_array[0][]" value="no" />no
</div>
<div class="section">
<h4>Radio-option</h4>
<input type="radio" name="radio_array[1][]" value="yes" />Yes
<input type="radio" name="radio_array[1][]" value="no" />no
</div>
...
<input type="radio" name="radio_array[2][]" value="yes" />Yes
<input type="radio" name="radio_array[2][]" value="no" />no
...
</form>
... and so on.