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>

これは機能し、別の行を追加できます。ただし、次の 2 つの点で助けが必要です。

1) 別の行を追加して送信を押したとき。$_POST 配列は、動的に追加された配列ではなく、最初の 3 つの値のみを表示します。

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

それを「適切に」行うには、ある種のMVC（model-view-controller）または同様の設計が必要です。作業を楽にするクライアント側のフレームワーク（Angular.js、Backboneなど）を調べる必要があります。

フレームワークなしで実行したい場合-（比較的）簡単な方法の1つは、テンプレートを文字列として保持することです（以下の例を参照）。次に、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 に答える
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 に答える
0

入力の周りに単一のdivを設定し、jquery appendを使用して、リストの最後に別の入力を配置できます。また、要素を作成するたびに、.children().lengthtake that number add 1を呼び出すことにより、単一のdivの入力数を取得できます。

于 2013-01-20T16:28:05.283 に答える