【JavaScript】JSで入力フォームの値を取得しよう

おはようございます。タカヒデです。

本日は、「JavaScriptにおける、『フォームの値の取得』について、『入力BOX』『選択BOX』『チェックBOX』のそれぞれの値の取得方法」を紹介します。

ぜひ本記事を参考にしてください。

入力BOXの値を取得

本記事では、『入力BOX』『選択BOX』『チェックBOX』のそれぞれの値の取得方法を見ていきます。

まずは入力BOXの値を取得する方法から見ていきましょう。

「ユーザーが何かを入力したらそのデータを取得する」という動きですね。

ここでは、「名前を入力するフォームを作成し、送信ボタンを押下することで入力BOXの値を表示」させます。

<form>
  <label for="name">名前入力欄</label>
  <input type="text" id="name" name="name" />
  <input type="button" id="button" value="送信">
</form>
<div id="result"></div>

<form>
  <label for="name">名前入力欄</label>
  <input type="text" id="name" name="name" />
  <input type="button" id="button" value="送信">
</form>
<div id="result"></div>

let nameInput = document.querySelector("#name");
let result = document.querySelector("#result");

document.querySelector("#button").addEventListener("click", function () {
    result.textContent = nameInput.value + "さんですね";
}, false)

let nameInput = document.querySelector("#name");
let result = document.querySelector("#result");

document.querySelector("#button").addEventListener("click", function () {
    result.textContent = nameInput.value + "さんですね";
}, false)

実行するとこんな感じ↓。
名前を入力した結果が、フォームの下にテキストで表示されています。

具体的に行っていることを見ていきましょう。

1. 入力フォームの『name id』を『querySelectorメソッド』で『変数nameInput』に格納
2. 結果を表示させる『result id』を『querySelectorメソッド』で『変数result』に格納
3. 送信ボタンをクリックした際に、『変数nameInput』の値を表示するよう、『addEventListenerメソッド』を利用して記載
   この際、取得した値はvalueプロパティを利用

と、こんな感じ。
実際に入力BOXの値が表示されるか試してみてください。

選択BOXの値を取得

続けて選択BOXの値を取得する方法を見ていきましょう。

基本的に入力BOXの値を取得する方法とやっていることは同様です。
ここでは、「スポーツを選択するフォームを作成し、送信ボタンを押下することで選択BOXの値を表示」させます。

<form>
  <label for="sports">スポーツを選択</label>
  <select id="sports">
    <option value="野球">野球</option>
    <option value="サッカー">サッカー</option>
    <option value="テニス">テニス</option>
  </select>
  <input type="button" id="button" value="送信">
</form>
<div id="result"></div>

<form>
  <label for="sports">スポーツを選択</label>
  <select id="sports">
    <option value="野球">野球</option>
    <option value="サッカー">サッカー</option>
    <option value="テニス">テニス</option>
  </select>
  <input type="button" id="button" value="送信">
</form>
<div id="result"></div>

let sports = document.querySelector("#sports");
let result = document.querySelector("#result");

document.querySelector("#button").addEventListener("click", function () {
    result.textContent = sports.value + "ですね";
}, false);

let sports = document.querySelector("#sports");
let result = document.querySelector("#result");

document.querySelector("#button").addEventListener("click", function () {
    result.textContent = sports.value + "ですね";
}, false);

実行するとこんな感じ↓。
選択BOXから選んだ結果が、フォームの下にテキストで表示されています。

こちらもやっていることを解説していきます。

1. 選択フォームの『sports id』を『querySelectorメソッド』で『変数sports』に格納
2. 結果を表示させる『result id』を『querySelectorメソッド』で『変数result』に格納
3. 送信ボタンをクリックした際に、『変数sports』の値を表示するよう、『addEventListenerメソッド』を利用して記載
   この際、取得した値はvalueプロパティを利用

やっていることは全く同じですね。
こちらも実際に試してみてください。

チェックBOXの値を取得

最期にチェックBOXの値を取得する方法を見ていきましょう。

今回は「for…of文」も組み合わせて実行します。

「興味のある項目をチェックするフォームを作成し、送信ボタンを押下することでコンソールログに値を表示」させます。

<form>
  <p>興味のある項目を選択してください</p>
  <label><input type="checkbox" name="interest" value="旅行">旅行</label>
  <label><input type="checkbox" name="interest" value="食事">食事</label>
  <label><input type="checkbox" name="interest" value="映画">映画</label>
  <input type="button" id="button" value="送信">
</form>

<form>
  <p>興味のある項目を選択してください</p>
  <label><input type="checkbox" name="interest" value="旅行">旅行</label>
  <label><input type="checkbox" name="interest" value="食事">食事</label>
  <label><input type="checkbox" name="interest" value="映画">映画</label>
  <input type="button" id="button" value="送信">
</form>

document.querySelector("#button").addEventListener("click", function () {
    let result = [];
    let interests = document.querySelectorAll('input[name="interest"]')

    for (let interest of interests) {
        if (interest.checked) {
            result.push(interest.value);
        }
    }
    console.log(result);
}, false);

document.querySelector("#button").addEventListener("click", function () {
    let result = [];
    let interests = document.querySelectorAll('input[name="interest"]')

    for (let interest of interests) {
        if (interest.checked) {
            result.push(interest.value);
        }
    }
    console.log(result);
}, false);

実行するとこんな感じ↓。
コンソールに選択した「食事」が表示されていますね。
複数のチェックを選択しても表示することができます。

こちらも解説を見ていきましょう。

1. 送信ボタンをクリックした際の処理として、『addEventListenerメソッド』内に処理を記載
2. チェックした値の配列を格納する変数として『変数result』を作成
3. 『変数interests』を宣言し、『querySelectorAllメソッド』によりチェックBOXの『inputタグのうちname属性がinterestのもの』を取得
4. for…of文で配列の要素を順に処理し、『checkedプロパティ』がtrueの場合に『配列result』に値を追加し最終的にコンソールログに表示

実際にチェックBOXの値が表示できましたか？

まとめ

以上が「JavaScriptにおける『フォームの値の取得』について、『入力BOX』『選択BOX』『チェックBOX』のそれぞれの値の取得方法」でした。

この記事が誰かの参考になれば幸いです。

お疲れさまでした。

タカヒデ

ITを楽しく勉強中

X

通信会社の企画職で働く30代 非エンジニアでありながら半分趣味でITエンジニアリングやプログラミングを学習中 IT初心者が楽しいと思えるように発信することを目指しています ↓Xもやっているのでフォローしてね