Question

我有一个from来添加与用户的关系，当用户点击添加按钮时我正在使用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对于所有表单元素都是相同的，因此我无法序列化（）并将其发送到ajax。

是否有一个乳清来添加这些字段，为什么每个字段都有唯一的ID或区别？

提前致谢最大

Answer 1

你也不应该在同一页面上拥有相同ID的元素，因为这会引起很多麻烦......更不用说没有通过W3C验证了。

现在，如果要使用相同的名称，则应将name =“textfield”替换为name =“textfield []”。

当它被发送到PHP时，数据将采用数组的形式，您可以这样读取：

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

如果您无法控制数据发送方，那么您可以为每个ID添加一些内容以使其唯一...在这种情况下，我在每个ID属性的末尾添加一个自动递增的数字：< / p>

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选择器。 I.E：$（'。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);
    });
}

这应该可以解决您的冲突并允许您成功发布。

Jquery动态表单元素

1 个答案: