如何捕获php表单数组中的多个复选框值&使用jquery post提交
如何捕获php表单数组中的多个复选框值&使用jquery post提交
提问于 2016-09-21 18:16:42
我试图在表单中仅拉取复选框的复选框值，并使用数组作为名称。N然后我使用jquery - $.post()，将它提交到action.php文件，但它没有做任何事情，然后刷新页面。任何猜测，我都错了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
$("button#ffruits_submit").click(function () {
var fresorts = $('input[name^="ffruits[]"]').map(function(){return $(this).val();}).get();
$.post("action.php", {fresorts1: fresorts}, function (data) {
});
}); // AJAX-FORM SUBMIT ends here
}); // document-ready ends here
</script>
</head>
<body>
<form name="ffruits_form" id="ffruits_form" method="post" style="padding:0 0 15px 0px;">
<table class="sm" border="1px solid #CCCCCC">
<?php
$sql = "SELECT * FROM `fruitstable` WHERE(fldReadyfordisplay=1 AND fldProductDelete=0) ORDER BY
resort";
$result = mysqli_query($db_conx, $sql);
while($data=mysqli_fetch_assoc($result)){
print('
<tr>
<td style="padding: 15px;">
<input type="checkbox" name="ffruits[]" value="'.$data['id'].'">
</td>
<td style="padding: 15px;">
'.$data['fruit'].'
</td>
</tr>
');
} // while-ends
?>
</table>
<table style="margin-top: 45px;">
<tr>
<td style="padding: 0 15px;text-align: center">
<button class="myButton" id="ffruits_submit">UPDATE</button>
</td>
</tr>
</table>
</form>
</body>
</html>回答 5
Stack Overflow用户
发布于 2016-09-21 18:22:39
替换此代码
<button class="myButton" id="ffruits_submit">UPDATE</button>使用
<button type="button" class="myButton" id="ffruits_submit">UPDATE</button>添加type=“按钮”..its假定提交按钮，这就是为什么刷新这个page.Hope的工作。
Stack Overflow用户
发布于 2016-09-21 18:27:17
<?php
if( isset($_POST['fresorts1']) ) {
print_r($_POST['fresorts1']);
die();
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
$("#ffruits_submit").click(function () {
event.preventDefault();
var fresorts = $('input[name^="ffruits[]"]').map(function () { if ($(this).is(':checked')) { return $(this).val(); } }).get(); //@Noman
$.post(window.location.href, {fresorts1: fresorts}, function (data) {
alert("Response: "+data);
});
});
});
</script>
<input type="checkbox" name="ffruits[]" value="1">
<input type="checkbox" name="ffruits[]" value="2">
<input type="checkbox" name="ffruits[]" value="3">
<button class="myButton" id="ffruits_submit">UPDATE</button>添加event.preventDefault()；并查看控制台日志以了解结果
我已经更新了代码...将此代码放入php文件中并进行测试
Stack Overflow用户
发布于 2016-09-21 18:27:31
问题是因为您将该事件挂接到submit按钮的click事件，并且没有阻止该事件的默认操作。
要解决此问题，请挂钩到窗体的submit事件，并在所提供的事件上调用preventDefault()。试试这个：
$(document).ready(function() {
$("#ffruits_form").submit(function (e) {
e.preventDefault();
var fresorts = $('input[name^="ffruits[]"]').map(function(){
return $(this).val();
}).get();
$.post("action.php", { fresorts1: fresorts }, function(data) {
// do something here or remove the function
});
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39613716
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号