克隆后Jquery克隆提交表单

Question

首先，我是jquery和javascript的新手

<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>  
  <form action="test.php">
     <div>
      <div id='realElements'>
        <input type="test" name="test">    
      </div>

      <div id="clonedElements">
        Cloned
      </div>
      <button type="submit">
        submit
      </button>

       <button id="cloneButton" type="script">
      Clone
      </button>
  </div>
</form>
    <script>
      $("form").on("submit", e => e.preventDefault());
       $(document).ready(function() {
      $("#cloneButton").click(function(){
        $("#realElements").clone().appendTo("#clonedElements");
      });

});
</script>

这是我克隆text element的代码

实际上它通过引用@Jack Bashford答案。

如

$("form").on("submit", e => e.preventDefault());

但我不能提交表格。

这是我的要求：我想克隆尽可能多的元素并提交form

Answer 1

两个解决方案：

一：删除<form>元素。到目前为止，这是最简单的，并且就我所知，它并没有用于任何事情，所以它不应该破坏你的页面。

二：为表单提交添加一个停止提交的事件处理程序。这个也很简单，只需添加以下代码：

$("form").on("submit", e => e.preventDefault());

Answer 2

克隆按钮提交的原因是因为表单中没有type属性的任何按钮标记（或者在您的情况下具有无效的type，type="script"和type="test"无效）被认为是type='submit'。

在我删除的演示中：

$("form").on("submit", e => e.preventDefault());

然后我添加了一个带有有效type='button'的按钮和另一个没有任何按钮的按钮，你想猜点单击时提交了哪一个？

   <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
 
  <form action="test.php">
     <div>
      <div id='realElements'>
        <input type="test" name="test">    
      </div>

      <div id="clonedElements">
        Cloned
      </div>
      <button type="submit">
        submit
      </button>

       <button id="cloneButton" type="script">
      Clone
      </button>
      
        <button type="button">
      type='button'
      </button>
      
        <button>
      type=null
      </button>
      
  </div>
</form>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
    <script>
     
       $(document).ready(function() {
      $("#cloneButton").click(function(){
        $("#realElements").clone().appendTo("#clonedElements");
      });

});
    </script>

Answer 3

默认情况下，该按钮没有明确声明类型，它将承担提交的角色。因此，当您触发单击时，它会提交表单Button w3.org

缺省值default是Submit Button状态。

您有以下解决方案

• 将按钮转换为链接（标签）。
• 定义按钮的类型
• 将事件内联放在元素中并在结尾处返回false

您将失去表单默认行为的替代方案

• 通过javascript在表单上防止默认
• 添加内联属性onsubmit =“return false;”在表单元素上

内联属性的示例

<button id="cloneButton" onclick="$('#realElements').clone().appendTo('#clonedElements');return false;">Clone</button>