用其复选框包装一些输入并发送到数据库
Wrap some inputs with its check-box and send to database
重点是"如何选择与选中的复选框在同一行中的所有输入元素?
MARK NAME QUANTITY PRICE
--------------------------------------------------------------------------------------
[] inputForName1 inputForQuantity1 inputForPrice1
--------------------------------------------------------------------------------------
[] inputForName2 inputForQuantity2 inputForPrice2
--------------------------------------------------------------------------------------
[] inputForName3 inputForQuantity3 inputForPrice3
--------------------------------------------------------------------------------------
[] inputForName4 inputForQuantity4 inputForPrice4
--------------------------------------------------------------------------------------
[] inputForName5 inputForQuantity5 inputForPrice5
--------------------------------------------------------------------------------------
[SUBMIT]
(此处"[]"是一个复选框)
选中某些列表后,将选择其行(输入)上的所有列表。
然后,如何提交复选框,例如,如果选中了两个复选框,则两个复选框中的所有输入都将发送到数据库中的表中。
请告诉我如何做到这一点。提前感谢您的帮助。
对于这个 HTML,这并不难:
<table>
<thead>
<tr>
<th>Mark</th>
<th>Name</th>
<th>Qty</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="id[1]" /></td>
<td><input type="text" name="name[1]" /></td>
<td><input type="text" name="quantity[1]" size="3" /></td>
<td><input type="text" name="price[1]" size="3" /></td>
</tr>
<tr>
<td><input type="checkbox" name="id[2]" /></td>
<td><input type="text" name="name[2]" /></td>
<td><input type="text" name="quantity[2]" size="3" /></td>
<td><input type="text" name="price[2]" size="3" /></td>
</tr>
<tr>
<td><input type="checkbox" name="id[3]" /></td>
<td><input type="text" name="name[3]" /></td>
<td><input type="text" name="quantity[3]" size="3" /></td>
<td><input type="text" name="price[3]" size="3" /></td>
</tr>
<tr>
<td colspan="4"><input id="save" type="button" value="Submit" /></td>
</tr>
</tbody>
</table>
<h3>Post data:</h3>
<div class="submit_data">click Submit...</div>
完整的jQuery片段将是:
$('input[name^=id]').on('change', function(e) {
var thisCheckbox = $(this);
var thisRow = thisCheckbox.closest('tr');
if ( thisCheckbox.is(':checked') ) {
thisRow.addClass('row_selected');
} else {
thisRow.removeClass('row_selected');
};
});
$('#save').on('click', function(e) {
e.preventDefault();
var toPost = $('.row_selected input').serialize();
/* Now post and insert into database */
$.post('insert_into_db.php', toPost, function(data) {
alert('Success!');
});
});
查看操作中的代码。
在PHP中,发布的变量是数组:
[id] => Array
(
[1] => on
[3] => on
)
[name] => Array
(
[1] => My name 1
[3] => My name 3
)
[quantity] => Array
(
[1] => 100
[3] => 50
)
[price] => Array
(
[1] => 23.34
[3] => 15.23
)
您可以通过以下方式浏览它们:
foreach( $_POST['id'] as $id=>$on ) {
echo 'ID: ' . $id . '<br />';
echo 'Name: ' . $_POST['name'][$id] . '<br />';
echo 'Qty: ' . $_POST['quantity'][$id] . '<br />';
echo 'Price: ' . $_POST['price'][$id] . '<br />';
echo '<hr />';
};
其中输出:
ID: 1
Name: My name 1
Qty: 100
Price: 23.34
------------------
ID: 3
Name: My name 3
Qty: 50
Price: 15.23
------------------
请注意:在某些设备上,您需要关闭jQuery缓存,通常:
$.ajaxSetup({ cache: false });
或发布特定:
$.ajaxSetup({
type: 'POST',
headers: { "cache-control": "no-cache" }
});
相关文章:
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 如何通过php页面将数据库值检索到jquery自动完成框中
- 使用javascript从数据库中添加表
- 通过CSV文件上载更新数据库表
- 平均值:无法将数据更新到数据库
- 如何使用 Angular JS 将数据保存在数据库中
- Rails-JQueryUIAutcomplete和AJAX不工作,可以't连接到数据库
- 在谷歌地图上绘制位置数据库
- PHP:显示sqlite数据库中的html格式数据,使用tinymce保存
- 将地理编码结果转换为php变量以发布到mysql数据库
- 从数据库中检索字段,而不模拟它们
- javascript:将数据库中的数据插入到html5文本字段中
- 从数据库中获取数据并插入JavaScript变量
- JavaScript,PHP-用JavaScript将多个数据库记录发送到变量或表
- 从MySQL数据库中获取输入数据需要两次页面刷新
- 在cordova android应用程序中连接数据库
- 根据条件检查数据库结果
- Jquery(多读/少读)在从数据库加载整个数据后不起作用
- 使用ASP.NET将谷歌地图添加到项目中,并从数据库中检索位置
- Nodejs:从文件中读取并存储到数据库,限制数据库的最大并发操作