Question

虽然我设法让我的例子工作，但我测试它的代码似乎并不喜欢它。当我点击添加按钮时，复制的表单将在屏幕上显示一秒钟，然后立即消失。我基本上在JSFiddle中做同样的事情，虽然它要么用错误信息替换整个事情：{＆＃34;错误＆＃34;：＆＃34; Shell表单不验证{＆＃39; html_initial_name＆＃39;：你有＆＃39; initial-js_lib＆＃39;，＆＃39;表格＆＃39;：，＆＃39; html_name＆＃39;：＆＃39; js_lib＆＃39;，＆＃39; html_initial_id＆＃39;：你＆＃ 39; initial-id_js_lib＆＃39;，＆＃39;标签＆＃39;：u＆＃39; Js lib＆＃39;，＆＃39; field＆＃39;：，＆＃39; help_text＆＃39;：＆＃39; ;＆＃39;，＆＃39; name＆＃39;：＆＃39; js_lib＆＃39;} {＆＃39; html_initial_name＆＃39;：u＆＃39; initial-js_wrap＆＃39;，＆＃39; form＆＃39;：，＆＃39; html_name＆＃39;：＆＃39; js_wrap＆＃39;，＆＃39; html_initial_id＆＃39;：u＆＃39; initial-id_js_wrap＆＃39;，＆＃39; label＆＃39 ;：＆＃39; Js wrap＆＃39;，＆＃39; field＆＃39;：，＆＃39; help_text＆＃39;：＆＃39;＆＃39;，＆＃39; name＆＃39;：＆＃39; js_wrap＆＃39;}＆＃34;}

或者它会给我一个Forbidden 403错误。我用Firebug做了一个粗鲁的事情，我猜测JQuery不喜欢HTML / CSS中的东西，我只是不知道是什么。

HTML

<form method="post">
<fieldset id='EmployeeInfo' style='float: right'>
    <legend>Enter New Employee</legend>
    <table>
        <tr>
            <td class='td_small'>First Name:</td>
            <td class='td_wide'>
                <input id='EmpFirst' class='maxField' type='text' maxlength='35' />
            </td>
            <td class='td_small'>M.I.</td>
            <td class='td_xtrasmall'>
                <input id='EmpMI' class='minField' type='text' maxlength='35' />
            </td>
            <td class='td_mid'>Last Name:</td>
            <td class='td_wide'>
                <input id='EmpLast' class='maxField' type='text' maxlength='35' />
            </td>
        </tr>
        <tr>
            <td>Address:</td>
            <td colspan='2'>
                <input id='EmpAddress' class='mostField' type='text' maxlength='35' />
            </td>
            <td>&nbsp;</td>
            <td>Apt. No.</td>
            <td>
                <input id='EmpAptNo' class='maxField' type='text' maxlength='35' />
            </td>
        </tr>
        <tr>
            <td>City:</td>
            <td>
                <input id='EmpCity' class='maxField' type='text' maxlength='25' />
            </td>
            <td>State:</td>
            <td>
                <select id='EmpState'>
                    <option></option>
                </select>
            </td>
            <td>ZIP:</td>
            <td>
                <input id='EmpZIP' class='maxField' type='text' maxlength='25' />
            </td>
        </tr>
        <tr>
            <td>SSN:</td>
            <td>
                <input id='EmpSSN' class='maxField' type='text' maxlength='25' />
            </td>
            <td>Gender:</td>
            <td>
                <select id='EmpGender'>
                    <option></option>
                </select>
            </td>
            <td>Date of Birth:</td>
            <td>
                <input id='EmpDOB' class='maxField' type='text' maxlength='25' />
            </td>
        </tr>
        <tr>
            <td>Marital Status:</td>
            <td>
                <select id='EmpMarital'>
                    <option>Single</option>
                    <option>Married</option>
                    <option>Married/Filing Separately</option>
                    <option>Other</option>
                </select>
            </td>
            <td>Dependants:</td>
            <td>
                <select id='EmpDepend'>
                    <option>0</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10+</option>
                </select>
            </td>
            <td>Head of Household:</td>
            <td>
                <input id='EmpHOH' type='checkbox' />
            </td>
        </tr>
        <tr>
            <td>Disability:</td>
            <td>
                <input id='EmpDisabled' type='checkbox' />
            </td>
            <td>US Citizen:</td>
            <td>
                <input id='EmpCitizen' type='checkbox' />
            </td>
            <td>I-9 Form:</td>
            <td>
                <input id='EmpINine' type='checkbox' />
            </td>
        </tr>
    </table>
</fieldset>
<br/>
<button id="add" style="text-align: center; width: 20%;float: right;">New Employee</button>

的Javascript

//Dupe form and append number every id attribute
(function () {

var count = 0;
$("#add").on("click", function () {

    var source = $("#EmployeeInfo"),
        clone = source.clone();

    clone.find(":input").attr("id", function (i, val) {
        return val + count;
    });

    clone.insertBefore(this);

    count++;
});
})();

https://jsfiddle.net/c4dc0thx/4/

Answer 1

有效点击New Employee按钮即可提交表单。只需在jQuery中使用preventDefault()即可停止提交表单。或者将button移到<form>标记之外。

//Dupe form and append number every id attribute
(function () {

    var count = 0;
    $("#add").on("click", function (e) {

        // Prevent the form from submitting
        e.preventDefault();

        var source = $("#EmployeeInfo"),
            clone = source.clone();

        clone.find(":input").attr("id", function (i, val) {
            return val + count;
        });

        clone.insertBefore(this);

        count++;
    });

})();

https://jsfiddle.net/c4dc0thx/5/

表格简短克隆然后消失

1 个答案: