如何使用 jquery 增加動態添加的輸入 onclick 的索引

Question

我有一個表單，我有幾個字段想要動態添加，我想更改每個動態添加的輸入的索引這是我的 html 代碼。

<form action="" method="POST" enctype="multipart/form-data">
  <div id="hobies">
    <input type="text" name="hobies[]">
  </div>
  <br/>
  <button id="add_more">Add More</button>
  <br/>
  <input type="submit" value="submit" name="submit">
</form>
<div id="tmp_hobies">
  <input type="text" class="hobies" name="hobies[]">
</div>

這是我的腳本代碼。

$('#add_more').click(function(e) {
  e.preventDefault();
    $('#hobies').append($("#tmp_hobies").html());
});

這是我想添加愛好 [1]、愛好 [2] 等等...

Answer 1

要將所有這些字段發送到服務器， name="hobies[]" ，即，您可以保持代碼不變。 瀏覽器應該處理！

萬一您確實需要執行此操作，一種選擇是：

$('#add_more').click(function(e) {
  e.preventDefault();
  const $o = $('#hobies input').last();
  const name = `hobies[${$o.index() + 1}]`;
  $o.clone().prop('name', name).val('').appendTo('#hobies');
});

請注意，它不使用#tmp_hobies元素的內容。

Answer 2

var 行數 = 1;

 var count=0;
 function addMoreRows(form) {
 rowCount ++;
 count =++count;
 var recRow = '<p id="rowCount'+rowCount+'"><tr><td><input path="users['+count+'].id" id="users'+count+'.id" name="users['+count+'].id" type="" size="17%"  maxlength="120" /></td><td><input path="users['+count+'].name" id="users'+count+'.name" name="users['+count+'].name" type="text"  maxlength="120" style="margin: 4px 5px 0 5px;"/></td><td><input path="users['+count+'].email" id="users'+count+'.email" name="users['+count+'].email" type="text" maxlength="120" style="margin: 4px 10px 0 0px;"/></td></tr> <a href="javascript:void(0);" onclick="removeRow('+rowCount+');">Delete</a></p>';
 $('#addedRows').append(recRow);
 }