Q&A
hyper-drums-ko様
早速試したところできました！希望通りの機能で大変感謝しております。
ありがとうございます！
以前に似たような質問をしました。リンク
確かに入力フォームが空白の場合リクエスト時に省くことができました。
ただ希望としてはPOSTでリクエストをかけたいと思います。リンク先だとどうしてもGETになってしまいます。
form methodをPOSTに指定しても無視されます。
ご存知の方いらっしゃいましたら教えてください。宜しく御願いします。
html
1 2<script> 3 $(function() { 4 $('#FORM').cleanQuery(); 5 }); 6 </script> 7<body> 8<b>半角英数字のみ対応</b> 9<form action="http://52.192.178.185:8280/api/car" method="post" id="FORM" Accept-charset="UTF-8"> 10<br> 11<b>ランキング種別</b><font color="RED">:必須</font><br> 12<select name="kind" required><br> 13<option value="0">車種別</option> 14<option value="1">メーカー別</option> 15<option value="2">ボディタイプ別</option> 16<option value="3">メーカー別</option> 17<option value="4">国産車別</option> 18<option value="5">輸入車別</option> 19</select><br> 20<b>取得ページ位置</b> 21<p><input type="text" value="" name="page" placeholder="例:1～20" pattern="^[0-9]+$" class="keyword"></p> 22<b>取得数</b> 23<p><input type="text"value="" name="size" placeholder="例:0～20" pattern="^[0-9]+$" class="keyword"></p> 24<b>メーカー</b> 25<p><input type="text" value="" name="maker_cd" placeholder="例:101" pattern="^[0-9A-Za-z]+$" class="keyword"></p> 26<b>車種CD</b> 27<p><input type="text" value="" name="body_cd" placeholder="例:10" pattern="^[0-9A-Za-z]+$" class="keyword"></p> 28<b>集計日</b> 29<p><input type="text" name="start_date" placeholder="例:yyyymmdd形式" pattern="^[0-9]+$" class="keyword"></p> 30<b>終了日</b> 31<p><input type="text" name="end_date"placeholder="例:yyyymmdd形式"pattern="^[0-9]+$" class="keyword"></p> 32<b>リクエスト方法</b><br> 33<!--できればここのセレクトボックスでGETかPOST選択できるようにしたいです。--> 34<select id="method_select"> 35<option value="GET" selected>GET</option> 36<option value="POST">POST</option> 37</select> 38<button type="submit" value="送信"> 39</button> 40</form> 41</body> 42</html>
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 */ 6 7(function($) { 8 function cleanQuery(query) { 9 var arr = []; 10 $.each(query.split('&'), function(i, param) { 11 if (param.split('=')[1]) { arr.push(param); } 12 }); 13 return arr.join('&'); 14 } 15 16 $.fn.cleanQuery = function() { 17 this.on('submit', function(event) { 18 event.preventDefault(); 19 20 var query = cleanQuery($(this).serialize()); 21 location.href = this.action + '?' + query; 22 }); 23 24 return this; 25 }; 26})(jQuery);
回答3件
0
純粋なJavaScript使った方がよさそうに思えました。
ご参考までに。
1.formに名前を付ける。
html
1<form action="http://52.192.178.185:8280/api/car" method="post" name="submithoge" id="FORM" Accept-charset="UTF-8">
2.JavaScript側でsubmitする
すでにHTMLでの<form>タグのActionがPOSTになっているのでsubmitで良いかと思います。
JavaScript
1function submit_func() { 2 // フォームオブジェクトに対して値をサブミットを実行する 3 submithoge.submit(); 4}
参考ページ:form/submitメモ
投稿2015/12/24 04:24
総合スコア206
0
ベストアンサー
こんな感じでどうでしょう？
HTML
1<script> 2 $(function() { 3 $('#FORM').on('submit', function(e) { 4 e.preventDefault(); 5 var $form = $(this).clone(); 6 $form.prop('method', $('#method_select').val()); 7 $(this).find(':input').each(function() { 8 var $element = $(this); 9 if ($element.val() == '') { 10 $form.find('*[name="' + $element.prop('name') + '"]').remove(); 11 } 12 }); 13 $form.submit(); 14 }); 15 }); 16</script>
画面下部の「リクエスト方法」に応じた形式で送信します。
投稿2015/12/24 04:33
総合スコア736
hyper-drums-ko様
ベストアンサー後の返答になり誠に恐縮ですが、他のJSファイルと重複してしまってなのかプルダウンリストで選択した項目がリセットされ初期値になってしまいます。
恐らく「jQuery cleanQuery」という空白の場合パラメーターを送らないJSファイルとID要素が重複してしまったからでないかと思います。何か解決策をご存知ないでしょうか？
ない場合ですとトピを建てようと思います。
0
こちらを参考にされたのでしょうか。
http://b.0218.jp/20141007135727.html
window.location.href を使用しているので当然ですね。。。
よろしければ HTML と JavaScript を見せていただけますか。
投稿2015/12/24 03:43
総合スコア736
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/12/24 05:12