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 回答