[英]Jquery dynamic form elements
我有一个从添加到用户的关系,当用户单击添加按钮时,我正在使用jquery添加相对的新行。 我通过使用名为addRowIntoTab()的jQuery函数来做到这一点
function addRowIntoTab() {
var url = templates.family_details;
generic_get(url, function (html) {
// $('#family_details_row').append(html);
$('.holder tr:last').after(html);
});
}
该代码正在工作,我能够填充如下所示的字段列表:
<tr>
<td>
<input type="text" name="textfield" id="textfield" value="Lorem Ipsum"></td>
<td>
<select>
<option value="daughter">Daughter</option>
<option value="Son">Son</option>
<option value="wife">Wife</option>
<option value="mother">Mother</option>
<option value="father">Father</option>
<option value="mil">Mil</option>
<option value="fil">Fil</option>
<option value="brother">Brother</option>
</select>
</td>
<td>
<input type="text" name="textfield" id="datepicker3" value="21/01/84"></td>
<td class="last"><input type="text" name="textfield" id="textfield" value="32"></td>
</tr>
我现在面临的问题是所有表单元素的输入ID都相同,因此我无法serialize()并将其发送给ajax。
为什么在每个字段都有唯一的ID或差异时添加乳清?
预先感谢Max
您也永远不要在同一页面中使用具有相同ID的元素,因为这可能会引起很多麻烦……更不用说未通过W3C验证了。
现在,如果要使用相同的名称,应将name =“ textfield”替换为name =“ textfield []”。
当数据发送到PHP时,数据将采用数组形式,您可以像这样读取:
<?php
foreach($_POST['textfield'] as $data) {
echo $data;
}
?>
如果您无法控制数据发送者,则可以在每个ID中添加一些内容以使其唯一...在这种情况下,我将在每个ID属性的末尾添加一个自动递增的数字:
var currentID = 0;
function addRowIntoTab() {
var url = templates.family_details;
generic_get(url, function (html) {
// $('#family_details_row').append(html);
var data = $(html);
data.find('#textfield,#datepicker3').each(function() {
switch($(this).attr('id')) {
case 'textfield':
$(this).attr('id','textfield'+currentID);
break;
case 'datepicker3':
$(this).attr('id','datepicker3'+currentID);
break;
}
currentID++;
}
$('.holder tr:last').after(data);
});
}
我的首选选项删除ID属性并更改名称属性
function addRowIntoTab() {
var url = templates.family_details;
generic_get(url, function (html) {
// $('#family_details_row').append(html);
var data = $(html);
//Remove ID
data.find('#textfield,#datepicker3').removeAttr('id');
//Appends brackets "[]" to the end of each input's name
data.find('input').each(function() { $(this).attr('name',$(this).attr('name')+'[]'); });
$('.holder tr:last').after(data);
});
}
我建议您完全删除ID,除非您正在使用jquery选择器...。如果是这种情况,则应该使用类选择器,而不是ID选择器。 IE:$('。textfield')而不是$('#textfield')。
function addRowIntoTab() {
var url = templates.family_details;
generic_get(url, function (html) {
// $('#family_details_row').append(html);
var data = $(html);
data.find('#textfield,#datepicker3').each(function() {
$(this).attr('class',$(this).attr('id')); //creates a class with the ID name
$(this).removeAttr('id'); //removes the ID attribute
}
$('.holder tr:last').after(data);
});
}
这样可以解决您的冲突,也可以使您成功发布。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.