javascript - 無限に拡張可能なフォームを作成しますか?

Question

フォーム内の特定の行を増やし、フォーム全体を複製できる必要があるフォームがあります。私が取り組んでいる概念の例では、Name フィールドと URL フィールドがあります。1 つの名前フィールドと最大 3 つの URL フィールドが必要ですが、このグループ全体を最大 3 回まで複製し、POST 経由で送信する必要がありますが、数値の組み合わせは異なる場合があります。
例として、最初のグループは 1 つの名前、3 つの URL、2 番目は 1 つの URL、3 番目は 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');