JSでフォームが送信されてしまう

以下のHTMLファイルを書きました。これの検索ボタンを押すと、scriptタグ内のredirectを実行させるようにしたいと考えています。現状だと、フォームが送信されてURLの末尾に?がついた状態になります。これは何が原因でこうなるのでしょうか。

HTML
1<form>
2    <input type="text" id="word" placeholder="キーワードを入力">
3    <input type="button" value="検索" size="31" maxlength="255" onclick="redirect()">
4</form>
5
6<script type="text/javascript">
7    function redirect() {
8        alert("テスト");
9        const textbox = document.getElementById("word");
10        const search = textbox.value;
11        window.location.href = "https://example.com/search/" + search;
12    }
13</script>

よろしくお願い申し上げます。

skys215

2021/12/16 07:14

問題を再現することはできません。開発者ツールで飛ぶURLとかを確認してみましょう。

decatail

2021/12/16 07:19

コメントありがとうございました。私自身再度試してみたのですが、きちんとredirect関数を使用することが出来ました。先程までは全然出来なかったのでなにかの間違いだったのでしょう。大変申し訳ありません。

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

回答1件

ベストアンサー

フォームが送信されてURLの末尾に?がついた状態

inputの中でエンターを押すとsubmitになります
submitイベントを殺して、別処理を呼ぶのが楽かも
なおurlに値を渡すときは最低限エンコード処理が必要です

javasccript
1<form>
2<input type="text" id="word" placeholder="キーワードを入力">
3<input type="button" value="検索" size="31" maxlength="255" onclick="redirect()">
4</form>
5<script>
6document.addEventListener('submit',e=>{
7  e.preventDefault();
8  redirect();
9});
10function redirect() {
11  alert("テスト");
12  const textbox = document.getElementById("word");
13  const search = encodeURIComponent(textbox.value);
14  const href="https://example.com/search/" + search;
15  window.location.href = href;
16}
17</script>

投稿2021/12/16 07:15

yambejp

総合スコア116724

decatail

2021/12/16 07:21

なるほど、テキストフォームでエンターを押すと確かに、URL末尾に?がついて帰ってきました。一方で検索ボタンをクリックするときちんと動作しました。これは盲点でした。ありがとうございます。

decatail

2021/12/16 07:33

エンコード処理についても存じ上げておりませんでした。ありがとうございます。今回は提示頂いたものと、私の用いているもの、どちらを使っても結果は変わりませんでした。少しだけ調べましたが、今回においてはURLに日本語を用いる前提で組んでいるので必要ないのかもしれません。エンコード処理について心得ておきます。