[英]create an infinitely extensible form?
我有一个表格,需要能够将表格中的特定行相乘,然后复制整个表格。 在我正在研究的概念示例中,有一个“名称”字段和一个“ URL”字段。 我需要1个名称字段和3个URL字段,但是我需要将此整个分组重复最多3次,然后通过POST提交,但数字配对可以不同。
例如,第一个组可以具有1个名称,3个URL,第二个组可以具有1个URL,而第三个组可以具有3个URL。 我可以乘以URL字段或整个表单的数量,但是如果我有2个URL字段,那么表单的所有倍数都有2个URL字段,因此我无法在任何表单中进行更改。
与仅在此处发布代码相比,查看JSFiddle要容易得多,因为您可以看到我的代码及其行为方式。 http://jsfiddle.net/wingdom/yCTpf/3/
感谢您的帮助!
HTML:
<form id="myForm">
<div id="O1" class="clonedInput5">
<fieldset>
<input type="hidden" name="Ocount" id="Ocount" value="1" />
<legend>Outbound App - Required</legend>
<div>
<label>Name:</label>
<input type="text" name="oname">
</div>
<div id="ourl1" style="margin-bottom:4px;" class="clonedInput1">URL:
<input type="text" name="ourl1" id="ourl1" />
</div>
<div>
<input type="button" id="ourlAdd" value="Add URL" />
<input type="button" id="ourlDel" value="Remove URL" />
</div>
<input type="hidden" name="urlo" id="urlo" value="1" />
</fieldset>
</div>
<input type="button" id="OAdd" value="Add Outbound" />
<input type="button" id="ODel" value="Rm Outbound" />
使用Javascript:
$('#ourlAdd').click(function () {
var num = $('.clonedInput1').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('#ourl' + num).clone().attr('id', 'ourl' + newNum);
// manipulate the name/id values of the input inside the new element
newElem.children(':first').attr('id', 'ourl' + newNum).attr('name', 'ourl' + newNum);
// insert the new element after the last "duplicatable" input field
$('#ourl' + num).after(newElem);
document.getElementById("urlo").value = newNum;
// enable the "remove" button
$('#ourlDel').attr('disabled', '');
// business rule: you can only add 5 names
if (newNum == 3) $('#ourlAdd').attr('disabled', 'disabled');
});
$('#ourlDel').click(function () {
var num = $('.clonedInput1').length; // how many "duplicatable" input fields we currently have
$('#ourl' + num).remove(); // remove the last element
document.getElementById("urlo").value = num - 1;
// enable the "add" button
$('#ourlAdd').attr('disabled', '');
// if only one element remains, disable the "remove" button
if (num - 1 == 1) $('#ourlDel').attr('disabled', 'disabled');
});
$('#ourlDel').attr('disabled', 'disabled');
$('#OAdd').click(function () {
var num = $('.clonedInput5').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('#O' + num).clone().attr('id', 'O' + newNum);
// insert the new element after the last "duplicatable" input field
$('#O' + num).after(newElem);
document.getElementById("Ocount").value = newNum;
// enable the "remove" button
$('#ODel').attr('disabled', '');
// business rule: you can only add 5 names
if (newNum == 3) $('#OAdd').attr('disabled', 'disabled');
});
$('#ODel').click(function () {
var num = $('.clonedInput5').length; // how many "duplicatable" input fields we currently have
$('#O' + num).remove(); // remove the last element
document.getElementById("Ocount").value = num - 1;
// enable the "add" button
$('#OAdd').attr('disabled', '');
// if only one element remains, disable the "remove" button
if (num - 1 == 1) $('#ODel').attr('disabled', 'disabled');
});
$('#ODel').attr('disabled', 'disabled');
一种方法是首先存储原始表单的副本,然后使用该副本创建其他表单。
var $originalForm = $("#originalForm").clone();
现在,任何时候您需要创建一个新表单时,只需执行以下操作: $originalForm.clone()
然后遍历表单中固定ID的元素(假设您不会不使用id)。
虽然,我个人将以完全不同的方式进行此操作。
var formTemplate = "form template here, or get it from a <script type=\"text/template\"></text>";
function ExtendableForm() {
this.$form = $(formTemplate).appendTo("body");
this.bindEvents();
return this.$form;
}
$.extend( ExtendableForm.prototype, {
addAnotherURL: function(){
this.$form.find(".wrap-url").append($(formTemplate).find(".wrap-url").children());
},
addAnotherName: function(){
this.$form.find(".wrap-name").append($(formTemplate).find(".wrap-url").children());
},
bindEvents: function(){
this.$form
.on("click", ".add-url", $.proxy(addAnotherURL,this))
.on("click", ".add-name", $.proxy(addAnotherName,this));
}
});
$("#addAnotherForm").click(function(){
$("#form-container").append(new ExtendableForm());
}).click();
它可能可以做得更干一点,但这是基本思想。 没有人知道或需要关心任何其他形式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.