Written by Kasumi

【HTML】selectタグを選択したらformをsubmit(送信)する方法

selectタグで任意のoptionを選択したら、formをsubmitさせたい。

本記事ではこのような悩みを解決します。

実装サンプル

See the Pen
selectタグで選択したらsubmitさせる方法
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

selectタグで任意の項目を選択したら、formがsubmitされaction属性の値に記述されてるURLへ遷移してます。

実装方法は以下の通りです。

onchange属性をselectタグに付与する

<form method="get" action="https://kasumiblog.org/">
  <select name="choice" onchange="submit(this.form)">
    <option value="">選択01</option>
    <option value="">選択02</option>
  </select>
</form>

selectタグにonchange属性を付与します。

onchange属性は要素の内容が変更された際、実行したい処理がある場合に使う属性になります。

値をsubmit(this.form)とします。

submit()メソッドで送信処理を実行。

引数をthis.formとすることで、selectタグのformが参照され処理されます。

以上で実装完了です。

まとめ

selectタグで任意のoptionを選択したら、formをsubmitさせる方法について紹介しました。

以上で解説を終わります。

目次

関連記事

HTMLCSS プログラミング

【簡単】preタグ内テキストが折り返しされない問題をCSSで解決する方法

2022.01.25
2409
HTMLCSS

【sass】@mixinを使って汎用するCSSプロパティを共通化して呼び出す方法

2023.04.23
654
HTMLCSS プログラミング

【簡単CSS】横幅100%コンテンツを幅指定された中央寄せコンテンツの起点に合わせて左揃えにする方法

2022.04.08
1566
HTMLCSS プログラミング

Animate.cssでアニメーション表示を遅延(delay)させる方法

2022.04.29
5239