重命名动态添加或删除的表单字段
Renaming form fields added or deleted dynamically
我正在寻找帮助来重命名一些动态创建的字段的名称属性。现在,我的代码为添加的字段分配新的值(它根据div的长度递增),但当我删除一个字段时,问题就出现了,我不知道如何根据删除的字段数重命名剩余的字段。
jQuery:
$(document).ready(function () {
$("#add").click(function () {
var intId = $("#reglas div").length;
var fieldWrapper = $('<div></div>', {
class: 'fieldwrapper',
id: 'field' + intId
});
var fPath = $('<input align="left" type="text" placeholder="Path" class="reglas_wrapper" id="path" name="field1_' + intId + '" required /> ');
var fTTL = $('<input type="text" class="reglas_wrapper" placeholder="TTL" id="ttl" name="field2_' + intId + '" required />');
var removeButton = $('<input align="right" type="button" id="del" class="remove" value="-" /> <br><br>');
removeButton.click(function () {
$(this).parent().remove();
});
fieldWrapper.append(fPath);
fieldWrapper.append(fTTL);
fieldWrapper.append(removeButton);
$("#reglas").append(fieldWrapper);
});
$("#cache").each(function () {
$(this).qtip({
content: {
text: $(this).next('.tooltiptext')
}
});
});
});
$('#formsite').on('submit', function (e) {
//prevent the default submithandling
e.preventDefault();
//send the data of 'this' (the matched form) to yourURL
$.post('siteform.php', $(this).serialize());
});
这是我的完整代码:http://jsfiddle.net/34rYv/131/
您将需要一个增量导师。看看这个更新的小提琴。
这是代码的开头:
$(document).ready(function() {
var myIncr = 0;
$("#add").click(function() {
myIncr++;
var intId = myIncr;
您可以向每个输入字段添加一个类或id,然后根据该类或id将名称添加为
<input type="text" class="something" />
使用此jQuery:
var classval = $('input[type=text]').attr('class'); // get class..
// now add the name as
$(this).attr('name', classval);
你可以有尽可能多的输入,它们将根据它们的类或id添加名称!
因此,即使输入字段被删除,控件中仍然有类属性!
相关文章:
- 通过单击动态加载的表中同一行的另一个字段来更新一行的字段
- 添加和删除隐藏字段数组中的值,而不提交表单
- 单击鼠标,用MySQL数据填充html表单输入字段
- 带有条件字段的PHP表单
- 验证PDF表单中的字段
- HTML提交表单,同时包含空字段检查和按钮隐藏
- 在表单中的输入字段上提交事件
- 当所有输入文本字段都为空时,禁止表单提交,但当jquery中的任何字段不为空时允许提交
- 表单输入字段随着溢出的文本而增长
- 如何将onChange方法添加到ExtJS 4表单中的所有字段(textField)中
- 尝试使用名称访问表中字段的日期选取器时出现问题
- Javascript 表单 - 字段不是必需的
- 单击按钮时更改数据库表的字段值
- 数据表将字段值关联到按钮,而 ajax 填充表
- 返回数据表输入字段
- 更改附加表行字段jQuery的名称
- Angularjs表单/字段验证使用JavaScript函数,无需指令
- 仅在Firefox中,表脱离字段集边界
- 如何在表单提交后使用JQuery从附加到HTML表的字段中获取$_POST数组中的值
- 什么's提交表单后,从post数组中动态附加的表行字段中获取值的问题