jQuery動態表單元素

Question

我有一個從添加到用戶的關系，當用戶單擊添加按鈕時，我正在使用jquery添加相對的新行。 我通過使用名為addRowIntoTab（）的jQuery函數來做到這一點

function addRowIntoTab() {
        var url = templates.family_details;
        generic_get(url, function (html) {
           // $('#family_details_row').append(html);
            $('.holder tr:last').after(html);
        });
    }

該代碼正在工作，我能夠填充如下所示的字段列表：

<tr>
<td>
<input type="text" name="textfield" id="textfield" value="Lorem Ipsum"></td>
  <td>
            <select>
                  <option value="daughter">Daughter</option>
                  <option value="Son">Son</option>
                  <option value="wife">Wife</option>
                  <option value="mother">Mother</option>
                  <option value="father">Father</option>
                  <option value="mil">Mil</option>
                  <option value="fil">Fil</option>
                  <option value="brother">Brother</option>
            </select>
  </td>
  <td>
  <input type="text" name="textfield" id="datepicker3" value="21/01/84"></td>
  <td class="last"><input type="text" name="textfield" id="textfield" value="32"></td>
</tr>

我現在面臨的問題是所有表單元素的輸入ID都相同，因此我無法serialize（）並將其發送給ajax。

為什么在每個字段都有唯一的ID或差異時添加乳清？

預先感謝Max

Answer 1

您也永遠不要在同一頁面中使用具有相同ID的元素，因為這可能會引起很多麻煩……更不用說未通過W3C驗證了。

現在，如果要使用相同的名稱，應將name =“ textfield”替換為name =“ textfield []”。

當數據發送到PHP時，數據將采用數組形式，您可以像這樣讀取：

<?php
foreach($_POST['textfield'] as $data) {
    echo $data;
}
?>

如果您無法控制數據發送者，則可以在每個ID中添加一些內容以使其唯一...在這種情況下，我將在每個ID屬性的末尾添加一個自動遞增的數字：

var currentID = 0;
function addRowIntoTab() {
    var url = templates.family_details;
    generic_get(url, function (html) {
       // $('#family_details_row').append(html);
        var data = $(html);
        data.find('#textfield,#datepicker3').each(function() {
          switch($(this).attr('id')) {
            case 'textfield':
              $(this).attr('id','textfield'+currentID);
              break;
            case 'datepicker3':
              $(this).attr('id','datepicker3'+currentID);
              break;
          }
          currentID++;
        }
        $('.holder tr:last').after(data);
    });
}

我的首選選項刪除ID屬性並更改名稱屬性

function addRowIntoTab() {
  var url = templates.family_details;
  generic_get(url, function (html) {
       // $('#family_details_row').append(html);
      var data = $(html);
//Remove ID
      data.find('#textfield,#datepicker3').removeAttr('id');
//Appends brackets "[]" to the end of each input's name
      data.find('input').each(function() { $(this).attr('name',$(this).attr('name')+'[]'); });
    $('.holder tr:last').after(data);
  });
}

我建議您完全刪除ID，除非您正在使用jquery選擇器...。如果是這種情況，則應該使用類選擇器，而不是ID選擇器。 IE：$（'。textfield'）而不是$（'＃textfield'）。

function addRowIntoTab() {
    var url = templates.family_details;
    generic_get(url, function (html) {
       // $('#family_details_row').append(html);
        var data = $(html);
        data.find('#textfield,#datepicker3').each(function() {
          $(this).attr('class',$(this).attr('id')); //creates a class with the ID name
          $(this).removeAttr('id'); //removes the ID attribute
        }
        $('.holder tr:last').after(data);
    });
}

這樣可以解決您的沖突，也可以使您成功發布。