MENU
  1. ホーム
  2. JS
  3. jQuery
  4. フォーム要素の値を取得・設定

フォーム要素の値を取得・設定

jQuery
2024.05.17

valメソッドは、フォーム要素の値を取得または設定するために使用されます。

val
記法

【取得】
$(selector).val();
【設定】
$(selector).val(value);
============================
selector : 対象の要素を指定するセレクター

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>動的なフォーム更新の例</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div class="form-container">
      <form id="dynamic_form">
        <label for="select_option">オプションを選択:</label>
        <select id="select_option" class="form-input">
          <option value="option1">オプション1</option>
          <option value="option2">オプション2</option>
          <option value="option3">オプション3</option>
        </select>
        <label for="dynamic_input">動的入力フィールド:</label>
        <input type="text" id="dynamic_input" class="form-input" />
        <button type="button" id="get_value_button" class="form-button">
          値を取得
        </button>
        <button type="button" id="set_value_button" class="form-button">
          値を設定
        </button>
      </form>
    </div>
    <!-- CDN取得 -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>
// ページの読み込みが完了
$(function () {
  // 選択オプションが変更されたときに実行されるイベント
  $("#select_option").on("change", function () {
    // 選択されたオプションの値を取得
    const selectedOption = $(this).val();

    // 動的入力フィールドの値を変更
    if (selectedOption === "option1") {
      $("#dynamic_input").val("オプション1が選択されました");
    } else if (selectedOption === "option2") {
      $("#dynamic_input").val("オプション2が選択されました");
    } else if (selectedOption === "option3") {
      $("#dynamic_input").val("オプション3が選択されました");
    }
  });

  // 値を取得するボタンのクリックイベント
  $("#get_value_button").on("click", function () {
    // input要素の値を取得
    const inputValue = $("#dynamic_input").val();
    alert("現在の値: " + inputValue);
  });

  // 値を設定するボタンのクリックイベント
  $("#set_value_button").on("click", function () {
    // input要素の値を設定
    $("#dynamic_input").val("新しい値が設定されました");
  });
});
.form-container {
  padding: 20px;
}
.form-input {
  width: 100%;
  max-width: 300px;
  margin: 10px 0;
  padding: 8px;
  display: block;
  box-sizing: border-box;
}
.form-buttons {
  display: flex;
  gap: 10px;
}
.form-button {
  flex: 1;
  padding: 8px;
  cursor: pointer;
  box-sizing: border-box;
}
.form-button:hover {
  background-color: #0056b3;
}
出力結果
jQuery