PHP/jQuery - 使用 GET onChange 提交表单复选框值答案

【问题标题】：PHP/jQuery - Submit a form checkbox values using GET onChangePHP/jQuery - 使用 GET onChange 提交表单复选框值
【发布时间】：2017-03-21 02:16:20
【问题描述】：

我正在尝试使用GET 方法从表单提交复选框值（类别名称）。我正在使用自定义 PHP 函数为每个类别名称生成一个键（整数）。我的 page.php 文件用于我的 URL www.mywebsite.com/shop

在我的page.php：

<form method="GET" action="" id="sidebar-filter-form">
    <ul class="sidebar-filter-options-list">
        <?php foreach($category_list as $key => $row): ?>
            <li><input type="checkbox" name="category[]" value="<?php category_key($row->category_name, "k");?>"> <?php echo $row->category_name;?></li>
        <?php endforeach; ?>
    </ul>
</form>

在custom.js:

$(function(){
     $('#sidebar-filter-form').on('change', function() {
        this.form.submit();
    }); 
});

我正在尝试检索类别键以在page.php 上对我的产品进行排序：

$category_keys = isset($_GET['category']) ? $_GET['category'] : null;

我想知道为什么我的表单没有重新加载我的页面并更改我的 URL 以将我的密钥检索为 www.mywebsite.com/shop?category[]=43&category[]=6&category[]=22 之类的东西（对于 Unicode [ 和 ] 可能是 %5B 和 %5D )

【问题讨论】：

您确定“更改”事件会触发吗？你确定this.form选择表格吗？
我敢建议你以另一种方式做得更好。为什么不为所有复选框使用一个类，并使用 jQuery 做一个“每个”，它返回一个带有所选输入的数组？
@Roamer-1888，我最终想在刷新页面之前添加某种延迟（1-2 秒），以允许用户在提交表单之前选择多个复选框值。我想尽量避免提交按钮。 this.form 可以成功触发更改警报消息，所以我相信它确实选择了表单。
鉴于#sidebar-filter-form 选择表单本身，this.submit() 似乎更合适。建议您使用提交按钮使其工作，然后最终解决自动提交。此外，为了获得更好的用户体验，请考虑将您的应用设为 SPA，并使用非刷新 AJAX 请求。
@Roamer-1888 非常感谢您的反馈，this.submit() 成功了！

标签： php jquery forms get

【解决方案1】：

另一种解决方案是为每个复选框设置一个。试试这个：

<html>
<head>
    <title></title>
</head>
<body>

    <?
    $items = array(
        array('id' => 20, 'name' => 'Tomato'),
        array('id' => 32, 'name' => 'Milk'),
        array('id' => 34, 'name' => 'Sugar')
    );
    ?>
    <ul>    
<?  foreach ( $items as $comboItem ) : ?>
        <li><input data-id="<?=$comboItem['id']?>" type="checkbox" class="pick-me"/><?=$comboItem['name']?></li>
<?  endforeach; ?>  
    </ul>
    <br>
    <button class="get-all">Get all items selected</button>
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
    <script type="text/javascript">
        (function() {
            $('body').on('click','.get-all', function() {
                var items = [];
                $('.pick-me').each(function() {
                    if ( $(this).is(':checked') ) {
                        items.push($(this).attr('data-id'));
                    }
                });
                console.log(items);
            });
        })();
    </script>
</body>
</html>

【讨论】：