1

フォームに最大 10 個のフィールドを動的に 10 個挿入したいと思います。

<form action="" method="post">
    ...
    <div id="dynamicInput">Entry 1
        <br>
        <input type="text" name="myInputs[]">
    </div>
    <input type="button" value="Add another text input" onClick="addInput('dynamicInput');">
     ...
    <input type="submit" class="btn btn-primary" />
 </form>

JS コード:

 var counter = 1;
 var limit = 10;

 function addInput(divName) {
     if (counter == limit) {
         alert("You have reached the limit of adding " + counter + " inputs");
     } else {
         var newdiv = document.createElement('div');
         newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
         document.getElementById(divName).appendChild(newdiv);
         counter++;
     }

 }

フォームで送信をクリックした後 (post メソッドを使用)、PHP ページのこのフィールドに値を挿入したいと思いますか?

たとえば、上記の JS コードを使用して 3 つの値を動的に挿入したので、php ページに次のような配列を取得したいと考えています。

Array(
    [0] => value1, [1] => value2, [2] => value3
)
4

2 に答える 2

1

あなたの初期フォーム:

<div id="dynamicInput">Entry 1
    <br><input type="text" name="myInputs[]">
</div>

そしてあなたのJavaScript：

var newdiv = document.createElement('div');

newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";

document.getElementById(divName).appendChild(newdiv);

この動的生成フィールドにname='myInputs[]'> myInputsという名前を付けます

したがって、フォーム データを PHP コードに戻すと、これを $_POST 配列で受け取ります。

$_POST['myInputs'][0] = data in the first field
$_POST['myInputs'][1] = data in the second field
$_POST['myInputs'][2] = data in the third field
...
$_POST['myInputs'][9] = data in the tenth field
于 2013-08-29T09:50:35.020 に答える
0

JavaScriptのやり方がわかりませんが、jqueryを使えば簡単に実現できます

サイトにスクリプト jquery.js を追加してください

HTML

<div id="dynamicInput">Entry 1
     <input type="text" name="myInputs[]" class="myInputs" />
     <input type="button" class="add_input" value="Add another text input" />
</div>

jQuery

$(document).ready(function(){
    var limit = 10;
    $(".add_input").on('click', function(){
        if( $(".myInputs").length == limit ){
            alert("You have reached the limit of adding " + limit + " inputs");
            return false;
        }
        $(".myInputs:last").after("<br>Entry "+ ( $(".myInputs").length + 1 )+" <input type='text' name='myInputs[]'  class='myInputs' />");
    });
});

JSFiddleで例を確認することもできます

于 2013-08-29T09:52:34.563 に答える