带有空输入的jQuery克隆表单

There is a form that I wanted to clone this form every time the ADD button clicked. in this case form appended with previous values for inputs. I want each form work separately. Is there a way to append with empty values for inputs?

每次单击ADD按钮时，我都希望克隆此表单。在这种情况下，表格附加了输入的先前值。我希望每个表单分开工作。有没有办法为输入添加空值？

Here is my snippet :

这是我的片段：

$(document).ready(function() {
  $(".Add").click(function() {
    $(".formi").eq(0).clone().show().insertAfter(".formi:last");
    
  });
  $('.all').on('click', ".cancel", function() {
      $(this).closest('.formi').remove();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
  <form class="formi">
    <input type="text" placeholder="name" value="Sarah" />
    <select name="cars">
      <option value="one">one</option>
      <option value="two">two</option>
    </select>
    <button type="submit">ok</button>
    <span class="cancel">Cancel</span>
  </form>
</div>

4 个解决方案

#1

Yes, just clear them in the cloned copy (see *** line):

是的，只需在克隆副本中清除它们（参见***行）：

$(document).ready(function() {
  $(".Add").click(function() {
    $(".formi")
      .eq(0)
      .clone()
      .find("input").val("").end() // ***
      .show()
      .insertAfter(".formi:last");
    
  });
  $('.all').on('click', ".cancel", function() {
      $(this).closest('.formi').remove();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
  <form class="formi">
    <input type="text" placeholder="name" value="Sarah" />
    <select name="cars">
      <option value="one">one</option>
      <option value="two">two</option>
    </select>
    <button type="submit">ok</button>
    <span class="cancel">Cancel</span>
  </form>
</div>

That specific example uses find to find the input, val to clear its value, and then end to return to the original set of cloned elements so that show and insertAfter are run on that set (instead of the input(s)).

该特定示例使用find来查找输入，使用val来清除其值，然后结束以返回到原始的克隆元素集，以便在该集合（而不是输入）上运行show和insertAfter。

#2

You should first clone the form and then reset the element values as follows. In your case input.

您应该首先克隆表单，然后重置元素值，如下所示。在你的情况下输入。

$(document).ready(function() {
  $(".Add").click(function() {

    var form = $(".formi").eq(0).clone();
    form.find("input[type=text]").val("");
    form.show().insertAfter(".formi:last");


  });
  $('.all').on('click', ".cancel", function() {
    $(this).closest('.formi').remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
  <form class="formi">
    <input type="text" placeholder="name" value="Sarah" />
    <select name="cars">
      <option value="one">one</option>
      <option value="two">two</option>
    </select>
    <button type="submit">ok</button>
    <span class="cancel">Cancel</span>
  </form>
</div>

#3

You could select the last form after the clone then empty the value of the child inputs like :

您可以在克隆后选择最后一个表单，然后清空子输入的值，如：

$(".formi:last input").val('');

$(document).ready(function() {
  $(".Add").click(function() {
    $(".formi").eq(0).clone().show().insertAfter(".formi:last");
    $(".formi:last input").val('');
  });
  $('.all').on('click', ".cancel", function() {
    $(this).closest('.formi').remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
  <form class="formi">
    <input type="text" placeholder="name" value="Sarah" />
    <select name="cars">
      <option value="one">one</option>
      <option value="two">two</option>
    </select>
    <button type="submit">ok</button>
    <span class="cancel">Cancel</span>
  </form>
</div>

#4

I refactored some of your stuff because I had to do it differently in order to make it work the way i wanted it to, but here it is.

我重构了你的一些东西，因为我必须采用不同的方式，以使其按照我想要的方式工作，但现在就是这样。

Here is the JSFiddle

这是JSFiddle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js">           </script>
  <span class="Add">Add+</span>
  <div class="all">
  <div class="formi">
  <input type="text" placeholder="name" value="Sarah" />
  <select name="cars">
    <option value="one">one</option>
    <option value="two">two</option>
  </select>
  <button class="add">ok</button>
  <span class="cancel">Cancel</span>
    </div>
</div>   



function addClickListener(){
    arr = $(".add")
    $(arr[arr.length - 1]).click(function(ev) {
      var clone = ev.currentTarget.parentElement.cloneNode(true);
      $('.all').append(clone);
      addClickListener();

    });
    cancArr = $('.cancel');
    $(cancArr[cancArr.length - 1])
    .on('click', function() {
        $(this).parent().remove();
      });
  }

  addClickListener();