2017-03-21 40 views
1

我试图使用GET方法从表单中提交复选框值(类别名称)。我使用自定义PHP函数为每个类别名称生成一个键(整数)。我page.php文件用于我的网址​​PHP/jQuery - 使用GET onChange提交表单复选框值

在我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 []

+0

你确定'change'事件触发吗?你确定'this.form'选择了表单吗? –

+0

我敢推荐你用另一种方式做得更好。为什么不为所有的复选框使用类,并用jQuery做一个“each”,它返回一个包含所选输入的数组? –

+0

@ Roamer-1888,我最终希望在刷新页面之前添加某种延迟(1-2秒),以便用户在提交表单之前选择多个复选框值。我想尽量避免提交按钮。 'this.form'可以成功触发更改提示信息,所以我相信它确实会选择表单。 – LaGuille

回答

-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>