0

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

$(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
            )

    )
)
4

4 回答 4

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 模板来使用更复杂的布局。

.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());
  });
});

你可以在这里看到它。

于 2013-01-20T16:25:02.047 回答
1

要“正确”地做到这一点，您需要某种 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);

}
于 2013-01-20T16:28:01.310 回答
1 
$(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>
于 2013-01-20T16:29:41.297 回答
0

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

于 2013-01-20T16:28:05.283 回答