Question

我正在尝试使用数组作为名称来拉取表单中仅选中复选框的复选框值。 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>

Answer 1

替换此代码

<button class="myButton" id="ffruits_submit">UPDATE</button>

与

<button type="button" class="myButton" id="ffruits_submit">UPDATE</button>

添加type =＆＃34;按钮＆＃34; ..它假定提交按钮，这样可以刷新页面。希望这项工作。

Answer 2

 <?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文件并测试

Answer 3

问题是因为您将事件挂钩到提交按钮的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
        });
    });
});

Answer 4

	 
$(document).ready(function () {
	$("button#ffruits_submit").click(function (e) {
		e.preventDefault();
		var fresorts = $('input[name^="ffruits[]"]').map(function () {
			if ($(this).is(':checked')) {
				return $(this).val();
			}
		}).get();
		console.log(fresorts);
		
	}); // AJAX-FORM SUBMIT ends here
}); // document-ready ends here

<!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>

</head>

<body>
<form name="ffruits_form" id="ffruits_form" method="post">
	<table class="sm" border="1px solid #CCCCCC">
		<tr>
			<td style="padding: 15px;">
				<input data-label="checkbox 1" type="checkbox" name="ffruits[]" value="1">
				<input data-label="checkbox 2" type="checkbox" name="ffruits[]" value="2">
				<input data-label="checkbox 3" type="checkbox" name="ffruits[]" value="3">
				<input data-label="checkbox 4" type="checkbox" name="ffruits[]" value="4">
				<input data-label="checkbox 5" type="checkbox" name="ffruits[]" value="5">
			</td>
		</tr>
	</table>
	<table style="margin-top: 45px;">
		<tr>
           <td><span id="respose"></span></td>
			<td style="padding: 0 15px;text-align: center">
				<button type="button" class="myButton" id="ffruits_submit">UPDATE</button>
			</td>
		</tr>
	</table>
</form>
</body>
</html>

您需要更改代码

点击按钮时使用event.preventDefault();
使用.map设置if ($(this).is(':checked')) {条件

检查以下JS：

$(document).ready(function () {
    $("button#ffruits_submit").click(function (event) { // clicked event pass by function to prevent redirection of your form submition
        event.preventDefault();
        var fresorts = $('input[name^="ffruits[]"]').map(function () {
            if ($(this).is(':checked')) {
                return $(this).val();
            }
        }).get();
        console.log(fresorts);
        $.post("action.php", {fresorts1: fresorts}, function (data) {

        });
    }); // AJAX-FORM SUBMIT ends here
}); // document-ready ends here

Answer 5

在form.php

中使用此行

<div>
            <input type="checkbox" name="ac_type[]" value="Checkbox1"/> Checkbox1
            <input type="checkbox" name="ac_type[]" value="Checkbox2"/> Checkbox2
          </div>

并在action.php

<?php $checkboxtype = $_POST['ac_type'];
          $check_type="";  
          foreach($checkboxtype as $checkbox)  
          {  
            $check_type .= $checkbox.",";  
          }?>

我希望这会有所帮助。

如何在数组和数组中捕获php形成多个复选框值提交jquery帖子

5 个答案: