更新

Question

我有一个html表单：

<form action="#" method="post" enctype="multipart/form-data" class="form">
<h1 class="form__title">Рекомендуемые круизы</h1>
<div class="wrapper-form" id="form">


    <div class="wrapper-inputs">
        <div class="wrapper-inputs_name">

            <input type="text" id="nameInput" name="nameInput" class="wrapper-inputs__name-input" required>
        </div>
        <div class="wrapper-inputs_name">

            <input type="text" id="portInput"name="portInput"class="wrapper-inputs__name-input" required >
        </div>

        <div class="wrapper-inputs_name">

            <input type="text" id="linkInput" name="linkInput" class="wrapper-inputs__name-input" required>
        </div>
    </div>
</div>

<button type="submit" class="form__btn">Отправить</button>
<button id="new">добавить форму</button>

我是js的新手，不知道如何在不保存值的情况下克隆表单。有人可以帮忙吗更新：这些答案添加的表格超过了1

Answer 1

您可以将clone与id/class一起使用，然后将其附加到所需的位置，或者在克隆后执行任何操作。

var html = $('.form').clone();
$('#appendClone').append(html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" method="post" enctype="multipart/form-data" class="form">
  <h1 class="form__title">Рекомендуемые круизы</h1>
  <div class="wrapper-form" id="form">


    <div class="wrapper-inputs">
      <div class="wrapper-inputs_name">

        <input type="text" id="nameInput" name="nameInput" class="wrapper-inputs__name-input" required>
      </div>
      <div class="wrapper-inputs_name">

        <input type="text" id="portInput" name="portInput" class="wrapper-inputs__name-input" required>
      </div>

      <div class="wrapper-inputs_name">

        <input type="text" id="linkInput" name="linkInput" class="wrapper-inputs__name-input" required>
      </div>
    </div>
  </div>

  <button type="submit" class="form__btn">Отправить</button>
  <button id="new">добавить форму</button>
</form>

<div id='appendClone'></div>

Answer 2

您可以使用以下方法：

$('#new').click(function() {
    var clone = $('.form').clone('#form');
    $('.form').append(clone);
});

Answer 3

更新

此演示将：

只要单击button#new，就克隆第一个表单。
重置克隆中的所有值。
它为克隆中的所有标签分配唯一的ID。

演示

演示中评论的详细信息

// Outer counter
var A = 0;
// Inner counter
var B = 0;
// Original <form>
var first = $('.form:first');
// Click button#new
$('#new').on('click', function(e) {
  // Increment outer
  A++;
  // Clone the first <form> append to <body> reference it
  var dupe = first.clone(true, true).appendTo('body');
  // Reset the clone
  dupe[0].reset();
  /* 
  Find all tags within the clone that has an id
  Get each id and add the current counter values
  */
  dupe.find('[id]').each(function() {
    B++;
    var id = this.id;
    $(this).attr('id', id + A + B);
  });
});

<form action="#" method="post" enctype="multipart/form-data" class="form">
  <h1 class="form__title">Рекомендуемые круизы</h1>
  <div class="wrapper-form">
    <div class="wrapper-inputs">
      <div class="wrapper-inputs_name">
        <input type="text" id="nameInput" name="nameInput" class="wrapper-inputs__name-input" required>
      </div>
      <div class="wrapper-inputs_name">
        <input type="text" id="portInput" name="portInput" class="wrapper-inputs__name-input" required>
      </div>
      <div class="wrapper-inputs_name">
        <input type="text" id="linkInput" name="linkInput" class="wrapper-inputs__name-input" required>
      </div>
    </div>
  </div>
  <button type="submit" class="form__btn">Отправить</button>
  <button id="new" type='button'>добавить форму</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 4

在这里，我举了一个非常简单的示例，说明如何使用jquery处理动态创建的表单。这不是最干净的示例，但是它将帮助您了解有关jquery如何与选择器，动态元素，事件，事件侦听器等一起使用的一些基础知识。

我们首先创建一个简单的HTML页面，该页面将包含两个容器：

<!DOCTYPE html>
<html>
    <head>
        <title>example</title>
    </head>
    <body>
        <div id="container_A">
          <form id="form_A">
            <div id="form_title"></div>
            <div>First name:</div><input id="firstname" type="text" name="firstname" value="">
            <div>Last name:</div><input id="lastname" type="text" name="lastname" value=""><br>
            <input id="form_submit" class="button-submit" type="button" value="Submit!" />
            <br><br>
          </form>
        </div>
        <button id="clone_form" type="button">Clone!</button>
        <br><br>
        <div id="container_B">
        </div>
    </body>
</html>

容器A将保留我们要克隆的主要形式，以后再操作。
容器B将在触发的按钮单击事件中接收所有克隆的表单。
对于表单提交按钮，我将使用类型简单的输入标签按钮。我不想使用类型为Submit的输入，因为那将刷新我的页面，并且每次触发它时，所有表单和数据都会丢失。

现在，我们添加一个带有事件侦听器的简单jquery脚本。

    //I load my functions when document is ready (when page has finished loading)
    $(document).ready(function() {
        //I create a very simple index for my dynamic elements
        var i = 1 //Global index will do just fine
        $("#clone_form").click(function() { //Here I've created a click event listener and pointed it to my html element with id = clone_form
            //When this event fires I clone my primary form using the .clone() function. Then I modify my cloned element properties with a .prop() function
            var cloned_form = $("#form_A").clone().prop("id", "cloned_"+i); //Inside .prop() I specify which attribute I want to change and a value for it
            cloned_form.find("#form_title").text("cloned_title"+i); //Here I  change a few more tags and values...
            cloned_form.find("#form_submit").prop("id", "cloned_submit_"+i);
            cloned_form.appendTo("#container_B"); //When finished, I append my cloned form to my second container
            i++; //I increase my index so I can use it in future cloning events
        });
        //When firing dynamically created elements with events, we can use the .on() function to do that (lookup jquery event delegations)
        //https://learn.jquery.com/events/event-delegation/
        $(document).on('click', 'input.button-submit', function (event) { //Event type, selector and a function will do the trick
            var firstname = $(this).parent().find("#firstname").val(); //To prove we fire these events, let's grab some values from our dynamically created fields and display them
            var lastname = $(this).parent().find("#lastname").val();
            alert("Clicked: " + event.target.id + ", Hello! "+firstname+ " "+lastname); //We display our values with a simple alert box
        });
    });

将所有内容包装在一起，我们获得了一个非常基本的页面，该页面处理克隆表单并在动态创建（克隆）的表单“ submit”事件上显示数据。这是完整的示例：

<!DOCTYPE html>
<html>
    <head>
        <title>example</title>
        <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
        <script>
            //I load my functions when document is ready (when page has finished loading)
            $(document).ready(function() {
                //I create a very simple index for my dynamic elements indexes
                var i = 1 //I didn't want to complicate things, so I made it global
                $("#clone_form").click(function() { //Here I've created a click event listener and pointed it to my html element with id = clone_form (button)
                    //When this event fires I clone my primary form using the .clone() function. I can modify my cloned element properties with a .prop() function
                    var cloned_form = $("#form_A").clone().prop("id", "cloned_"+i); //Inside .prop() I specify which attribute I want to change and a value for it
                    cloned_form.find("#form_title").text("cloned_title"+i); //Lets chnage a few more tags and values
                    cloned_form.find("#form_submit").prop("id", "cloned_submit_"+i);
                    cloned_form.appendTo("#container_B"); //When finished, lets append our cloned form to our second container
                    i++; //I increase my index so I can use it in future cloning events
                });
                //When firing dynamically created elements with events, we can use the .on() function to do that (lookup jquery event delegations)
                //https://learn.jquery.com/events/event-delegation/
                $(document).on('click', 'input.button-submit', function (event) { //Event type, selector and a function will do the trick
                    var firstname = $(this).parent().find("#firstname").val(); //To prove we fire these events, let's grab some values from our dynamically created fields and display them
                    var lastname = $(this).parent().find("#lastname").val();
                    alert("Clicked: " + event.target.id + ", Hello! "+firstname+ " "+lastname); //We display our values with a simple alert box
                });
            });
        </script>
    </head>
    <body>
        <div id="container_A">
          <form id="form_A">
            <div id="form_title"></div>
            <div>First name:</div><input id="firstname" type="text" name="firstname" value="">
            <div>Last name:</div><input id="lastname" type="text" name="lastname" value=""><br>
            <input id="form_submit" class="button-submit" type="button" value="Submit!" />
            <br><br>
          </form>
        </div>
        <button id="clone_form" type="button">Clone!</button>
        <br><br>
        <div id="container_B">
        </div>
    </body>
</html>

就这么简单。

编辑： 如果您只想克隆一次主表单，因为它已经变得更简单了，因为我们已经有了一个全局索引，该索引可以告诉我们到目前为止已经创建了多少个表单。将脚本的克隆部分包装在if语句中，并检查 i （全局索引）是否小于2，如下所示：

$("#clone_form").click(function() { //Here I've created a click event listener and pointed it to my html element with id = clone_form (button)
    //When this event fires I clone my primary form using the .clone() function. I can modify my cloned element properties with a .prop() function
    if (i < 2) {
        var cloned_form = $("#form_A").clone().prop("id", "cloned_"+i); //Inside .prop() I specify which attribute I want to change and a value for it
        cloned_form.find("#form_title").text("cloned_title"+i); //Lets chnage a few more tags and values
        cloned_form.find("#form_submit").prop("id", "cloned_submit_"+i);
        cloned_form.appendTo("#container_B"); //When finished, lets append our cloned form to our second container
        i++; //I increase my index so I can use it in future cloning events
    }
});

现在克隆操作将只执行一次，索引将添加到第一个克隆上，并且当下一个克隆按钮单击事件触发时，克隆将停止。

干杯：）

复制表格而不保存值

4 个答案:

更新

演示