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

时间:2017-03-21 02:16:21

标签: php jquery forms get

我正在尝试使用GET方法从表单提交复选框值(类别名称)。我使用自定义PHP函数为每个类别名称生成一个键(整数)。我的page.php文件用于我的网址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的内容(可能%5B%5D用于Unicode { {1}}和[

1 个答案:

答案 0 :(得分:-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>