gpt4 book ai didi

php - 使用 Javascript 和 php 添加动态文本字段

转载 作者:行者123 更新时间:2023-11-28 20:30:36 25 4
gpt4 key购买 nike

字段项目                   字段数量
--------                        -----
--------                        ------
--------                        -----
--------                        ------
添加更多

项目字段和数量由用户手动输入,如果他们需要输入更多项目,他们将单击“添加更多”按钮

我有一个 5 行,每行两列的表格,如上所述。

我想动态添加更多文本字段,单击添加更多按钮,我需要使用 PHP 通过 POST 获取值。

我看过类似的帖子,但他们要么一次只添加一个输入字段,要么添加一堆字段。

我希望通过一次单击即可添加项目和数量字段。

<form id="quick_post" method="post"> 
<table id="input_fields">
<tr>
<td><input class="orderinput" type="text" name="product[]">
</td>
<td><input class="orderquan" type="text" name="quantity[]" size="1" maxlength="3">
</td>
</tr>
<tr>
<td>
//In here i want to add more Input Text product fields
</td>
<td>
//In here i want to add more Input Text Quantity fields
</td>
</tr>
<tr>
<td><input class="more" type="submit" value="Addmore" name="addmore"></td>
</tr>
</table> </form>

最佳答案

Working jsFiddle Demo

  • [!]此解决方案需要 jQuery .

输入 Add More form 外部按钮:

<form id="quick_post" method="post"> 
<table id="input_fields">
<tr>
<td><input class="orderinput" type="text" name="product[]" /></td>
<td><input class="orderquan" type="text" name="quantity[]" size="1" maxlength="3" /></td>
</tr>
</table>
</form>

<input class="more" type="button" value="Addmore" name="addmore" />

并添加 click按钮的处理程序:

$(function () {
$('input.more').on('click', function () {
var $table = $('#input_fields');
var $tr = $table.find('tr').eq(0).clone();
$tr.appendTo($table).find('input').val('');
});
});

注意这个需要 jQuery 。不要忘记检查jsFiddle demo .

[BONUS] 如何在您的项目中包含 jQuery:

放置jQuery文件和 <head> 内的上述函数标签。

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function () {
$('input.more').on('click', function () {
var $table = $('#input_fields');
var $tr = $table.find('tr').eq(0).clone();
$tr.appendTo($table).find('input').val('');
});
});
</script>

关于php - 使用 Javascript 和 php 添加动态文本字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16497083/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com