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"和{ {1}}无效）被认为是type="test"。

在演示中，我删除了：

type='submit'

然后我添加了一个带有有效$("form").on("submit", e => e.preventDefault());的按钮和另一个没有任何内容的按钮，您想知道单击该按钮时会提交哪个？

type='button'

Answer 3

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

缺少的默认值是“提交按钮”状态。

您有以下解决方案

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

您将丢失表单默认行为的替代方法

preventDefault
添加内联属性onsubmit =“ return false;”在表单元素上

带有内联属性的示例

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

jQuery克隆在克隆后提交表单

3 个答案: