如何使用jQuery在克隆的输入上增加名称attrVal数组？ [英] How to increment name attrVal array on cloned input using jQuery?

问题描述

我试图为我的婚礼设置一个RSVP表格，以便您可以一次为多个客人克隆几个字段给RSVP（ http://adrianandemma.com/ ）。这些克隆的字段包括几个单选按钮，用于'参加是/否'。

当我克隆单选按钮时，我试图从名称= come [0]to name =coming [1]，name =coming [2]，name =coming [3]等。

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

我认为我部分存在，因为当我现在克隆字段我的JS正在修改每个克隆字段的名称=coming [0] [1]，name =coming [0] [2]，name =coming [0] [3]。

我只需要尝试去除[0]，但不能解决如何使用jQuery来做到这一点。

这是我的HTML表单：

 < form action =？方法= POST > 
<？php if（@ $ errors）：？> 
< p class =errors><？php echo $ errors; ？>< / p为H. 
<？php endif; ？> 
< input type =hiddenname =submitvalue =1/> 
< div class =form-row> 
< div class =field-l> 
< p>名称< / p> 
< / div> 
< div class =field-r> 
< p>参加？< / p> 
< / div> 
< / div> 
< div class =form-row guest> 
< div class =field-l> 
< input type =textname =name [0]id =namevalue =<？php echo htmlspecialchars（@ $ _ REQUEST ['name']）;？> tabindex =1/> 
< / div> 
< div class =field-r> 
< input type =radioname =coming [0]id =coming-yesclass =coming-yesvalue =Yes>< label for =coming-yes >是< / label>< input type =radioname =coming [0]id =coming-noclass =coming-novalue =No>< label for = 未来-无 >否LT; /标签> 
< / div> 
< / div> 
 < div class =form-row> 
< button type =submitid =rsvp-submittabindex =2>提交RSVP< / button> 
< / div> 
< / form> 
  

以下是我的jQuery：

<$ p $ （'click'，function（e））{
（'。addguest'）。（$'code> $（document）.ready（function（）{
$ b $ e.preventDefault（）;
//
//获取ele的当前数量并增加它
//
var i = $（'。guest'）。length + 1;
$（'。guest'）。first（）。clone（）。find（input）。attr（'id'，function（idx，attrVal）{
return attrVal + i ; //改变id
}）。attr（'name'，function（idx，attrVal）{
return attrVal +'['+ i +']'; //更改名称
（''）.value（''）。removeAttr（'checked'）。end（）。find（'label'）。attr（'for'，function（idx，attrVal）{
return attrVal + i; / /更改为
））。end（）。insertBefore（this）;
}）;

}）;

这里是我的表单处理代码，似乎并没有通过单选按钮值： p>

 <？php 
 
 $ name = $ _POST ['name']; 
 $ coming = $ _POST ['coming']; 
 
 $ errors =; 
 if（！@ $ _ POST ['name']）{$ errors。=请输入您的姓名。< br /> gt; \\\
; } 
 if（！@ $ _ POST ['coming']）{$ errors。=请输入yes或no参加。< br /> \\\
; } 
 $ b $ if if（@ $ _ POST ['emailaddress']！=''）{$ spam ='1'; } 
 $ b $ if（！$ errors&& $ spam！='1'）
 {
 $ to =[e-mail];} 
 $ subject =结婚RSVP; 
 $ headers =From：[e-mail]; 
 $ body =以下回复已经通过网站发送。\\\ n; $ $ b $ for $（$ i = 0; $ i< count（$ _ POST ['name']）; $ i ++）{
 $ body。=
 Name。（$ i + 1）。：。 $ _POST ['name'] [$ i]。 \\\
 
 Coming。（$ i + 1）。：。 $ _POST ['coming'] [$ i]。\\\
\\\
; 
} 
 $ body。=\\\
\\\
Date Received：。日期（j F Y，g：i a）。 \\\
; 
 
邮件（$ to，$ subject，$ body，$ headers）; 
} 
 
？> 
  

解决方案

基于上面的siddiq的评论，应该这样做：

$ b $ pre $ $（'。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 '（''+'+']'; // fix is here
}）。val（''）。removeAttr（'checked'）。end（）。find 'label'）。attr（'for'，function（idx，attrVal）{
return attrVal + i;
}）。end（）。insertBefore（this）;
}）;


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 = "[e-mail]";
        $subject = "Wedding RSVP";
        $headers = "From: [e-mail]";
        $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);
    }

?>

解决方案

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

这篇关于如何使用jQuery在克隆的输入上增加名称attrVal数组？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！