Как увеличить имя массива attrVal на клонированном вводе, используя jQuery?

Я пытаюсь настроить форму RSVP для моей свадьбы, чтобы вы могли клонировать пару полей в RSVP для более чем одного гостя одновременно ( http://adrianandemma.com/). Эти клонированные поля включают пару переключателей для "посещения Да / Нет".

Когда я клонирую переключатели, я пытаюсь увеличить их атрибут name от name="coming[0]" до name="coming[1]", name="coming[2]", name="coming[3] ", так далее.

Мне нужно попытаться сделать это, потому что каждый клонированный переключатель должен иметь уникальный атрибут имени, иначе вы не можете выбрать более одного ответа да / нет одновременно. Это означает, что я не могу просто использовать пустой массив name="coming[]".

Я думаю, что я частично там, так как, когда я клонирую поля в настоящее время, мой JS вносит поправки в каждое клонированное поле в name="coming[0][1]", name="coming[0][2]", name="приход [0][3]".

Мне просто нужно попробовать и заставить его удалить [0], но я не могу понять, как это сделать с помощью jQuery.

Вот моя HTML-форма:

    <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>

и вот мой 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);
    });

});

Вот мой код процесса формы, который, кажется, не просматривает значения переключателя:

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

?>
Источник

2 ответа

Решение

Основываясь на комментарии siddiq выше, это должно сделать это:

$('.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);
});
Источник

Старайтесь не реализовывать общую функцию, а настраиваемую функцию для name а также coming

Забудь return attrVal+'['+i+']' и заменить его на return "name["+i+"]" а также return "coming["+i+"]"

Источник
Другие вопросы по тегам