如何在表单复制后显示空值

Question

我有这段代码javascript来复制表单，如果我填写表单并点击按钮“添加更多”的问题，表单将被复制相同的值，我刚刚填写了他们的第一种形式。 如何解决它和复制后得到空字段？

的Javascript：

$(document).ready(function() { 
    var id = 1; 
    // get item 
    var item = $("#addparts"); 
    var before = $('#div_button'); 
    // initalize event click 

    $('#addMore').on('click', function() { 
     // clone addparts 
     var clone = item.clone(true); 
     // remove id 
     clone.attr('id', ''); 
     // add class duplicate 
     clone.attr('class', 'duplicate'); 
     // insert duplicate before button div 
     before.before(clone); 
    }); 
}); 

HTML：

<form action="" method="post" id="sign-up_area" role="form"> 
    <div class="row" id="addparts"> 
     <div class="col-md-6"> 
      <div class="form-group"> 
       <select class="form-control input-medium" name="name[]"> 
        <option value="">select disabled>Select Parts</option> 
        <option value="a">A</option> 
        <option value="b">B</option> 
        <option value="c">C</option> 
       </select> 
      </div> 
     </div> 
     <div class="col-md-6"> 
      <div class="form-group"> 
       <label class="control-label">Quantity</label> 
       <input type="text" name="email[]" id="partsquantity"> 
      </div> 
     </div> 
    </div> 
    <div class="row" id="div_button"> 
     <input type="button" name="addmore" value="Add More" id="addMore"> 
    </div> 

    <!-- Button --> 
    <p> 
     <input type="submit" name="send" class="btn btn-primary"> 
    </p>  
</form> 

Answer 1

你需要清空输入的值在你的克隆这样

$(document).ready(function() { 
 
    var id = 1; 
 

 
    // get item 
 

 
    var item = $("#addparts"); 
 

 
    var before = $('#div_button'); 
 

 
    // initalize event click 
 

 
    $('#addMore').on('click', function() { 
 
    // clone addparts 
 
    var clone = item.clone(true); 
 
    // remove id 
 
    clone.attr('id', ''); 
 
    // add class duplicate 
 
    clone.attr('class', 'duplicate'); 
 
    
 
    clone.find('input').val(""); // empty input value! 
 
    
 
    // insert duplicate before button div 
 
    before.before(clone); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<form action="" method="post" id="sign-up_area" role="form"> 
 
    <div class="row" id="addparts"> 
 
    <div class="col-md-6"> 
 
     <div class="form-group"> 
 
     <select class="form-control input-medium" name="name[]"> 
 
      <option value="">select disabled>Select Parts</option> 
 
      <option value="a">A</option> 
 
      <option value="b">B</option> 
 
      <option value="c">C</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <div class="form-group"> 
 
     <label class="control-label">Quantity</label> 
 
     <input type="text" name="email[]" id="partsquantity"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row" id="div_button"> 
 
    <input type="button" name="addmore" value="Add More" id="addMore"> 
 
    </div> 
 

 
    <!-- Button --> 
 
    <p> 
 
    <input type="submit" name="send" class="btn btn-primary"> 
 
    </p> 
 

 
</form>

Answer 2

你可以清除表单你追加后：

$('#addMore').on('click', function() { 

    var clone = item.clone(); // no need for true here 

    clone.removeAttr('id'); // if you don't want an id attr on the form 

    clone.addClass('duplicate'); 

    clone[0].reset(); // js method to clear form 

    before.before(clone); 
});