JavaScriptも駆使！HTMLとJSPでドロップダウンリストからフォームを自在に送信

2024-04-17

HTMLとJSPでドロップダウンリスト変更時にフォームを送信する方法

必要なもの

HTMLファイル
JSPファイル
サーバサイドスクリプト (サーブレットなど)

手順

HTMLでドロップダウンリストを作成する

<select id="myDropdown" onchange="submitForm()">
  <option value="1">選択1</option>
  <option value="2">選択2</option>
  <option value="3">選択3</option>
</select>

上記の例では、id="myDropdown" のドロップダウンリストを作成しています。 onchange イベントハンドラを使用して、 submitForm() 関数を呼び出すように設定しています。

JavaScript関数を作成する

function submitForm() {
  document.getElementById("myForm").submit();
}

上記の例では、 submitForm() 関数を作成しています。この関数は、 id="myForm" のフォームを自動的に送信します。

JSPページでフォームを作成する

<form id="myForm" action="process.jsp" method="post">
  <input type="hidden" name="selectedValue" id="selectedValue">
  <input type="submit" value="送信">
</form>

上記の例では、 id="myForm" のフォームを作成しています。 action 属性を使用して、送信先のサーバサイドスクリプト (process.jsp) を指定します。 method 属性を使用して、送信方法を post に設定します。

selectedValue という名前の隠し入力フィールドを作成します。このフィールドには、ドロップダウンリストで選択された値が格納されます。

サーバサイドスクリプトで選択された値を処理する

// process.jsp

String selectedValue = request.getParameter("selectedValue");
// 選択された値を使用して処理を行う

上記の例では、 process.jsp サーバサイドスクリプトで、 selectedValue パラメータから選択された値を取得しています。この値を使用して、必要な処理を実行できます。

補足

上記はあくまで基本的な例です。実際の状況に合わせて、コードを調整する必要があります。
Ajaxを使用して、フォームを送信せずにサーバと非同期通信を行うこともできます。
jQueryなどのライブラリを使用すると、コードをより簡単に記述できます。

HTML、JSP、サーブレットを使用したサンプルコード

HTMLファイル (index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ドロップダウンリストサンプル</title>
  <script>
    function submitForm() {
      document.getElementById("myForm").submit();
    }
  </script>
</head>
<body>
  <h1>ドロップダウンリストサンプル</h1>
  <form id="myForm" action="process.jsp" method="post">
    <select id="myDropdown" onchange="submitForm()">
      <option value="1">選択1</option>
      <option value="2">選択2</option>
      <option value="3">選択3</option>
    </select>
    <input type="hidden" name="selectedValue" id="selectedValue">
    <input type="submit" value="送信">
  </form>
</body>
</html>

JSPファイル (process.jsp)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>処理結果</title>
</head>
<body>
  <h1>処理結果</h1>
  <p>選択された値: ${param.selectedValue}</p>
</body>
</html>

サーブレット (ProcessServlet.java)

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/process")
public class ProcessServlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String selectedValue = request.getParameter("selectedValue");
        request.setAttribute("selectedValue", selectedValue);
        request.getRequestDispatcher("process.jsp").forward(request, response);
    }
}

説明

- ドロップダウンリスト (id="myDropdown") を作成します。
- onchange イベントハンドラを使用して、 submitForm() 関数を呼び出すように設定します。
- フォーム (id="myForm") を作成し、送信先 (action="process.jsp")、送信方法 (method="post") を指定します。
- ドロップダウンリストで選択された値を格納する隠し入力フィールド (name="selectedValue", id="selectedValue") を作成します。
- 送信ボタンを作成します。
- doPost メソッドで、送信されたデータ (ドロップダウンリストで選択された値) を取得します。
- 取得した値を request スコープに属性 selectedValue として設定します。
- process.jsp にフォワードします。

実行方法

上記のコードを3つのファイル (index.html, process.jsp, ProcessServlet.java) に保存します。
Webコンテナ (Tomcatなど) を起動します。
Webブラウザで http://localhost:8080/index.html にアクセスします。
ドロップダウンリストから値を選択します。
選択された値が process.jsp に表示されます。

エラー処理やセキュリティ対策などは実装されていません。
データベースへの接続など、より複雑な処理を行う場合は、適切なライブラリやフレームワークを使用する必要があります。

HTMLとJSPでドロップダウンリスト変更時にフォームを送信するその他の方法

jQueryを使用すると、JavaScriptコードをより簡潔に記述できます。

HTML

<select id="myDropdown">
  <option value="1">選択1</option>
  <option value="2">選択2</option>
  <option value="3">選択3</option>
</select>
<form id="myForm" action="process.jsp" method="post">
  <input type="hidden" name="selectedValue" id="selectedValue">
  <input type="submit" value="送信">
</form>

JavaScript

$(document).ready(function() {
  $("#myDropdown").change(function() {
    $("#selectedValue").val($(this).val());
    $("#myForm").submit();
  });
});

<select id="myDropdown">
  <option value="1">選択1</option>
  <option value="2">選択2</option>
  <option value="3">選択3</option>
</select>
<form id="myForm">
  <input type="hidden" name="selectedValue" id="selectedValue">
  <input type="submit" value="送信" disabled>
</form>

$(document).ready(function() {
  $("#myDropdown").change(function() {
    var selectedValue = $(this).val();
    $.ajax({
      url: "process.jsp",
      type: "post",
      data: { selectedValue: selectedValue },
      success: function(data) {
        // 選択された値を処理する
        alert("選択された値: " + selectedValue);
      }
    });
  });
});

変更イベントを直接フォームに処理させる

<select id="myDropdown" onchange="document.getElementById('myForm').submit()">
  <option value="1">選択1</option>
  <option value="2">選択2</option>
  <option value="3">選択3</option>
</select>
<form id="myForm" action="process.jsp" method="post">
  <input type="hidden" name="selectedValue" id="selectedValue">
  <input type="submit" value="送信">
</form>

jQueryを使用する
- jQueryの change() イベントを使用して、ドロップダウンリストが変更されたときに処理を実行します。
- 選択された値を隠し入力フィールドに設定します。
- フォームを submit() メソッドを使用して送信します。
Ajaxを使用する
- Ajaxリクエストを使用して、サーバに選択された値を送信します。
- サーバからレスポンスを受信したら、選択された値を処理します。
変更イベントを直接フォームに処理させる