javascript - 对克隆的表单执行操作

Question

我创建了一个包含两个下拉列表的表单，当用户从第一个列表中选择一个项目时，第二个列表的数据会自动更新。我使用jquery来做到这一点，它工作得很好，除了当我复制表单时，复制表单的下拉列表N°1不再更新下拉列表N°2所以我想知道我怎么能对克隆的表单执行相同的操作（通过选择在另一个中输入的一个来更新下拉列表）并将所有克隆表单的条目保存在数据库中。

亲切！

这是我使用的代码

<form id="myForm">
 <div id="clonedSection1" class="clonedSection">    
  <select class="form-control" name="productName[]" id="productName" >
   <option value="0" selected>Selectionner le produit</option>
   <option value="copy">Copie</option>
   <option value="scan">Scan</option>
  </select>
  <select class="form-control" name="productPrice[]" id="quant" disabled>
   <option value="pu" selected>P.U</option>
  </select>
</div>
<div>
 <input type="button" id="btnAdd" value="add another name" />
 <input type="button" id="btnDel" value="remove name" />
</div>

<!-- script that allows you to modify the data in a drop-down list when an item is selected in another-->
<script type="text/javascript">
 $("#productName").change(function () {
  var val = $(this).val();
  if (val == "copy") {
  $("#quant").html("<option value='25'> 25$ </option>");
 } else if (val == "scan") {
  $("#quant").html("<option value='50'> 10$ </option>");
 }
});
</script>

<!-- script that clones the form-->
<script type="text/javascript">
 $(document).ready(function() {
 $("#btnAdd").click(function() {
  var num = $(".clonedSection").length;
  var newNum  = new Number(num + 1);

  var newSection = $("#clonedSection" + num).clone().attr("id", "clonedSection" + newNum);
  newSection.children(":nth-child(5)").children(":first").attr("id", "productName" + newNum).attr("name", "productName[]" + newNum);
  newSection.children(":nth-child(6)").children(":first").attr("id", "quant" + newNum).attr("name", "productPrice[]" + newNum);

  $(".clonedSection").last().append(newSection)
  $("#btnDel").attr("disabled","");

  });
  $("#btnDel").click(function() {
  var num = $(".clonedSection").length; // how many "duplicatable" input fields we currently have
        $("#clonedSection" + num).remove();     // remove the last element

        // enable the "add" button
        $("#btnAdd").attr("disabled","");

        // if only one element remains, disable the "remove" button
        if (num-1 == 1)
            $("#btnDel").attr("disabled","disabled");
    });

    $("#btnDel").attr("disabled","disabled");
  });
</script>

score 1 · Accepted Answer

我编写了简单而干净的代码。

请按照以下步骤操作：

不要使用 ID 所以你需要使用类名而不是 id 因为ID应该是唯一的。
如果动态添加元素，则需要使用.on()而不是.change()方法。
.cloned-section部分应与Add Button.
每次都clone element用.cloned-section>div:nth-child(1)这种nth-child方法挑。
.product-name通过 onchange类在输入字段中设置值。
.btn-remove通过 onclick类删除元素。
append()当通过方法附加克隆元素时，需要设置select+值，以便您可以在我的 jQuesy 代码中看到并看到注释文本。inputnull

我希望下面的代码片段对你有很大帮助。

$(document).on('click', '#btnAdd', function(){
  // Make clone by clone() method and append REMOVE button for remove section
  var cloneElement = $('.cloned-section>div:nth-child(1)').clone();
      cloneElement.append('<button type="button" class="btn btn-danger btn-remove"><span aria-hidden="true">&times;</span></button>');
  // Select value set Zero (0)
  cloneElement.find('select').val(0);
  // Input value set empty
  cloneElement.find('input').val('');
  $('.cloned-section').append(cloneElement);
});

// On change product name then set price on price field
$(document).on('change', '.product-name', function(){
  var getValue = $(this).val();
  $(this).parent().find('.product-price').val(getValue+'%');
});

// Click on Remove button and delete product/price section
$(document).on('click', '.btn-remove', function(){
  $(this).parent().remove();
});

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<div class="container my-2">
  <div class="row">
    <div class="col-sm-12">
      <form class="form-inline" id="myForm">
        <div class="cloned-section w-100">
          <div class="w-100 mt-2">    
            <select class="form-control w-50 product-name" name="productName[]">
              <option value="0" selected>Select Product</option>
              <option value="25">Copy</option>
              <option value="50">Scan</option>
              <option value="75">Paste</option>
              <option value="100">Cut</option>
           </select>
           <input class="form-control w-25 product-price text-center" name="productPrice[]" readonly>
         </div>
       </div>
      <div class="w-100 mt-2">
        <button type="button" id="btnAdd" class="btn btn-success">Add Another Name</button>
      </div>
    </form>
   </div>
  </div>
</div>

score 0 · Accepted Answer

您的代码存在一些小问题：

对要克隆的 DOM 元素使用 classname 而不是 id。这是因为 id 是唯一的。不同的元素不应共享相同的 id。如果你克隆一个带有 id 的元素，就会有元素共享相同的 id。
使用.on()而不是.change()动态生成的元素。
我不确定您是否真的想在最后一个“clonedSection”中插入一个新的“clonedSection”。如果您不打算这样做并且想在最后一个“cloneSection”之后插入新的“clonedSection”，请使用 newSection.insertAfter($(".clonedSection").last());
的值.attr("disabled", <>)应该是trueor false，但不是""anddisabled

$(document).ready(function() {

	//use on() instead of change() for elements that generate dynamically
  $("body").on("change", ".productName", function() { 
    var _this = $(this);
    var quant = _this.closest(".clonedSection").find(".quant");
    var val = _this.val();
    if (val == "copy") {
      quant.html("<option value='25'> 25$ </option>");
    } else if (val == "scan") {
      quant.html("<option value='50'> 10$ </option>");
    }
  });
  
  $("#btnAdd").click(function() {
    var num = $(".clonedSection").length;
    var newNum = num + 1;

    var newSection = $("#clonedSection" + num).clone().attr("id", "clonedSection" + newNum);
    newSection.children(":nth-child(5)").children(":first").attr("id", "productName" + newNum).attr("name", "productName[]" + newNum);
    newSection.children(":nth-child(6)").children(":first").attr("id", "quant" + newNum).attr("name", "productPrice[]" + newNum);

		newSection.insertAfter($(".clonedSection").last()); //insert right after the last clonedsection
    $("#btnDel").attr("disabled", false); //disabled should be either true/false but not ""

  });
  $("#btnDel").click(function() {
    var num = $(".clonedSection").length;
    $("#clonedSection" + num).remove();
    $("#btnAdd").attr("disabled", false);
    if (num - 1 == 1)
      $("#btnDel").attr("disabled", true);
  });

  $("#btnDel").attr("disabled", true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<!--If you are going to clone DOM element, please use classname instead of id-->
 <div id="clonedSection1" class="clonedSection">   
  <select class="form-control productName" name="productName[]">
   <option value="0" selected>Selectionner le produit</option>
   <option value="copy">Copie</option>
   <option value="scan">Scan</option>
  </select>
  <select class="form-control quant" name="productPrice[]">
   <option value="pu" selected>P.U</option>
  </select>
</div>
<div>
 <input type="button" id="btnAdd" value="add another name" />
 <input type="button" id="btnDel" value="remove name" />
</div>

希望这有帮助：D

javascript - 对克隆的表单执行操作

2 回答 2

Related

Reference