0

我有一个表单，它需要能够在表单中乘以特定的行，然后复制整个表单。在我正在处理的概念示例中，有一个名称字段和一个 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');
4

1 回答 1

1

一种方法是最初存储原始表单的副本，然后使用该副本创建其他表单。

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();

它可能会变得有点干燥，但这是基本的想法。没有一种形式知道或需要关心任何其他形式。

于 2013-11-13T15:40:41.810 回答