javascript - jQuery 表单克隆，如何阻止值被复制

Question

我是adding additional表格 button单击。

在我的表格中，我有 one drop down 。当user select value from drop down ，我是populating other fields value基于下拉选择。您可以在我的代码中看到，我正在发送 ajax 调用来检索值，然后再将它们设置在输入字段中。

代码

<script>
$(document).ready(function(){
    var index = 0;
    $("#testButton").click(function() {
      $("#jBuyer").clone().appendTo("#jointBuyer"); 
      index++; 
    });
});
</script>

克隆完成后，the form fields along with data copied to next form 。 我不希望它发生，因为这是一个问题？ How can i stop it?

凭借我的一点知识，我可以理解问题是重复的名称或 ID，但不知道如何动态生成它们，然后设置它们的值。

如果您有兴趣了解我的完整代码，请参阅下文。

完整代码

<div id="jointBuyer" class="JointBuyerDive" style="display:none">
    <div id="jBuyer">
        <div id="inner"class="col-lg-6">
            <form id="buyerForm" role="form" method="POST" enctype="multipart/form-data">
            <label>Buyer</label>
              <div class="form-group">
                 <label>Unit No.</label>
                 <select class="form-control" name="junitId" id="junitId" onmousedown="this.value='';" onchange="getUnit(this.value);">
                    <option>Please Select Unit No</option>
                    <?php
                       $sql_query= "select * from tble_units";
                       $run_query =mysqli_query($con, $sql_query);
                        while($row = mysqli_fetch_array($run_query )){
                        $unit_no =$row ['unit_no'];         
                        $unit_ID =$row ['unit_ID'];                                                                         
                       ?>
                    <option value="<?php echo $unit_ID;?>"><?php echo $unit_no;?></option>
                    <?php }?>
                 </select>
              </div>
              <div class="form-group">
                 <label>Type</label>
                 <input type="text" name="unitTypeE" id="unitTypeE" class="form-control" readonly> 
              </div>

              <div class="form-group">
                 <label>No of Car Parking Purchase</label>
                 <input type="text" name="noOfCarParkingE" id="noOfCarParkingE" class="form-control" readonly>          
              </div>
        </div>
    </div>
<div>

Ajax 调用

function getUnit(value) {
        var dataString = 'id=' + value;
        $.ajax({
            type: "POST",
            url: "getUnitData.php",
            data: dataString,
            cache: false,
            success: function(result) {
                var obj = JSON.parse(result);
                $('input[name=unitTypeE]').val(obj[0]);
                $('input[name=noOfCarParkingE]').val(obj[1]);
                $('input[name=floorE]').val(obj[2]);
                $('input[name=unitAreaE]').val(obj[3]);
                $('input[name=commentsE]').val(obj[4]);
            }
        });
    }

Answer 1

您可以在克隆表单后重置表单。

喜欢这段代码:

var clonedForm = $("#buyerForm").clone();
$("#jBuyer").append(clonedForm);
clonedForm[0].reset();

然后你应该为克隆表单设置唯一的ID:

clonedForm.attr("id","uniqueId");

编辑后追加:

然后在 ajax 调用中，您应该使用此代码仅更改一个下拉列表:

首先更改onchange="getUnit(this)"，然后:

function getUnit(obj) {
    var currentForm = obj.parents("form");
    var dataString = 'id=' + obj.value;
    $.ajax({
        type: "POST",
        url: "getUnitData.php",
        data: dataString,
        cache: false,
        success: function(result) {
            var obj = JSON.parse(result);
            currentForm.find('input[name=unitTypeE]').val(obj[0]);
            currentForm.find('input[name=noOfCarParkingE]').val(obj[1]);
            currentForm.find('input[name=floorE]').val(obj[2]);
            currentForm.find('input[name=unitAreaE]').val(obj[3]);
            currentForm.find('input[name=commentsE]').val(obj[4]);
        }
    });
}