How to increment name attrVal array on cloned input using jQuery?

Question

I'm trying to setup an RSVP form for my wedding whereby you can clone a couple of fields to RSVP for more than one guest at a time (http://adrianandemma.com/). These cloned fields include a couple of radio buttons for 'attending Yes/No'.

When I clone the radio buttons I'm trying to increment their name attribute from name="coming[0]" to name="coming[1]", name="coming[2]", name="coming[3]", etc.

I need to try and do this because each cloned radio button needs to have a unique name attribute, otherwise you can't select more than one yes/no answer at a time. This means I can't just use an empty array name="coming[]".

I think I'm partly there, as when I clone the fields at present my JS is amending each cloned field to name="coming[0][1]", name="coming[0][2]", name="coming[0][3]".

I just need to try and get it to remove the [0], but can't work out how to do this using jQuery.

Here's my HTML form:

    <form action="?" method="post">
        <?php if(@$errors) :?>
            <p class="errors"><?php echo $errors; ?></p>
        <?php endif; ?>
        <input type="hidden" name="submit" value="1" />
        <div class="form-row">
            <div class="field-l">
                <p>Name</p>
            </div>
            <div class="field-r">
                <p>Attending?</p>
            </div>
        </div>
        <div class="form-row guest">
            <div class="field-l">
                <input type="text" name="name[0]" id="name" value="<?php echo htmlspecialchars(@$_REQUEST['name']); ?>" tabindex="1" />
            </div>
            <div class="field-r">
                <input type="radio" name="coming[0]" id="coming-yes" class="coming-yes" value="Yes"><label for="coming-yes">Yes</label><input type="radio" name="coming[0]" id="coming-no" class="coming-no" value="No"><label for="coming-no">No</label>
            </div>
        </div>
        <a class="addguest" href="#">Add further guest</a>
        <div class="form-row">
            <button type="submit" id="rsvp-submit" tabindex="2">Submit RSVP</button>
        </div>
    </form>

and here's my jQuery:

$(document).ready(function() {

    $('.addguest').on('click', function(e) {
        e.preventDefault();
        //
        // get the current number of ele and increment it
        //
        var i = $('.guest').length + 1;
        $('.guest').first().clone().find("input").attr('id', function(idx, attrVal) {
            return attrVal + i;  // change the id
        }).attr('name', function(idx, attrVal) {
            return attrVal+'['+i+']'; // change the name
        }).val('').removeAttr('checked').end().find('label').attr('for', function(idx, attrVal) {
            return attrVal + i; // change the for
        }).end().insertBefore(this);
    });

});

Here's my form process code that doesn't seem to be pulling through the radio button values:

<?php

$name = $_POST['name'];
$coming = $_POST['coming'];

$errors = "";
if(!@$_POST['name'])    { $errors .= "Please enter your name.<br/>\n"; }
if(!@$_POST['coming'])  { $errors .= "Please enter yes or no for attending.<br/>\n"; }

if(@$_POST['emailaddress'] != '')   { $spam = '1'; }

if (!$errors && @$spam != '1')
    {
        $to = "example@xyz.com";
        $subject = "Wedding RSVP";
        $headers = "From: noreply@adrianandemma.com";
        $body = "The following RSVP has been sent via the website.\n\n";
        for($i=0; $i < count($_POST['name']); $i++) {
            $body .= "
            Name ".($i+1)." : " . $_POST['name'][$i] . "\n
            Coming ".($i+1)." : " . $_POST['coming'][$i] ."\n\n";
        }
        $body .= "\n\nDate Received: " . date("j F Y, g:i a") . "\n";

        mail($to,$subject,$body,$headers);
    }

?>

I think you'll get more answers if you can break this down into the smallest problem. For example, you don't need to show your PHP backend because your problem is before that part of the code. — styfle, Apr 19 '17 at 14:08

score 4 · Accepted Answer · answered Apr 19 '17 at 14:13

4

Based on siddiq's comment above, this should do it:

$('.addguest').on('click', function(e) {
    e.preventDefault();
    var i = $('.guest').length + 1;
    $('.guest').first().clone().find("input").attr('id', function(idx, attrVal) {
        return attrVal + i;
    }).attr('name', function(idx, attrVal) {
        return attrVal.replace('[0]','')+'['+i+']'; // fix is here
    }).val('').removeAttr('checked').end().find('label').attr('for', function(idx, attrVal) {
        return attrVal + i;
    }).end().insertBefore(this);
});

answered Apr 19 '17 at 14:13

styfle

22,361
27
86
128

Thank you! This has worked and my name attributes are now being set nicely. Unfortunately the radio array values don't appear to be making it through to my form script, as they still appear blank in the email I receive. Strange as the name fields are coming through fine, must be a radio button issue. I've added my form process code back into my question, to see if anybody can see why this may be happening. – ade123 Apr 19 '17 at 14:26
1

Perhaps this is a separate question? – ade123 Apr 19 '17 at 14:28
I've created a new question for the issue with the radio values not come through: http://stackoverflow.com/questions/43499049/how-to-get-cloned-radio-buttons-to-pass-their-values-through-to-a-form-process thank you for the jQuery help! – ade123 Apr 19 '17 at 14:46

score 2 · Answer 2 · answered Apr 19 '17 at 14:10

2

Try not to implement a general function but a customized function for name and coming

Forget the return attrVal+'['+i+']' and replace it by return "name["+i+"]" and return "coming["+i+"]"

answered Apr 19 '17 at 14:10

Baptiste Arnaud

2,522
3
25
55

How to increment name attrVal array on cloned input using jQuery?

2 Answers2

Linked