动态生成的字段增量问题的名称

debugcn 发表于 Dev

用户名

我正在使用Codeigniter，但是我的问题与Codeigniter无关。我在jQuery中遇到了一些问题。

在页面加载时，我正在显示Add more按钮，因此当用户单击时Add more，它将动态显示下拉列表。（注意：第二个下拉列表将从ajax成功显示。因此，现在我仅显示文本以供理解）。

以下是两个下拉菜单。

现在，如果您从下拉菜单中进行选择，它将动态显示输入字段，有些人会这样想

用户只需单击，就可以在下拉字段中添加更多内容Add more。

检查下图

现在我的主要问题是，我增加了输入字段的名称，但没有获得增量值。我得到以下输出

例如

第一个下拉菜单

<select name="pp_fileStatus2" class="form-control multipleselect pp_fileStatus dynamicVal"><option value="" disabled="" selected="">Status</option>//dropdown option</select>

<input type="text" name="reasonDate2" class="form-control datetimepicker" placeholder="Date">

第二个下拉菜单

<select name="pp_fileStatus2" class="form-control multipleselect pp_fileStatus dynamicVal"><option value="" disabled="" selected="">Status</option>//dropdown option</select>
<input type="text" name="reasonDate2" class="form-control datetimepicker" placeholder="Date">

请注意，每次获取name="pp_fileStatus2"每个下拉列表和name="reasonDate2"每个输入字段时，都在这里。

$(document).ready(function() {
  var maxField = 10; //Input fields increment limitation
  var x = 1; //Initial field counter is 1
  var count = 2;
  var numberIncr = 1; // used to increment the name for the inputs
  var addrm = '';

  $.ajax({
    type: "POST",
    async: false,
    url: "/access_control/getRMname",
    //data: {},
    dataType: 'json',

    success: function(response) {
      addrm += '<select name="addrm' + numberIncr + '" class="form-control multipleselect dynamicVal"><option value="" selected disabled>Select</option>';
      $.each(response, function(key, data) {
        addrm += '<option value="' + data.rmid + '">' + data.rmfirstname + ' ' + data.rmlastname + '</option>';
        //rm_details.push(addrm);
      });
      addrm += '</select>';
    }
  });


  //Once add button is clicked
  $(document).on('click', '#clicktoadd', function() {
    //Check maximum number of input fields
    if (x < maxField) {
      x++; //Increment field counter
      $(".medication_info").append('<select name="pp_fileStatus' + numberIncr + '" class="form-control multipleselect pp_fileStatus dynamicVal"><option value="" disabled selected>Status</option><option value="1">Open</option><option value="2">Close</option><option value="3">Pending</option></select><p>One more dropdown. It will come from ajax</p>' + addrm);
    }
    count++;

  });
  $(document).on('change', '.pp_fileStatus', function(event) {


    if (($(this).val() == '1') || ($(this).val() == '3')) {
      $(".medication_info").append('<div class="addbankField input-wrapper padding0"><div class="form-group"> <input type="text" name="reasonDate' + numberIncr + '"  class="form-control datetimepicker" placeholder="Date"></div></div><div class="addbankField input-wrapper"><div class="form-group"> <input type="text" name="reasonAmt' + numberIncr + '"  class="form-control commnumber" placeholder="amt"></div></div><input type="hidden" name="remark' + numberIncr + '"  class="form-control" placeholder="Remark">');
    } else {
      $(".medication_info").append('<div class="addbankField input-wrapper lbpflex padding0"><div class="form-group"> <input type="text" name="reasonDate' + numberIncr + '"  class="form-control datetimepicker" placeholder="Date"></div></div><div class="addbankField input-wrapper"><div class="form-group"> <input type="text" name="remark' + numberIncr + '"  class="form-control" placeholder="Remark"></div></div><input type="hidden" name="reasonAmt' + numberIncr + '" class="form-control" placeholder="amt">');
    }
  });

  numberIncr++;

});

<div id="clicktoadd"><a href="javascript:void(0);" class="btn btn-bg">Add More</a></div>
<div class="row">
  <div class="medication_info">
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

龙魂

您需要在.click回调内部增加值，因为您正在.click事件内部生成表单名称。

numberIncr触发点击时增加。还要numberIncr++在末尾删除脚本。

$(document).ready(function() {
  var maxField = 10; //Input fields increment limitation
  var x = 1; //Initial field counter is 1
  var count = 2;
  var numberIncr = 1; // used to increment the name for the inputs
  var addrm = '';

  $.ajax({
    type: "POST",
    async: false,
    url: "/access_control/getRMname",
    //data: {},
    dataType: 'json',

    success: function(response) {
      addrm += '<select name="addrm' + numberIncr + '" class="form-control multipleselect dynamicVal"><option value="" selected disabled>Select</option>';
      $.each(response, function(key, data) {
        addrm += '<option value="' + data.rmid + '">' + data.rmfirstname + ' ' + data.rmlastname + '</option>';
        //rm_details.push(addrm);
      });
      addrm += '</select>';
    }
  });


  //Once add button is clicked
  $(document).on('click', '#clicktoadd', function() {
    //Check maximum number of input fields
    if (x < maxField) {
      x++; //Increment field counter

      // CHECK: Added this to increment number on click
      numberIncr++;

      $(".medication_info").append('<select name="pp_fileStatus' + numberIncr + '" class="form-control multipleselect pp_fileStatus dynamicVal"><option value="" disabled selected>Status</option><option value="1">Open</option><option value="2">Close</option><option value="3">Pending</option></select><p>One more dropdown. It will come from ajax</p>' + addrm);
    }
    count++;

  });
  $(document).on('change', '.pp_fileStatus', function(event) {


    if (($(this).val() == '1') || ($(this).val() == '3')) {
      $(".medication_info").append('<div class="addbankField input-wrapper padding0"><div class="form-group"> <input type="text" name="reasonDate' + numberIncr + '"  class="form-control datetimepicker" placeholder="Date"></div></div><div class="addbankField input-wrapper"><div class="form-group"> <input type="text" name="reasonAmt' + numberIncr + '"  class="form-control commnumber" placeholder="amt"></div></div><input type="hidden" name="remark' + numberIncr + '"  class="form-control" placeholder="Remark">');
    } else {
      $(".medication_info").append('<div class="addbankField input-wrapper lbpflex padding0"><div class="form-group"> <input type="text" name="reasonDate' + numberIncr + '"  class="form-control datetimepicker" placeholder="Date"></div></div><div class="addbankField input-wrapper"><div class="form-group"> <input type="text" name="remark' + numberIncr + '"  class="form-control" placeholder="Remark"></div></div><input type="hidden" name="reasonAmt' + numberIncr + '" class="form-control" placeholder="amt">');
    }
  });
  
  // CHECK: remove the below numberIncr logic
  // numberIncr++; --> remove this
});

<div id="clicktoadd"><a href="javascript:void(0);" class="btn btn-bg">Add More</a></div>
<div class="row">
  <div class="medication_info">
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。