フォームの入力値を受け取る — value と入力チェック

ここまでで「要素を探す」「イベントで動かす」ができるようになりました。今回はその応用で、入力された内容を扱います。

入力値は value で取れる

script.js

const input = document.getElementById("name");
const value = input.value;

textContent ではなく value です。入力欄の中身は、タグの中の文字ではなく「入力された値」として別に持たれているためです。ここを textContent と書いてしまうと、常に空になります。

type="number" の入力欄であっても、value で受け取った時点では文字列です。計算に使うときは Number() で数値に変換してください。忘れると、足し算のつもりが文字の連結になります。

CODE入力した文字を表示するコードを書き換えると、すぐ下で動きます

プレビューの入力欄に文字を入れて、ボタンを押してみてください。空のまま押すと注意が出ます。

スペースだけを入力されたとき、trim() が無いと「入力あり」と判定されてしまいます。前後の空白を取り除くこの1つの命令で防げるので、入力チェックの定番として覚えてください。

ボタンを押さずに、入力しながら結果を出したいときは input イベントを使います。文字数カウンターなどはこの形です。

CODE文字数をリアルタイムで数えるコードを書き換えると、すぐ下で動きます

入力欄に文字を打つと、数がすぐ変わります。上限の 20 を変えると、色が変わる位置も変わります。

これらは value ではなく checked で状態を調べます。true なら選ばれている、false なら選ばれていない、という真偽値です。

チェック状態を調べる

const agree = document.getElementById("agree");

if (!agree.checked) {
  alert("同意が必要です");
}

フォームの送信ボタンを押すと、ページが再読み込みされます。JavaScriptだけで処理したいときは、submit イベントで preventDefault() を呼んで、その動きを止めます。

送信をJavaScriptで扱う

form.addEventListener("submit", function (e) {
  e.preventDefault(); // ページの再読み込みを止める
  // ここで自由に処理する
});

入力必須にしたいだけなら、JavaScriptを書かなくても input に required 属性を付けるだけで、ブラウザが警告を出してくれます。まず標準機能で足りるかを考えると、書くコードが減ります。