onclick属性でつけたsubmitでも、jquery.cleanQuery.jsによるqueryのクリアを動かしたい

まず、コードを示します。

index.php

PHP
1<?php
2  $data = array("きりん", "ぞう", "あり", "うま", "やぎ", "ひつじ");
3
4  if(isset($_GET['sort'])){
5    if($_GET['sort'] === 'up'){
6      sort($data);
7      $sort_radio_check = array('checked', '');
8    } elseif ($_GET['sort'] === 'down') {
9      rsort($data);
10      $sort_radio_check = array('', 'checked');
11    }
12  }
13?>
14<!DOCTYPE html>
15<html lang="ja">
16  <head>
17    <meta charset="utf-8">
18    <title>並び替え</title>
19    <link href="css/style.css" rel="stylesheet">
20  </head>
21  <body>
22    <form action="" method="get" name="mainform" id="mainform">
23      <table>
24        <thead>
25        <tr><th>
26          <div id="sortbtn">
27          <input type=radio name="sort" id="up" value="up" onclick="document.mainform.submit();" <?= $sort_radio_check[0]?>>
28          <label for="up">▲</label>
29          <input type=radio name="sort" id="down" value="down" onclick="document.mainform.submit();" <?= $sort_radio_check[1]?>>
30          <label for="down">▼</label>
31        </div>
32          <input type="text" name="search" value="<?php echo isset($_GET['search']) ? $_GET['search'] : '';?>">
33          <input type="submit" value="検索">
34        </th></tr>
35      </thead>
36      <tbody>
37        <?php foreach ($data as $d):?>
38          <tr><td><?php echo $d; ?></td></tr>
39        <?php endforeach?>
40      </tbody>
41      </table>
42    </form>
43    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
44    <script src="js/jquery.cleanQuery.js"></script>
45    <script>
46        $('#mainform').cleanQuery();
47    </script>
48  </body>
49</html>

css/style.css

CSS
1input[type="radio"]{
2  display    : none;
3}
4
5#up:checked ~ label[for="up"] {
6  color: #fff;
7  background : #81C7D4;
8}
9
10#down:checked ~ label[for="down"] {
11  color: #fff;
12  background : #81C7D4;
13}
14
15#sortbtn label{
16  display: inline-block;
17    margin-left: 5px;
18    padding: 2px;
19    border: 2px solid #eee;
20    border-radius: 3px;
21    cursor: pointer;
22}
23
24#sortbtn label:hover{
25  background-color: #A1E7F4;
26}

js/jquery.cleanQuery.js
こちらから引用

JavaScript
1/*
2 * jQuery cleanQuery 2013-03-23
3 * Authored by guimihanui
4 * Licensed under the MIT License (http://www.opensource.org/licenses/mit-license.php)
5 */
6function($) {
7        function cleanQuery(query) {
8                var arr = [];
9                $.each(query.split('&'), function(i, param) {
10                        if (param.split('=')[1]) { arr.push(param); }
11                });
12                return arr.join('&');
13        }
14
15        $.fn.cleanQuery = function() {
16                this.on('submit', function(event) {
17                        event.preventDefault();
18
19                        var query = cleanQuery($(this).serialize());
20                        url = this.action.split('?')[0];
21                        location.href = url + '?' + query;
22                });
23
24                return this;
25        };
26})(jQuery);

index.phpにアクセスすると、動物の名前がテーブルに表示されます。そして、▲を押すと昇順に、▼を押すと降順に名前がソートされるという動作をします。textフィールドも一つあり入力できますが、現状は動作には関係ありません。jquery.cleanQuery.jsというjqueryのプログラムを使って、空のパラメータはqueryに入らないようにしたいと思っています。

submitボタンを押したときには、このcleanQueryが働いて、例えばtextフィールドが空の場合には"search="というqueryは表示されないのですが、onclickでsubmit属性を与えている三角ボタンを押した場合には、例えば、

https://example.com/test/?sort=up&search=

のように、"search="というパラメータが空のqueryが表示されてしまいます。これを表示しないようにするには、jquery.cleanQuery.jsをどのように変更すればいいのでしょうか？

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

submitメソッドはイベントを発生させずにsubmitするんじゃなかったかな。

js
1// document.mainform.submit();
2// ↓
3   $('#mainform').trigger('submit');

そもそもフォームにする意味が無いような気がする。（ロジックだけ使ってlocation.hrefでページを切り替えればよい）

投稿2019/01/12 17:09

kei344

総合スコア69407

HajimeHamada

2019/01/12 23:43

ありがとうございます。上記のtriggerを使う方法で問題なく動作することを確認しました。問題は解決なのですが、後学のため下のコメントについて質問です。これは、昇順・降順の切り替えをformのradioボタンではなく、通常のbuttonなどで実装して、それを押したときにJavaScriptで、 location.href="https://example.com/test/?sort=up" のようにページを切り替えるということでしょうか？