フォームで検索した際に不要なクエリパラメータを削除したいです。

実現したいこと

検索フォームで検索を行った際に送信される不要なクエリパラメータを削除したいです。
例えば本の検索をしたときに
?title=python&author=&category=educationを
?title=python&category=educationに変更したいです。

丸一日費やしてわからなかったので、どなたかご教授いただければ幸いです。

前提

Djangoのtemplate form を利用しています。
また、クエリパラメータは入力フォームから値を読み込み自分で作成できています。

発生している問題・エラーメッセージ

JavaScriptでformのactionを変更してもform側が生成したクエリパラメータ(不要なパラメータがついているもの)になってしまいます。

該当のソースコード

JavaScript

1// フォーム要素を取得2const form_worldsearch = document.getElementById('form-search');3 4// submitイベントにイベントリスナーを追加5form_worldsearch.addEventListener('submit', (event)=>{6 // デフォルトのフォーム送信を防ぐ7 event.preventDefault();8 9 // ここで queryParam を生成または取得するロジックを追加10 let category = document.getElementById('form-search-category').value;11 let platform = document.getElementById('form-search-platform').value;12 let max_capacity = document.getElementById('form-search-max_capacity').value;13 let min_capacity = document.getElementById('form-search-min_capacity').value;14 let keyword = document.getElementById('form-search-keyword').value;15 16 let queryParam = "?p=1";17 if (category !== "") {18 queryParam += "&category=" + category;19 }20 if (platform !== "") {21 queryParam += "&platform=" + platform;22 }23 if (min_capacity !== "") {24 queryParam += "&min_capacity=" + min_capacity;25 }26 if (max_capacity !== "") {27 queryParam += "&max_capacity=" + max_capacity;28 }29 if (keyword !== "") {30 queryParam += "&keyword=" + keyword;31 }32 33 alert("これはactionに設定する前のparamです:" + form_worldsearch.action);34 35 // action属性を設定36 alert(location.pathname);37 if (location.pathname === "/") {38 form_worldsearch.action = "search/" + queryParam;39 console.log("/")40 } else if (location.pathname === "/search/") {41 form_worldsearch.action = queryParam;42 console.log("/search/")43 }44 45 alert("こっちが設定後:" + form_worldsearch.action);46 form_worldsearch.submit()47});

html

1<form action="search/" method="get" id="form-search" onsubmit="createQueryParam()">2 <div class="row mb-3">3 <div class="col md-6">4 <select name="category" class="form-control" id="form-search-category">5 <option value="" selected="">---カテゴリーを選択---</option>6 <option value="Education">Education</option>7 <option value="Game">Game</option>8 <option value="Scenery">Scenery</option>9 </select>10 </div>11 <div class="col md-6">12 <select name="platform" class="form-control" id="form-search-platform">13 <option value="" selected="">---プラットフォームを選択---</option>14 <option value="PC">PCのみ</option>15 <option value="Cross">両対応</option>16 <option value="Phone">スマホのみ</option>17 </select>18 </div>19 </div>20 <div class="row mb-3">21 <div class="col md-3">22 <input type="number" name="min_capacity" class="form-control" id="form-search-min_capacity">23 </div>24 <div class="col md-3">25 <p><span></span></p>26 </div>27 <div class="col md-3">28 <input type="number" name="max_capacity" class="form-control" id="form-search-max_capacity">29 </div>30 <div class="col md-3">31 <p></p>32 </div>33 </div>34 <div class="row mb-3">35 <div class="col-md-12">36 <input type="text" name="keyword" class="form-control" id="form-search-keyword">37 </div>38 </div>39 <input type="submit" value="送信" class="btn-primary w-100">40</form>

試したこと

JavaScriptのコード内でqueryParamが正しく生成されているか、正しくformactionに設定できているかを検証し、正しいことを確認しました。

予想

actionを変更することはできましたが、クエリパラメータを変更することはできないのでしょうか?

コメントを投稿

0 コメント