且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

添加具有动态字段名称的新字段将字段名称设置为相同的名称

更新时间:2021-08-29 22:54:28

这基本上就是您如何做到的。

This is basically how you do it.

var rowObject = null;

function addRow(lineNumber) {
  if (rowObject != null) {
    var newRowObject = rowObject.clone();
    var label = "Label " + lineNumber;
    var inputName = 'fields[dependents][new' + lineNumber + '][fields][firstName]';

    var myLabel = newRowObject.find('label');
    myLabel.text(label);

    var myInput = newRowObject.find('input.firstName.dependentfield');
    myInput.val('');
    myInput.attr('name', inputName);

    $('div.dependent-row').append(newRowObject);
  }
}

$(function() {
  rowObject = $('div.dependent-row > div.row').clone();

  $('#add-dependent-btn').click(function() {
    var totalRow = $('div.dependent-row > div.row').length;
    addRow(totalRow + 1);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add-dependent-btn">
  Add row
</button>
<div class="dependent-row">
  <div class="row" style="border:1px solid #ccc; padding: 5px; margin: 10px 0;">
    <label>First Name</label>
    <input type="text" value="" class="firstName dependentfield">
  </div>
</div>