フォームの状態やGETのURLは保持しつつ、チェックボックスON/OFFした瞬間にSUBMITしたい

解決済

質問者：litton101
質問日時：2021/10/24 01:12
回答数：3件

以下のHTMLで例えば、「アルファベット/昇順」を選んだ後に、「高校生」にチェックしてsubmitすると、URLが以下のようにヘンテコリンになってしまうのですが・・・
http://localhost/index.php?kou=1&s=.%2Findex.php …

こういう風な　→　http://localhost/index.php?kou=1&s=2 「きちんとした」URLにするには、ここをどう書き換えるべきでしょうか？
onChange="location=this.options[this.selectedIndex].value"

加えて、小学生、中学生、高校生、それぞれのチェックボックス（または<label>でくくられた画像）にチェックが入る／外れる瞬間にSUBMITが回る（チェックのON/OFF状況、プルダウン、検索キーは保持される）ようにしたいのですが、ネットで前例みてみると、かなりハードルが高そうで・・・
https://teratail.com/questions/122347

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

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

</head>
<body>
<form method="get" action="./index.php" name="Form1">
<table>
<tr>
<td rowspan="2">
<table border="0">
<tr lang="zh-cn">
<td><label><input type="checkbox" value="1" name="sho"<?php if ($_GET["sho"] == 1) { echo " checked";} ?>>小学生<br><img src="./img1.png"></label></td>
<td><label><input type="checkbox" value="1" name="chu"<?php if ($_GET["chu"] == 1) { echo " checked";} ?>>中学生<br><img src="./img2.png"></label></td>
<td><label><input type="checkbox" value="1" name="kou"<?php if ($_GET["kou"] == 1) { echo " checked";} ?>>高校生<br><img src="./img3.png"></label></td>
</tr>
</table>
</td>
<td>
ソート<br>
<select name="s" onChange="location=this.options[this.selectedIndex].value">
<option value='./index.php?s=0'<?php if ($_GET["s"] == 0) { echo " selected";} ?>>日本語五十音/昇順</option>
<option value='./index.php?s=1'<?php if ($_GET["s"] == 1) { echo " selected";} ?>>日本語五十音/降順</option>
<option value='./index.php?s=2'<?php if ($_GET["s"] == 2) { echo " selected";} ?>>アルファベット/昇順</option>
<option value='./index.php?s=3'<?php if ($_GET["s"] == 3) { echo " selected";} ?>>アルファベット/降順</option>
</select>
</td>
</tr>
<tr>
<td>
キーワード<br>
<input value="<?php echo trim(htmlspecialchars(stripslashes($_GET['q']))); ?>" type="text" name="q">
<input type="submit" value="OK">
</td>
</tr>
</table>
</body></form>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： osamuy
回答日時：2021/10/24 10:12

質問文のHTMLを評価すると、

<option value='./index.php?s=0'>日本語五十音/昇順</option>
――となりますが、ここを素直に「value="2"」とし、selectのonChangeイベントでフォームのsubmit()を呼ぶようにするとか。

ただ、いちいちサーバにリクエストするのは無駄のような。

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。
value="2"としてしまうと、リンク先が
http://localhost/2
になってしまうのですね（T_T)

＞フォームのsubmit()を呼ぶように
<select name="s" onChange="location=this.options[this.selectedIndex].value">

厚かましくて恐縮です、ここを書き換えたらいいでしょうか。
確かにサーバにリクエストした方が他の検索フォームの値をずっと継承できてそっちの方がいいような（大したアクセス数のあるサイトでもないです）

通報する

お礼日時：2021/10/24 10:22

No.3

回答者： osamuy
回答日時：2021/10/24 10:58

｜＞フォームのsubmit()を呼ぶように

｜<select name="s" onChange="location=this.options[this.selectedIndex].value">

こんなのとか：
<select name="s" onChange="javascript:this.form.submit()">
想定では、下記のようなリクエストが飛ぶはず。

(元のURL)/index.php?sho=1&chu=1&kou=1&s=2&q=test+message

※今時のやり方ではないので、No.1(babu_babu_babooさん)みたいに、イベントハンドラーを記述するほうが良いです。

- 0
- 件

通報する

この回答へのお礼

osamuyさん、度々のご教示ありがとうございます。
早速組み込んでみましたが、おかげさまで、動作もばっちりです。
「イベントハンドラー」から勉強が必要ですね。
大変助かりました。ありがとうございます。

通報する

お礼日時：2021/10/24 12:19

No.1

回答者： babu_babu_baboo
回答日時：2021/10/24 09:55

あまり精査していませんが。

checkbox の変化を捕えたいなら
<script>
document.addEventListener ('change', ({target: e})=> (/^(sho|chu|kou)$/.test (e.name) && e.form.submit ()), !1);
</script>

あと、location.href に代入
<select name="s" onChange="location.href=this.options[this.selectedIndex].value">
もしくは
<select name="s" onChange="location.href=this.value">

あと、</body></form>　が逆。

あと、動けばいいと思っているだろうけれど
$_GET["s"] == 0 は、
$_GET["s"] == "0" のように文字列として比較する

あと、短く書いてごめん。

- 0
- 件

通報する

この回答へのお礼

早速ありがとうございます。checkboxの方は組み込んだらすごい快適に動作しました。まさにこういうことがしたかったです。ありがとうございました。

＞あと、location.href に代入
こちらもありがとうございます。恐縮です、改善できませんでした・・・また、

＞あと、</body></form>　が逆。
＞$_GET["s"] == "0" のように文字列として比較する

これらのきめ細かいアドバイスもありがとうございます。修正いたしました。

大変助かりました、ありがとうございます。

通報する

お礼日時：2021/10/24 10:18

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！