2017-03-21 11 views
1

GETメソッドを使用してフォームからチェックボックスの値(カテゴリ名)を送信しようとしています。私はカスタムPHP関数を使用して各カテゴリ名のキー(整数)を生成しています。私page.phpファイルは私のpage.phpで私のURL​​PHP/jQuery - GET onChangeを使用してフォームチェックボックスの値を送信

のために使用されます。

<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では:私が使用してpage.phpに私のプロダクトをソートするために、カテゴリキーをretriveしようとしています

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

$category_keys = isset($_GET['category']) ? $_GET['category'] : null; 
私は私のフォームは私のページをリロードし、(おそらく %5BとUnicode []ため %5Dで) www.mywebsite.com/shop?category[]=43&category[]=6&category[]=22のようなものに自分のキーを取得するために私のURLを変更していない理由を知っていただきたいと思います

+0

「変更」イベントが起きていますか? 'this.form'がフォームを選択してもよろしいですか? –

+0

私はあなたが別のやり方でうまくいくことをお勧めします。なぜすべてのチェックボックスにクラスを使用せず、選択された入力を持つ配列を返す「each」というjQueryを使うのはなぜですか? –

+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> 
関連する問題