你能提交一个包含文本输入数组的表格吗?

时间:2012-08-22 00:36:11

标签: javascript jquery

我正在动态构建一个页面。此页面需要从输入标签中读取信息,但它是动态的。我应该将东西设置为数组,因为我正在查看

我想保留数据集。

<script>
   function adjustPilots(){
var pilots = $("#numPilots").val();
var info = '<td><table>'+
    '<tr><td>Minumum Collateral</td><td colspan="2"><input type = "text" size = "10" maxLength = "6" /> to <input type = "text" size = "10" maxLength = "6" /></td></tr>'+
    '<tr><td>Reward</td><td colspan="2"><input type = "text" size = "10" maxLength = "6" /> to <input type = "text" size = "10" maxLength = "6" /></td></tr>'+
    '<tr><td>Volume</td><td colspan="2"><input type = "text" size = "10" maxLength = "7" /> to <input type = "text" size = "10" maxLength = "7" /></td></tr>'+
    '<tr><td>Start: </td><td><input type = "text" name = "s" id = "s" class = "s" value autocomplete = "off"></td></tr>'+
    '<tr><td>End: </td><td><input type = "text" name = "e" id = "e" class = "e" value autocomplete = "off"></td></tr>'+
    '</table></td>';


for(var i = 0; i < Number(pilots); i++){
    $("#pilotrow").append(info);
}
}
</script>
<body>
<form>
<table>
<tr><td>Number of Pilots</td><td colspan="2"><input id = "numPilots" type = "text" size="3" maxLength="3" onchange = 'adjustPilots()' /></td></tr>
<tr id = "pilotrow"></tr>

<tr><td><input type = "submit" name = "submit"></td></tr>
</table>
</form>
</body>

我想的一个选项是不使用表单,并使用javascript构建它。然后创建一个JSON对象并使用AJAX将其发送到服务器。这是一种可行的方式吗,还是有更好的主意?

3 个答案:

答案 0 :(得分:3)

至少有两种方法可以做到。

如果没有javascript,你可以使用像

这样的元素数组来表示一个表单
<input type="text" name="input[]"/>
<input type="text" name="input[]"/>
<input type="text" name="input[]"/>
<input type="text" name="input[]"/>

在php中

$inputs = $_POST['input'];
for($inputs as $inp){

}

使用ajax和jquery,您只需序列化您的表单并发布到后端

答案 1 :(得分:2)

您可以使用输入中的name属性来实现此目的。像这样:

<input type="text" name="pilots[]" />

然后,您可能希望跟踪您添加的飞行员数量,以便您可以发送索引数组。像这样:

<input type="text" name="pilots[0][minumumCollatural]" />
<input type="text" name="pilots[0][reward]" />
<input type="text" name="pilots[0][volume]" />

这样,当您将表单提交给服务器时,您的飞行员阵列将类似于:

$pilots = $_POST['pilots'];

// Which looks like
array(
   [0] => array
          (
             [minumumCollatural] => // Some number
             [reward] => // Some number
          )
    [1] => array
          (
             [minumumCollatural] => // Some number
             [reward] => // Some number
          )
)

答案 2 :(得分:0)

尝试利用隐藏的输入标记以您喜欢的任何方式发送数据。例如:

<input type="hidden" name="myinput" id="myinput" />

现在在JS:

$("form").submit(function() {
    $("input").not("#myinput").each(function() {
        $("#myinput").val($("#myinput").val()+$(this).val());
        // you can format anyway you want this is just an example
    });
});

希望这有帮助!