onChangeイベントを使ってフォームの値が変更されたときに処理を実行する

2019/6/14 プログラミング学習

入力フォームでセレクトボックスなどの項目で値を変更したときに、いちいちsubmitボタンを押さなくても、変更した値にもとづいて処理を実行する方法を紹介します。

入力フォームとJavascript

下記のようにフォームの項目のタグ内にonChangeオプションを設定し、値を変更したときに呼び出すJavascriptの関数を記述します。選択した値を引数として使いたいときは、引数をthis.valueとします。

<select name="search" onChange="myfunc(this.value)">
    <option value="A">ああああああ</option>
    <option value="B">いいいいいい</option>
    <option value="O">ううううううう</option>
</select>

呼び出されるJavascriptの関数は、例えば下記のような感じです。下記は、URLに/?option=選択した値を追加してリダイレクトする関数です。一覧ページの並び順を高い順や安い順にするときに使うようなイメージです。

<script type="text/javascript">
    function myfunc(value) {
      window.location.replace('/?option=' + value);
    }
</script>