How do I clear input fields and select fields after cloning html elements via JavaScript?

Question

I have a form with multiple input fields and select options and I am using cloneNode to clone the entire div.

What happens is when the input fields are set with values and select element is selected the clone also has the same values.

now what I what to do is clear the input fields and reset the select element after the clone.

 var i = 0; function duplicate() { var original = document.getElementById('duplicater' + i); // console.log(original); var clone = original.cloneNode(true); // "deep" clone clone.id = "duplicater" + ++i; original.parentNode.appendChild(clone); } 

 <link href="https://formden.com/static/cdn/bootstrap-iso.css" rel="stylesheet"/> <div class="bootstrap-iso"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-sm-6 col-xs-12"> <form method="post"> <div class="dynamicContainer"> <div id="duplicater0"> <div class="form-group "> <label class="control-label " for="name"> Name </label> <input class="form-control" id="name" name="name" type="text"/> </div> <div class="form-group "> <label class="control-label " for="message"> Message </label> <textarea class="form-control" cols="10" id="message" name="message" rows="2"></textarea> </div> <div class="form-group "> <label class="control-label " for="select"> Select a Choice </label> <select class="select form-control" id="select" name="select"> <option value="First Choice"> First Choice </option> <option value="Second Choice"> Second Choice </option> <option value="Third Choice"> Third Choice </option> </select> </div> </div> </div> <div class="form-group"> <div> <button class="btn btn-primary " name="submit" type="submit"> Submit </button> <a href="javascript:void(0);" id="button" onclick="duplicate()" class="btn btn-default">Add More</a> </div> </div> </form> </div> </div> </div> </div> 

Answer 1

You can clone the element on page load (outside of the function). This will ensure that the cloned element will be from its original states.

Please Note: The attribute id must be unique in a document. If you are going to refer the cloned element with that id then you will only get the first matched element. You can use class instead.

 var i = 0; var original = document.getElementById('duplicater' + i); var clone = original.cloneNode(true); // "deep" clone function duplicate() { clone.id = "duplicater" + ++i; original.parentNode.appendChild(clone); } 

 <link href="https://formden.com/static/cdn/bootstrap-iso.css" rel="stylesheet"/> <div class="bootstrap-iso"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-sm-6 col-xs-12"> <form method="post"> <div class="dynamicContainer"> <div id="duplicater0"> <div class="form-group "> <label class="control-label " for="name"> Name </label> <input class="form-control name" id="name" name="name" type="text"/> </div> <div class="form-group "> <label class="control-label " for="message"> Message </label> <textarea class="form-control message" cols="10" id="message" name="message" rows="2"></textarea> </div> <div class="form-group "> <label class="control-label " for="select"> Select a Choice </label> <select class="select form-control" id="select" name="select"> <option value="First Choice"> First Choice </option> <option value="Second Choice"> Second Choice </option> <option value="Third Choice"> Third Choice </option> </select> </div> </div> </div> <div class="form-group"> <div> <button class="btn btn-primary " name="submit" type="submit"> Submit </button> <a href="javascript:void(0);" id="button" onclick="duplicate()" class="btn btn-default">Add More</a> </div> </div> </form> </div> </div> </div> </div> 

OR: You can clear the value of all the cloned controls:

 var i = 0; function duplicate() { var original = document.getElementById('duplicater' + i); var clone = original.cloneNode(true); // "deep" clone clone.querySelector('.name').value = ''; clone.querySelector('.message').value = ''; clone.querySelector('.select').value = 'First Choice'; clone.id = "duplicater" + ++i; original.parentNode.appendChild(clone); } 

 <link href="https://formden.com/static/cdn/bootstrap-iso.css" rel="stylesheet"/> <div class="bootstrap-iso"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-sm-6 col-xs-12"> <form method="post"> <div class="dynamicContainer"> <div id="duplicater0"> <div class="form-group "> <label class="control-label " for="name"> Name </label> <input class="form-control name" id="name" name="name" type="text"/> </div> <div class="form-group "> <label class="control-label " for="message"> Message </label> <textarea class="form-control message" cols="10" id="message" name="message" rows="2"></textarea> </div> <div class="form-group "> <label class="control-label " for="select"> Select a Choice </label> <select class="select form-control" id="select" name="select"> <option value="First Choice"> First Choice </option> <option value="Second Choice"> Second Choice </option> <option value="Third Choice"> Third Choice </option> </select> </div> </div> </div> <div class="form-group"> <div> <button class="btn btn-primary " name="submit" type="submit"> Submit </button> <a href="javascript:void(0);" id="button" onclick="duplicate()" class="btn btn-default">Add More</a> </div> </div> </form> </div> </div> </div> </div> 

Answer 2

Using Jquery you can do something like this.

 var i = 0; function duplicate() { var original = document.getElementById('duplicater' + i); // console.log(original); var clone = original.cloneNode(true); // "deep" clone clone.id = "duplicater" + ++i; original.parentNode.appendChild(clone); $("#duplicater"+i).find('input,textarea,select').val(''); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <link href="https://formden.com/static/cdn/bootstrap-iso.css" rel="stylesheet"/> <div class="bootstrap-iso"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-sm-6 col-xs-12"> <form method="post"> <div class="dynamicContainer"> <div id="duplicater0"> <div class="form-group "> <label class="control-label " for="name"> Name </label> <input class="form-control" id="name" name="name" type="text"/> </div> <div class="form-group "> <label class="control-label " for="message"> Message </label> <textarea class="form-control" cols="10" id="message" name="message" rows="2"></textarea> </div> <div class="form-group "> <label class="control-label " for="select"> Select a Choice </label> <select class="select form-control" id="select" name="select"> <option value="First Choice"> First Choice </option> <option value="Second Choice"> Second Choice </option> <option value="Third Choice"> Third Choice </option> </select> </div> </div> </div> <div class="form-group"> <div> <button class="btn btn-primary " name="submit" type="submit"> Submit </button> <a href="javascript:void(0);" id="button" onclick="duplicate()" class="btn btn-default">Add More</a> </div> </div> </form> </div> </div> </div> </div> 

Answer 3

I would use jQuery .clone() for this, it also has an option for deep cloning (which might not be necessary here).

 function duplicate(index = 0) { var $orig = $('#duplicater' + index); $orig .clone() .attr('id', 'duplicater' + ++index) .find('[name]') .val('') .end() .appendTo($orig.parent().append('<hr/>')); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://formden.com/static/cdn/bootstrap-iso.css" rel="stylesheet" /> <div class="bootstrap-iso"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-sm-6 col-xs-12"> <form method="post"> <div class="dynamicContainer"> <div id="duplicater0"> <div class="form-group "> <label class="control-label " for="name">Name</label> <input class="form-control" id="name" name="name" type="text" /> </div> <div class="form-group "> <label class="control-label " for="message">Message</label> <textarea class="form-control" cols="10" id="message" name="message" rows="2"></textarea> </div> <div class="form-group "> <label class="control-label " for="select">Select a Choice</label> <select class="select form-control" id="select" name="select"> <option value="First Choice"> First Choice </option> <option value="Second Choice"> Second Choice </option> <option value="Third Choice"> Third Choice </option> </select> </div> </div> </div> <div class="form-group"> <div> <button class="btn btn-primary " name="submit" type="submit">Submit</button> <a href="javascript:void(0);" id="button" onclick="duplicate()" class="btn btn-default">Add More</a> </div> </div> </form> </div> </div> </div> </div>