Question

嘿，你们我都在尝试构建一个生成字段集和输入的表单，其中字段集中的所有输入都将具有与后缀相同的数字，以便我可以将它们用于方程式。理想情况下，您要填写可用的输入，然后单击“添加另一个栅栏”，表单的相同部分将显示为“fenceDescription2”，“postQuantity2”等输入，然后如果再次执行，则会显示“fenceDescription3” ，“postQuantity3”等。这是我迄今为止尝试过的小提琴 - http://jsfiddle.net/gv0029/3dnNP/1/ - 如果有人能指出我出错的地方，我会非常感激，非常感谢你。这里也是代码 HTML：

<fieldset id="fence">
    <div id="inputFence1" class="clonedInputFence">
        <fieldset id="fenceDescripton">
            <legend><strong>Fence Description</strong>

            </legend>Fence Description:
            <select name="fenceHeight" id="fenceHeight">
                <option value="select">Select Fence Height</option>
                <option value="6" id="fH6">6 Ft.</option>
                <option value="8" id="fH8">8 Ft.</option>
            </select>
        </fieldset>

        <fieldset id="post">
            <legend><strong>Post Type</strong>

            </legend>

            <label>Post Quantity:
                <input type="postQuantity" name="postQuantity" id="postQuantity" value="" />
            </label>
            <select name="postMeasurements" id="postMeasurements">
                <option value="select">Select Post Measurements</option>
                <option value="23/8 x .065 x 8" id="23/8 x .065 x 8">2 3/8 x .065 x 8</option>
                <option value="23/8 x .095 x 8" id="23/8 x .095 x 8">23/8 x .095 x 8</option>
            </select>
        </fieldset>

    </div>
</fieldset>
    <div>
        <input type="button" id="btnAddFence" value="Add Another Fence" />
        <input type="button" id="btnDelFence" value="Remove Fence" />
    </div>

JS：

//Dynamic Fence Input Fields
    $('#btnAddFence').click(function() {
                var num     = $('.clonedInputFence').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 = $('#inputFence' + num).clone().attr('id', 'inputFence' + newNum);

                //Fieldset creation
                newElem.find('fieldset').attr('id', 'name' + newNum);

                //Fence Description 
                newElem.find($("select[name=fenceHeight]")).attr('id', 'fenceHeight' + newNum).attr('name', 'fenceHeight' + newNum);


                //Post Type
                newElem.find($(':input[name="postQuantity"]')).attr('id', 'postQuantity' + newNum).attr('name', 'postQuantity' + newNum);
                newElem.find($("select[name=postMeasurements]")).attr('id', 'postMeasurements' + newNum).attr('name', 'postMeasurements' + newNum);



                // insert the new element after the last "duplicable" input field
                $('#inputFence' + num).after(newElem);

                // enable the "remove" button

                $('#btnDelFence').removeAttr('disabled');

                // business rule: you can only add 5 names
                //if (newNum == 5)
                    //$('#btnAdd').attr('disabled','disabled');
            });

            $('#btnDelFence').click(function() {
                var num = $('.clonedInputFence').length; // how many "duplicatable" input fields we currently have
                $('#inputFence' + num).remove();     // remove the last element

                // enable the "add" button
                //$('#btnAdd').attr('disabled','');
                $('#btnAddFence').removeAttr('disabled');

                // if only one element remains, disable the "remove" button
                if (num-1 == 1)
                    $('#btnDelFence').attr('disabled','disabled');
            });

            $('#btnDelFence').attr('disabled','disabled');

Answer 1

您可以通过命名输入“fenceDescription []”而不是“fenceDescription1”，“fenceDescription2”等来绕过整个事情。然后当您查看POST数据时，“fenceDescription”将是一个值数组（我假设你以后正在使用POST。

然后你要做的就是复制字段集，除了清除克隆版本的输入之外别担心。

顺便说一句，您也可能遇到问题，因为您错误地使用了ID。页面上只有一件事应该有一定的ID。如果某些东西拥有或可能有多个相同的ID，则应使用“class”。

如果您必须使用不同的输入名称，则需要执行以下操作：

将您的选择命名如下：

<select name="fenceHeight_1" class="fenceHeight">

同样，非常重要的是要注意我已将fenceHeight更改为类而不是ID。

然后，在完成克隆后，您将有两个名为“fenceHeight_1”的输入。所以你可以通过这个来改变最后的数字

//get the input name and split into array (assuming your clone is always last)
var parts=$('.fenceHeight:last').attr('name').split("_");
//change the second element of the array to be one higher
parts[1]++;
//join back into a string and apply to the new element
$('.fenceHeight:last').attr('name',parts.join("_"));

看到这个完全有效的jsfiddle。请注意对HTML的更改和注释！ http://jsfiddle.net/3dnNP/4/

带有生成名称的动态表单

1 个答案: