Populate the nth form element with the nth value of an array using jQuery

Question

I would like to know how to populate the nth hidden field, with the nth value of the array I've created below using jQuery. I've successfully created an array that groups the 3 checkbox options (if they are checked) in parentheses into the array. EX: [(A,B),(A,C),(A,B,C)...].

I now need to get the nth value in the array and populate 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 need to now 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 someone help? I'm a little lost on the best way to do this. I did try 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 much appreciated!

Ooops, sorry about that @DavidThomas. .registrant is the class on the rows of the table. I edited my issue above to show this. — SEM
– SEM, Commented Oct 23, 2014 at 13:08

SmartDev · Accepted Answer · 2014-10-24 13:55:11Z

1

Why don't you simply 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>

Now on submit you will have the checked values, separated by commas in the opt_0 and opt_1 keys.

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);
});

edited Oct 24, 2014 at 13:55

answered Oct 22, 2014 at 22:00

SmartDev

2,8821 gold badge20 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SEM Over a year ago

Thanks @SmartDev that actually fits my needs--I was over-thinking it. Although I'd still like to know if it's possible to populate the nth input field with the nth value of an array, as it'll be handy in the future.

SmartDev Over a year ago

@user3784298 You need join(",") for this. See updated answer.

SEM Over a year ago

The jQuery answer is exactly what I was looking for, @SmartDev !!!! Thank you for the assistance! Tried the solution in a fiddle others can view: jsfiddle.net/pn9zozto

Collectives™ on Stack Overflow

Populate the nth form element with the nth value of an array using jQuery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related