こんにちは、ryohei（@ityryohei）です！
フォーム要素を取得する方法のご紹介になります。フォーム要素を取得して、テキストフィールドやチェックボックス、ラジオボタンといったよく使用する要素にアクセスする方法もご紹介しています。
本記事の内容
- フォームを取得する
- フォームが持つ要素にアクセスする
では、解説していきます。
フォームを取得する
フォームが持つすべての要素をまとめて取得します。同一ソース内にあるすべてのフォーム要素を取得することができます。
例えば、下記のように複数のフォーム要素が記述されたソースがあるとします。
<form name="contactForm" method="post" action="#"> ～省略～ </form> <form name="entryForm" method="post" action="#"> ～省略～ </form>
下記のスクリプトを実行すると、contactFormとentryFormの両方を取得することができます。
let formElements = document.forms;
どちらかだけを取得したい場合は、indexで指定することができます。
indexでフォームを指定する場合は、formsの後に[]を追記してindexを指定します。上記の例の場合、indexに0を指定すると、ソース内の一番上にあるcontactFormを取得することができます。
let formElements = document.forms[0];
nameで指定する場合は、formsの後にnameを指定します。
let formElements = document.forms.contactForm;
フォームが持つ要素にアクセスする
フォームをまるごと取得した後、フォームが持つ子要素にアクセスします。例として、下記のフォームを使用します。
<form name="contactForm" method="post" action="#">
<p>Text</p>
<input type="text" name="text" value="Test">
<p>Radio</p>
<input type="radio" name="radio" value="radio1">
<input type="radio" name="radio" value="radio2">
<input type="radio" name="radio" value="radio3">
<p>Checkbox</p>
<input type="checkbox" name="checkbox" value="checkbox1">
<input type="checkbox" name="checkbox" value="checkbox2">
<p>Select</p>
<select name="select">
<option value="select1">select1</option>
<option value="select2">select2</option>
<option value="select3">select3</option>
</select>
<p>Textarea</p>
<textarea name="textarea">Test</textarea>
</form>
上記のフォームをformsで取得します。下記ではnameで取得するフォームを指定しています。
let formElements = document.forms.contactForm;
では早速、取得したフォームが持つ要素にアクセスして、テキストフィールドやチェックボックスの値の設定や取得をしてみましょう。
テキストフィールドの値を設定・取得する
取得したフォーム要素が持つインプット（text）要素にnameを指定してアクセスし、値を設定・取得します。
HTML
<input type="text" name="text" value="Test">
設定
formElements.text.value = 'Test';
取得
console.log('Text: ', formElements.text.value); //結果 Text: Test
ラジオボタンの値を設定・取得する
取得したフォーム要素が持つインプット（radio）要素にnameを指定してアクセスし、値を設定・取得します。
HTML
<input type="radio" name="radio" value="radio1"> <input type="radio" name="radio" value="radio2"> <input type="radio" name="radio" value="radio3">
設定
formElements.radio.value = 'radio1';
取得
console.log('Radio: ', formElements.radio.value); //結果 Radio: radio1
チェックボックスの値を設定・取得する
取得したフォーム要素が持つcheckbox要素にnameを指定してアクセスし、値を設定・取得します。checkboxは複数選択することができるため、チェック済みの要素のみを取得しています。
HTML
<input type="checkbox" name="checkbox" value="checkbox1"> <input type="checkbox" name="checkbox" value="checkbox2">
設定
formElements.checkbox[1].checked = true;
取得
Array.prototype.forEach.call(formElements.checkbox, function (checkbox) {
if(checkbox.checked === true){
console.log('Checkbox: ', checkbox.value);
}
});
セレクトボックスの値を設定・取得する
取得したフォーム要素が持つselect要素にnameを指定してアクセスし、値を設定・取得します。
HTML
<select name="select"> <option value="select1">select1</option> <option value="select2">select2</option> <option value="select3">select3</option> </select>
設定
formElements.select.value = 'select1';
取得
console.log('Select: ', formElements.select.value); //結果 Select: radio1
テキストエリアの値を設定・取得する
取得したフォーム要素が持つtextarea要素にnameを指定してアクセスし、値を設定・取得します。
HTML
<textarea name="textarea">Test</textarea>
設定
formElements.textarea.value = 'Test';
取得
console.log('Textarea: ', formElements.textarea.value); //結果 Textarea: Test
まとめ
以上、JavaScriptでフォーム要素の値を設定・取得する方法のご紹介でした！
JavaScriptを体系的に学びたい方
下記の参考書がおすすめです。私も勉強を始めた際に購入しました。入門書として必要な基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。
