Fill nth form element with nth array value using jQuery
I would like to know how to populate the nth hidden field, with the nth value of the array I created below using jQuery. I have successfully created an array that groups 3 checkboxes (if checked) in parentheses into an array. EX: [(A, B), (A, C), (A, B, C) ...].
Now I need to get the nth value in the array and fill the nth hidden field with that value.
<input type="hidden" name="opt_0" id="opt_0" class="get_options">
<input type="hidden" name="opt_1" id="opt_1" class="get_options">
<table>
<tbody>
<tr class="registrant">
<td><input type="text" id="OETIPC-NAME0" name="OETIPC-NAME0"></td>
<td><input type="checkbox" name="OETIPC-A0" id="OETIPC-A0" class="reg_type" value="A"></td>
<td><input type="checkbox" name="OETIPC-B0" id="OETIPC-B0" class="reg_type" value="B"></td>
<td><input type="checkbox" name="OETIPC-C0" id="OETIPC-C0" class="reg_type" value="C"></td>
</tr>
<tr class="registrant">
<td><input type="text" id="OETIPC-NAME1" name="OETIPC-NAME1"></td>
<td><input type="checkbox" name="OETIPC-A1" id="OETIPC-A1" class="reg_type" value="A"></td>
<td><input type="checkbox" name="OETIPC-B1" id="OETIPC-B1" class="reg_type" value="B"></td>
<td><input type="checkbox" name="OETIPC-C0" id="OETIPC-C1" class="reg_type" value="C"></td>
</tr>
</tbody>
</table>
// Get registration option values and group for each row then create array
$('.registrant').each(function() {
var attendee_reg_type = $(this).find('.reg_type:checked').map(function() {
return this.value;
}).get();
});
I now need to output something similar to the following:
<input type="hidden" name="opt_0" id="opt_0" class="get_options" value="(A,B)">
<input type="hidden" name="opt_1" id="opt_1" class="get_options" value="(A,C)">
...
Can anyone help? I am a bit lost on the best way to do this. I tried the following but with no success:
$('.registrant').each(function() {
var attendee_reg_type = $(this).find('.reg_type:checked').map(function() {
return this.value;
}).get();
$('#opt_[i]').val(attendee_reg_type[i]);
});
Help is greatly appreciated!
Why don't you just remove the hidden fields and rename your checkboxes like this:
<table>
<tbody>
<tr>
<td><input type="text" id="OETIPC-NAME0" name="OETIPC-NAME0"></td>
<td><input type="checkbox" name="opt_0" id="OETIPC-A0" class="reg_type" value="A"></td>
<td><input type="checkbox" name="opt_0" id="OETIPC-B0" class="reg_type" value="B"></td>
<td><input type="checkbox" name="opt_0" id="OETIPC-C0" class="reg_type" value="C"></td>
</tr>
<tr>
<td><input type="text" id="OETIPC-NAME1" name="OETIPC-NAME1"></td>
<td><input type="checkbox" name="opt_1" id="OETIPC-A1" class="reg_type" value="A"></td>
<td><input type="checkbox" name="opt_1" id="OETIPC-B1" class="reg_type" value="B"></td>
<td><input type="checkbox" name="opt_1" id="OETIPC-C1" class="reg_type" value="C"></td>
</tr>
</tbody>
</table>
You will now have marked values in the view, separated by commas in the keys opt_0
and opt_1
.
JQuery solution:
$('.registrant').each(function (index) {
var attendee_reg_type = $(this).find('.reg_type:checked').map(function () {
return this.value;
}).get().join(",");
$("#opt_" + index).val(attendee_reg_type);
});