How To Get Cloned Radio Buttons To Pass Their Values Through To A Form Process

I have an RSVP form (http://adrianandemma.com/) with a name field and a radio for 'Attending - Yes/No'. You can clone these fields to RSVP for more that one guest at a time. I'm tr

Solution 1:

The final problem appears to have been the .val('') in your chain.

Since it was referencing all the inputs, it was removing the value of the radio buttons as well. Without values, they passed nothing to the backend when they were checked.

The code below separates actions into those actions common to all the inputs (updating the id and name), then removes the value from just the text field, and then removes the checked attribute from just the radio buttons. Finally, it updates the for attribute of the labels and does the insert.

$('.addguest').on('click', function(e) {
    e.preventDefault();
    var i = $('.guest').length;

    var row = $('.guest').first().clone();

    //Handle the things common to all inputs
    row.find('input')
        .attr('id', function(idx, attrVal) {
            return attrVal + i;
        })
        .attr('name', function(idx, attrVal) {
            return attrVal.replace('[0]','')+'['+i+']'; // fix is here
        });

    //Handle the text input
    row.find('input[type="text"]').val('');

    //Handle the radio buttons
    row.find('input[type="radio"]').removeAttr('checked');

    //Handle the labels
    row.find('label').attr('for', function(idx, attrVal) {
        return attrVal + i;
    });

    row.insertBefore(this);
});

I've tested it in chrome and see that it provides the correct data to the backend - if there are further issues then we know to focus in on the PHP code from here-on-out (assuming this does do the trick for you in sending the right data).

Solution 2:

When you duplicated the Yes and No checkboxes you forgot to set their values. I inspected the HTML, the values are blank !

You can add these two lines at the end of your click function :

$('.coming-yes').val('Yes');
$('.coming-no').val('No');