jQuery - 如何提交克隆表单?

时间:2014-04-21 14:23:58

标签: javascript jquery html forms

如何同时提交所有克隆表格?

我创建了一个脚本来克隆我的表单,我想提交所有克隆的表单。我怎么能这样做?

HTML:

        <div id='forms'>
        <div class='cform'>

        <form id='form' method='POST'>   

            <input style='width: 80px;' class='hihi' type='submit' name='add_jo' value='Submit all' />

             <td><input class='txtedit' placeholder='Job name' type='text'  name='jo[]' maxlength='130' /></td>

    </form>

  </div>
 </div>

的jQuery

$('.clone').click(function(event) {
    event.preventDefault();

    var tr = $('.cform:first');
    var newTr = tr.clone();
    newTr.find(":input").val(''); // find all input types (input, textarea etc), empty it.
    newTr.appendTo(tr.parent());
}); 

1 个答案:

答案 0 :(得分:1)

提交表单会触发新页面加载请求,因此您无法同时提交多个表单。尝试收集所有表格&#39;要提交的隐藏表单中的值,或使用某些AJAX来完成工作而不实际提交表单数据。

或者,您可以克隆表单的内容以扩展表单本身。

<form action="..." method="post">
    <div class="cloneable">
        <input name="data[]" value="" />
    </div>
    <button id="extend">Clone</button>
    <button type="submit" id="submit">Submit</button>
</form>

您的JS可能如下所示:

 $("#extend").click( function() {
      $(".cloneable")
          .clone()
          .insertBefore( $("#extend") );
 } );
相关问题