Javascript 如何使用jQuery在克隆的输入上增加name attrVal数组？

我正在尝试为我的婚礼设置一个RSVP表单，通过该表单，您可以一次为多个来宾将几个字段克隆到RSVP（）。这些克隆字段包括两个单选按钮，用于“出席是/否”

克隆单选按钮时，我试图将其名称属性从name=“coming[0]”增加到name=“coming[1]”、name=“coming[2]”、name=“coming[3]”等

我需要尝试这样做，因为每个克隆的单选按钮都需要有一个唯一的name属性，否则一次不能选择多个yes/no答案。这意味着我不能只使用空数组名=“coming[]”

我想我在一定程度上做到了这一点，因为当我目前克隆字段时，我的JS正在将每个克隆字段修改为name=“coming[0][1]”，name=“coming[0][2]”，name=“coming[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>

以下是我的表单流程代码，它似乎没有通过单选按钮值进行筛选：

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

?>

---

尽量不要实现一般功能，而是为

名称

和

未来

---

忘记

return attrVal+'['+i+']'

并将其替换为

return“name[“+i+”]”

和

return“coming[“+i+]””]”

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

---

如果你能把这个问题分解成最小的问题，我想你会得到更多的答案。例如，您不需要显示您的PHP后端，因为您的问题出现在代码的这一部分之前。在添加

'['+i+']']

之前，请从名称中删除

[0]

。谢谢@style我现在已经从我的问题中删除了它。谢谢！这已经奏效了，我的名字属性现在设置得很好。不幸的是，无线电阵列值似乎没有进入我的表单脚本，因为它们在我收到的电子邮件中仍然显示为空白。奇怪的是，名称字段很好地通过了，这一定是一个单选按钮问题。我已经将我的表单流程代码添加回我的问题中，以查看是否有人可以看到这可能发生的原因。也许这是一个单独的问题？我已经为这个问题创建了一个新的问题，其中的无线电值未通过：感谢jQuery帮助！

$('.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);
});