ピュアな JavaScript でフォーム(form)系要素の値を取得, 設定する方法一覧

9 years ago

先日書いた

『サーバーだけに頼る時代は終わった!? クライアントサイドでしっかり Validation する方法 | phiary』

がありがたいことに好評だったので今回も form について書こうと思います.

はじめに

『form 値取得』とかで検索すると

for 文で一通りチェックして...
jQuery で要素を取得して val() で...

ってのがヒットしますよね?

これらの方法でも全然問題ないんですが, ピュアな JavaScript でもわりとスマートに値を取得, 設定することができます.

っということで今回は, フォーム系要素の値をピュアな JavaScript で取得, 設定する方法を一通りまとめてみました. よかったら参考にしてください.

デモ

まずはデモです. 一通り form を並べてそれぞれ設定, 取得を行っています. console に各要素の値が表示されているのがわかるかと思います.

コード

デモのコードです.

HTML

<form name='mainForm'>  
  <div>
    <h3>text</h3>
    <input name='_text' type='text' value='' />
  </div>
  <div>
    <h3>radio</h3>
    <input name='_radio' type='radio' value='hoge' /> hoge
    <input name='_radio' type='radio' value='foo' /> foo
    <input name='_radio' type='radio' value='bar' /> bar
  </div>
  <div>
    <h3>checkbox</h3>
    <input name='_checkA' type='checkbox' /> A
    <input name='_checkB' type='checkbox' /> B
  </div>
  <div>
    <h3>select</h3>
    <select name='_select'>
      <option value='hoge'>hoge</option>
      <option value='foo'>foo</option>
      <option value='bar'>bar</option>
    </select>
  </div>
  <div>
    <h3>textarea</h3>
    <textarea name='_ta'></textarea>
  </div>
  <div>
    <h3>file</h3>
    <input name='_file' type='file' />
  </div>
</form>

JavaScript

window.onload = function() {  
  // TODO: write code
  // console.log("Hello, runstant!");
  var form = document.forms.mainForm;
  // text
  form._text.value = 'Hello, Vanilla JS';
  console.log('text:', form._text.value); //=> text: Hello, Vanilla JS
  // radio
  form._radio.value = 'foo';
  console.log('radio:', form._radio.value); //=> radio: foo

  // checkbox
  form._checkB.checked = true;
  console.log('checkbox:', 'A=' + form._checkA.checked, 'B=' + form._checkB.checked); //=> checkbox: A=false B=true

  // selectbox
  form._select.value = 'bar';
  console.log('select:', form._select.value); //=> select: bar

  // textarea
  form._ta.value = 'コード書きたい';
  console.log('textarea:', form._ta.value); //=> textarea: コード書きたい

  // file
  form._file.onchange = function() {
    var file = form._file.files[0];

    var fr = new FileReader();
    fr.onload = function(res) {
      console.log(fr.result); // ファイルの中身を表示
    };
    fr.readAsText(file);
  };
};

form 要素の取得

form タグに name 属性をつけると documents.forms にプロパティとして追加されます.
これを利用することで query を使わずに要素にアクセスすることができます.

HTML

<form name='mainForm'> ~ </form>

JavaScript

var form = document.forms.mainForm;

この form 経由で各要素にアクセスしていきます.

テキスト

最も定番な form 系要素ですね.

HTML

name 属性を付けることで form 経由でアクセスすることができるようになります.

<input name='_text' type='text' value='' />

JavaScript - Setter

value プロパティに値を入れることで反映されます.

form._text.value = 'Hello, Vanilla JS';

JavaScript - Getter

同じく value プロパティで取得できます.

console.log('text:', form._text.value); //=> text: Hello, Vanilla JS

ラジオボタン

HTML

同じ名前を指定しておくことで排他的に1つだけ選択できるようになります.

<input name='_radio' type='radio' value='hoge' /> hoge  
<input name='_radio' type='radio' value='foo' /> foo  
<input name='_radio' type='radio' value='bar' /> bar

JavaScript - Setter

よく for 文で回して各要素から checked === true のものを探してっていう tips を見ますが, 実はこれ, form 経由だと簡単に値を取得できます. 同じ名前の <input type='radio' /> があった場合, それらの要素は form に RadioNodeList として登録されます.

これは配列ライクなオブジェクトですが, value というプロパティを持っており value にアクセスするだけでラジオボタンの値を設定, 取得することができます.

form._radio.value = 'foo';

JavaScript - Getter

Setter 同じく RadioNodeList の value 経由で設定できます.

console.log('radio:', form._radio.value); //=> radio: foo

チェックボックス

HTML

<input name='_checkA' type='checkbox' /> A  
<input name='_checkB' type='checkbox' /> B

JavaScript - Setter

checked プロパティに bool 値を渡すことで設定できます.

form._checkB.checked = true;

JavaScript - Getter

console.log('checkbox:', 'A=' + form._checkA.checked, 'B=' + form._checkB.checked); //=> checkbox: A=false B=true

セレクトボックス

HTML

<select name='_select'>  
  <option value='hoge'>hoge</option>
  <option value='foo'>foo</option>
  <option value='bar'>bar</option>
</select>

JavaScript - Setter

form._select.value = 'bar';

JavaScript - Getter

console.log('select:', form._select.value); //=> select: bar

テキストエリア

テキストとほとんど同じですね.

HTML

<textarea name='_ta'></textarea>

JavaScript - Setter

form._ta.value = 'コード書きたい';

JavaScript - Getter

console.log('textarea:', form._ta.value); //=> textarea: コード書きたい

ファイル

テキストとほとんど同じですね.

HTML

<input name='_file' type='file' />

JavaScript - Setter

設定はセキュリティの関係上 JavaScript ではできません.

JavaScript - Getter

選択したファイル情報は file 要素の files に格納されます. FileReader を使うことで選択したファイルの中身にアクセスすることができます.

form._file.onchange = function() {  
  var file = form._file.files[0];

  var fr = new FileReader();
  fr.onload = function(res) {
    console.log(fr.result); // ファイルの中身を表示
  };
  fr.readAsText(file);
};

おわりに

基礎的なことばかりですが, jQuery に頼りがちだったり無理くりやってて知らなかったこともあったのではないでしょうか？ブラウザごとの差分もだいぶなくなり, ピュアな JavaScript でも安心してコードを書ける時代が来つつあります.

課題にぶつかったとき, 安易にライブラリに頼るのではなく一度立ち止まって今の環境でも解決できないか模索してみるのも良いかもしれませんね.