Question

我将代码更改为以下内容：

$(document).ready(function () {
            $('#add').on('click', function () {
                var $contacts = $(".contact");
                $("<div/>").append($("<input>", {
                  "type": "text",
                  "name": "contact[" + $contacts.length + "][name]"
                })).insertAfter($contacts.last());
            });
          });   

<div class="contact">
Name: &nbsp; <input type="contact[0][name] type="text">
</div>
<div class="contact">
Name: &nbsp; <input type="contact[1][name] type="text">
</div>
<div class="contact">
Name: &nbsp; <input type="contact[2][name] type="text">
</div>

这样可以让我添加另一行。但是，我需要两方面的帮助：

1）当我添加另一行并点击提交时。 $ _POST数组仅显示前三个值，而不是动态添加的数组。

2）如何在附加的html中添加更多文本？它只显示输入框，而不是前面的“名称：”。

谢谢！

这就是print_r（$ _ POST）返回的内容（我还有其他表单字段）：

 Post:
 Array
  (
[custsubmit] => Submit
[contact] => Array
    (
        [0] => Array
            (
                [id] => 
                [name] => name1
            )

        [1] => Array
            (
                [id] => 
                [name] => name2
            )

        [2] => Array
            (
                [id] => 
                [name] => name3
            )

    )
)

Answer 1

您可以从使用多维数组开始。

<div class="contact">
  <input type="text" name="contact[0][name]">
  ...
</div>
<div class="contact">
  <input type="text" name="contact[1][name]">
  ...
</div>
...

我已将id容器的<div>更改为类名，因为id属性应该是唯一的。

现在，要添加新行，您可以使用以下内容。

var $contacts = $(".contact");
$("<div/>", {
  "class": "contact",
  "html": $("<input>", {
    "type": "text",
      "name": "contact[" + $contacts.length + "][name]"
  })
}).insertAfter($contacts.last());

这样，你将在PHP中收到一个很好的数组，它将如下所示：

Array
(
    [0] => Array
        (
            [name] => foo
        )
    [1] => Array
        (
            [name] => bar
        )
    ...
)

您可以使用DOM模板I previously answered here来使用更复杂的布局。

.template {
  display: none;
}

<div class="contact template">Name: &nbsp;
  <input type="contact[{{id}}][name]" type="text">
</div>

$(function() {
  var $template = $(".template");
  $('#add').on('click', function () {
    var $contacts = $(".contact").not(".template");
    $template.template({
      id: $contacts.length
    }).insertAfter($contacts.last());
  });
});

You can see it here.

Answer 2

要“正确”执行此操作，您需要某种MVC（模型 - 视图 - 控制器）或类似设计。您应该查看一些客户端框架（例如Angular.js，Backbone等等），这会让生活更轻松。

如果你想没有框架 - 一个（相对）简单的方法是将模板保持为字符串（参见下面的例子）。然后在javascript中保留一个计数器，在添加行时增加它，替换模板变量并将结果字符串用作innerHtml，即：

var contactTemplate = '<input type="text" name="contact{{id}}" id="contact{{id}}" val="{{Name}}">...';
var counter = 1;
var addContact = function(data) {
    counter++;
    var html = contactTemplate.replace(/{{id}}/g, counter).replace(/{{Name}}/g, data.Name);
    var newElement = $('<div>'+html+'</div>');
    $('#container').append(newelement);

}

Answer 3

$(document).ready(function () {
  $('#add').on('click', function () {
      var newID = 'contact' + ($('input:text').length + 1 );
      newDiv = '<input type="text" name="' + newID + '" id="' + newID + '" value="' + newID + '" />';
      $('#contact').html( $('#contact').html() + newDiv );
  });
});

其中，HTML是这样的：

<input type='button' id="add" value="Add more" />
<br />
<div id="contact">
  <input type="text" name="contact1" id="contact1" />
  <input type="text" name="contact2" id="contact2" />
  <input type="text" name="contact3" id="contact3" />
</div>

Answer 4

在输入周围有一个div，然后您可以使用jquery append将另一个输入放在列表的末尾。此外，每次创建元素时，您都可以通过调用.children().length获取单个div中的输入数量，并将该数字添加为1。

使用jquery添加/删除div

4 个答案: