javascript - jQuery clone form with empty input - Stack Overflow

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?

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=".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>

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?

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./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>

• javascript
• jquery
• html
• css

Share Follow edited Dec 21, 2016 at 12:10 Kevin Kloet 1,08611 gold badge1111 silver badges2121 bronze badges asked Dec 21, 2016 at 12:07 user6915755user6915755

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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./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)).

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./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>

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./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>

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

<script src="https://ajax.googleapis./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();