如何使用 jQuery 在克隆输入上增加名称 attrVal 数组?
How to increment name attrVal array on cloned input using jQuery?
我正在尝试为我的婚礼设置一个 RSVP 表单,您可以在其中将几个字段复制到 RSVP 中,一次供不止一位客人使用 (http://adrianandemma.com/)。这些克隆的字段包括 'attending Yes/No'.
的几个单选按钮
当我克隆单选按钮时,我试图将它们的名称属性从名称="coming[0]" 增加到名称="coming[1]"、名称="coming[2]"、名称="coming[3]",等等
我需要尝试这样做,因为每个克隆的单选按钮都需要有一个唯一的名称属性,否则您不能 select 一次回答多个 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>
这是我的 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);
}
?>
尽量不要实现通用功能,而是为name
和coming
定制功能
忘记 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);
});
我正在尝试为我的婚礼设置一个 RSVP 表单,您可以在其中将几个字段复制到 RSVP 中,一次供不止一位客人使用 (http://adrianandemma.com/)。这些克隆的字段包括 'attending Yes/No'.
的几个单选按钮当我克隆单选按钮时,我试图将它们的名称属性从名称="coming[0]" 增加到名称="coming[1]"、名称="coming[2]"、名称="coming[3]",等等
我需要尝试这样做,因为每个克隆的单选按钮都需要有一个唯一的名称属性,否则您不能 select 一次回答多个 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>
这是我的 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);
}
?>
尽量不要实现通用功能,而是为name
和coming
忘记 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);
});