Форма Кратко Клоны, а затем исчезает

Question

Хотя мне удалось заставить мой пример работать, код, который я тестировал для него, похоже, не нравится. Когда я нажимаю кнопку «Добавить», дублируемая форма появляется на экране на секунду, а затем сразу исчезает. Я в основном делаю то же самое в JSFiddle, хотя он либо заменяет все это сообщением об ошибке: {"error": "Форма оболочки не проверяет {'html_initial_name': u'initial-js_lib ',' form ':,' html_name ':' js_lib ',' html_initial_id ': u'initial-id_js_lib', 'label': u'Js lib ',' field ':,' help_text ':' ',' name ':' js_lib '} {' html_initial_name ': u'initial-js_wrap', 'form':, 'html_name': 'js_wrap', 'html_initial_id': u'initial-id_js_wrap ',' label ': u'Js wrap', 'field':, ' help_text ':' ',' name ':' js_wrap '} "}

или он даст мне ошибку Forbidden 403. Я сделал прогон с Firebug, и я предполагаю, что в HTML/CSS есть что-то, что JQuery не нравится, я просто не знаю, что.

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 является представлением формы. Просто используйте preventDefault() в вашем jQuery, чтобы остановить отправку формы. Либо это, либо переместите 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/