• HOME > 
  • JavaScript > 
  • JSでセレクト値が変更されたらフォームを送信を実行する方法【...

JSでセレクト値が変更されたらフォームを送信を実行する方法【onchangeとsubmit】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像

本記事は執筆時点(2024年07月02日)の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。

広告
広告

セレクトボックスの切り替えと同時にフォームを送信

ユーザーがセレクトボックスの値を変更したタイミングでフォームの送信を実行するという処理を実装する機会があったので、その方法を備忘録として残しておきます。

完成イメージは以下の通りです。

セレクト値が変更されたらフォームを送信する動き

この方法だと送信ボタンが不要なため、ユーザーはボタンを押す手間が無くなりますし、UIデザインにおいてもボタンのスペースを省略できるという利点があります。

ソート(並び順)の切換などフォームの入力項目がセレクト一つのみというシチュエーションであれば、この機能を実装しておいた方がユーザビリティが高まります。

以下に先ほどのサンプルのソースコードを記載していきます(不具合がない保証はできませんのでご容赦ください)。

onchange属性とsubmit(this.form)

HTMLに「onchange属性」を記述することでセレクトボックスの切り替えをきっかけにJSの処理を呼び出せます。

ここで呼び出すのが、JavaScriptの「submit()」メソッドです。

submit()メソッドはJavaScript側でフォームの送信を実行できるメソッドです。「this.form」というように指定すればセレクトボックスの親要素であるフォームの送信が実行されます。

onchangeでフォームを送信する書き方

冒頭の例のHTMLは以下のようになります。プルダウンを操作すると選択された値が「res.php」へと送信されます。

HTML

<form method="POST" action="res.php">
    <select name="color" onchange="submit(this.form)">
        <option value="red">レッド</option>
        <option value="blue">ブルー</option>
        <option value="black">ブラック</option>
        <option value="white">ホワイト</option>
    </select>
</form>

プレビュー

セレクトのフォーム

記事の本題からは逸れますが、POSTされた値を受け取る「res.php」の中身も載せておきます。

「$_POST['color']」でセレクト値を取得・表示しています。

PHP

<table>
    <tr>
        <th>結果</th>
        <td id="result"><?php echo htmlspecialchars($_POST['color'],ENT_QUOTES,'UTF-8'); ?></td>
    </tr>
</table>

プレビュー

POSTされた値の取得

まとめ

以上が、JSでセレクト値が変更されたらフォームを送信を実行する方法です。

Webアプリケーションなどでは役立つ場面も多いと思いますので是非活用してみてください。

HTMLのselectタグについてはこちらのページにまとめています。

広告
広告

関連する記事

サムネイル

JSでビデオやピクチャが現在どのソース要素を表示しているか取……

2024年11月07日
表示中のsource要素のファイルパスをJSで取得したい picture要素(video)要素とsource要素を使って画像(動画)を表示させている時に、Jav […]
サムネイル

JSで入力値が英数字や半角かどうか即時文字チェックする【ma……

2024年10月02日
JavaScriptのmatch()は、正規表現を使って対象の文字列の中に一致するものがあるか検索できるメソッドです。このページではテキストボックスに入力された文字が数字や半角かどうかチェックする機能をmatchメソッドを使って実装する方法ついてご紹介します。
サムネイル

JSでHTMLのデータ属性を取得・更新する方法【datase……

2024年10月02日
JavaScriptのdatasetで要素のdata属性を操作する JavaScriptのdatasetは、HTML要素に設定されたデータ属性(data-*** […]
サムネイル

JavaScriptでラジオボタンの値(value)を取得す……

2024年10月02日
JSでラジオボタンの値を取得・操作する JavaScriptによるラジオボタンの操作(値の取得やチェックの切り替え)の方法を備忘録として残しておきます。 JSで […]
サムネイル

JSで大文字から小文字(小文字から大文字)へ変換する方法

2024年10月02日
JavaScriptで大文字と小文字を変換する JavaScriptを使った文字検索フォームを作るにあたり、大文字小文字どちらで入力されても良いよう、変換処理を […]
サムネイル

JSのclassList.toggleでクラスの付け外しを行……

2024年09月04日
classList.toggleとは? まず「classList」とは要素のクラス属性の情報を参照するプロパティで、「classList.add()」や「cla […]
サムネイル

JSで要素が特定のクラスを持つか調べる【classList.……

2024年09月04日
JSで要素が特定のクラスを持つか調べるには? JavaScriptで要素が特定のクラスを持つか調べるには「classList.contains」を使います。 「 […]