Javascript Jquery动态表单元素
我有一个from来向用户添加关系,当用户单击add按钮时,我正在使用jquery添加一行新的相对关系。 我使用一个名为addRowIntoTab()的jquery函数来实现这一点 代码正在运行,我可以填充如下字段列表:Javascript Jquery动态表单元素,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我有一个from来向用户添加关系,当用户单击add按钮时,我正在使用jquery添加一行新的相对关系。 我使用一个名为addRowIntoTab()的jquery函数来实现这一点 代码正在运行,我可以填充如下字段列表: <tr> <td> <input type="text" name="textfield" id="textfield" value="Lorem Ipsum"></td> <td> <
<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都是相同的,因此我无法序列化()并将其发送到ajax
为什么每个字段都有一个唯一的ID或区别
提前谢谢
Max您也不应该在同一页中有具有相同ID的元素,因为这可能会导致很多麻烦。。。更不用说没有通过W3C验证了 现在,如果要使用相同的名称,应该将name=“textfield”替换为name=“textfield[]” 当它被发送到PHP时,数据将以数组的形式出现,您可以这样读取:
<?php
foreach($_POST['textfield'] as $data) {
echo $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选择器。即:$('.textfield')而不是$('#textfield')
这将解决您的冲突,并允许您成功发布。没关系!,那么,您是否有一个唯一名称属性的答案?保留一个全局
var计数
,在每个函数调用中递增它,在html
中找到所有生成的id
,并替换id
。谢谢dude,这很有帮助。)您也可以使用类似数组的名称。name='datepicker[]'
。。这正是我想要的。谢谢:D
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);
});
}
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);
});
}
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);
});
}