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);
});

重复表单后如何显示空值

2 个答案: