JavaScriptでwindow.locationによるページ遷移が出来ない。

Question

JS超絶初心者です。ボタンをクリックすると画面遷移を行うというコードを作りたいのですが、うまくいきません。

以下をtest.htmlとします。

<form>
    <input type="text" id="word" placeholder="キーワードを入力">
    <input type="submit" value="検索" size="31" maxlength="255" id="search" onclick="redirect()">
</form>

<script type="text/javascript">
    function redirect() {
        window.location = 'https://example.com';
    }
</script>

私の想定では検索ボタンをクリックするとexample.comに飛ばしたいのですが、ボタンを押すとURLに?がつくのみです(例: example.com/test.html?)

これは文法の誤りなのでしょうか。あるいはどのような知識が欠けているのでしょうか。お知恵をお貸し頂きたく存じます。

Answer 1

クリックにより redirect() は呼ばれて example.com への遷移が予約されるのですが、その直後に <input type=submit> のデフォルト動作により、<form> の送信が予約され example.com への遷移がキャンセルされます。フォームの送信先の action 属性がないため送信先は自身のURLで、パラメータが1つもないので ? だけ付きます。

ボタンを <input type="button"> にするなどでフォーム送信をやめればよいでしょう。

Comments

[decatail]

コメントありがとうございます。貴殿の指摘の通りに書き換えると想定した動作となりました。

Answer 2

ボタンを押すとURLに?がつくのみです(例: example.com/test.html?)

<input type="submit">は、標準でフォームを送信する動作を行います（example.com/test.html?に遷移します）。

その動作が余計なのであれば、<input type="button">を使うなどの措置が必要です。

Comments

[decatail]

コメントありがとうございます。貴殿の指摘の通りに書き換えると想定した動作となりました。