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

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

1 个答案: