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

jQuery form clone, how to stop values from being copied

本文关键字：复制 何阻止 表单 单克隆 jQuery      更新时间：2023-09-26

我是button点击的adding additional表单。

在我的表格中，我有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]);
            }
        });
    }

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

像这个代码：

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]);
        }
    });
}
相关文章：