初心者による フォームの扱い

概要

クライアントjavascriptにおいて、フォームはエンドユーザからの入力を受け取る代表的な手段である。Webページに必ずあるといってよいものであるため、十分に学習しておきたい。

入力ボックス/選択ボックス

入力ボックス、選択ボックスの入力を受け取る方法はvalueプロパティにアクセスするだけである。

sample.html

<form>
 <label for="name">名前：</label>
 <input id="name" name="name" type="text" size="30" />
 <input id="btn" type="button" value="送信" />
</form>
<div id="result">
</div>

sampl.js

document.addEventListener('DOMContentLoaded', function(){
 document.getElementById('btn').addEventListener('click', function() {
  let name = document.getElementById('name')
  //入力された内容をvalueで取得
  console.log(name.value)
 }, false)
}, false)

入力ボックス類とselectはvalueプロパティによってすべて同じ要領で取り出すことができる。また、これらの要素は設定するときもvalueプロパティに代入することですぐできる。

チェックボックス

チェックボックスの値にアクセスするのは、入力ボックスに比べて複雑です。

sample.html

<form>
 <div>
  <label><input type="checkbox" name="food" value="ラーメン" />ラーメン</label>
  <label><input type="checkbox" name="food" value="餃子" />餃子</label>  
  <label><input type="checkbox" name="food" value="焼肉" />焼肉</label>
  <input id="btn" type="button" value="送信" />
 </div>
</form>

sample.js

document.addEventListener('DOMContentLoaded', function() {
 document.getElementById('btn').addEvenetListener('click', function() {
  let resulr = []
  let foods = document.getElementsByName('food')
  for(let i = 0, len = foods.length; i < len; i++){
   let food = foods.item(i)
   //チェックされているかを調べるには、checkedプロパティを使う
   if(food.checked){
    result.push(food.value)
   }
  }
  //配列を文字列にして出力
  window.alert(result.toString())
 }, false)
}, false)

チェックボックスを使う場合は、

checked : チェックされているかどうか
value : value="" で指定されている値

であることに注意する。
また、チェックボックスは複数とは限らず、オンオフの単一の場合も考えられる。その場合は特別に次のようにする。

sample.js

let onoff = getElementById('onoff')
if(onoff.checked){
 console.log(onoff.value)
}else{
 console.log('チェックされていません')
}

チェックボックスの値をjavascriptで設定する

sample.html

<form>
 <div>
  <label><input type="checkbox" name="food" value="ラーメン" />ラーメン</label>
  <label><input type="checkbox" name="food" value="餃子" />餃子</label>  
  <label><input type="checkbox" name="food" value="焼肉" />焼肉</label>
  <input id="btn" type="button" value="送信" />
 </div>
</form>

sample.js

document.addEventListener('DOMContentLoaded', function() {
 //ここでのvalue引数は配列
 let setCheckValue = function(name, value) {
  let elems = document.getElementsByName(name)

  for(let i = 0, len = elems.length; i < len; i++){
   let elem = elems.item(i)
   if(value.indexOf(elem.value) > -1){
    elem.checked = true
   }
  }
 }

 setCheckValue('food', ['餃子', '焼肉'])
}, false)

ここでは、Array.indexOf(value)メソッドを使っている。これは、配列Arrayの中にvalueと等しいものがあるのかをチェックします。存在しなければ、-1を返すため-1よりも大きいと条件づければよい。

ラジオボタン

ラジオボタンはチェックボタンとほとんど同じ要領であるが、より汎用性を持つように汎用的なコードを別に関数として定義して、それを使うようにする。

sample.html

<form>
 <div>
  <label><input type="checkbox" name="food" value="ラーメン" />ラーメン</label>
  <label><input type="checkbox" name="food" value="餃子" />餃子</label>  
  <label><input type="checkbox" name="food" value="焼肉" />焼肉</label>
  <input id="btn" type="button" value="送信" />
 </div>
</form>

sample.js

document.addEvenetListener('DOMContentLoaded', function() {
 //自作関数を作る
 let getRadioValue = function(name) {
  let result = ''
  let elems = document.getElementsByName(name)

  for(let i = 0, len = elems.length; i < len; i++){
   let elem = elems.item(i)
   if(elem.cheked){
    result = elem.value
    //チェックされているのは一つしかない
    break
   }
  }
 return result
 }
 //自作関数を実行
 document.getElementById('btn').addEventListener('click', function() {
  window.alert(getRadioValue(food))
 }, false)
}, false)

関数を自作することで、汎用性を持たせることができます。

ラジオボタンの値をjavascriptで設定する

sample.js

<form>
 <div>
  <label><input type="checkbox" name="food" value="ラーメン" />ラーメン</label>
  <label><input type="checkbox" name="food" value="餃子" />餃子</label>  
  <label><input type="checkbox" name="food" value="焼肉" />焼肉</label>
  <input id="btn" type="button" value="送信" />
 </div>
</form>

sample.js

documnt.addEventListener('DOMContentLoaded', function() {
 let setRadioValue = function(name, value){
  let elems = gtElementsByName(name)

  for(let i = 0, len = elems.length; i < len; i++){
   let elem = elems.item(i)
   if(elem.value = value){
    elem.check = true
    //見つけ終わったら抜ける
    break
   }
  }
 }

 setRadioValue('food', '餃子')
}, false)

リストボックス

sample.html

<form>
 <div>
  <label for="food">好きな食べ物は？：</label>
  <select id="food" multiple>
   <option value="ラーメン">ラーメン</option>
   <option value="餃子">餃子</option>
   <option value="焼肉">焼肉</option>
  </select>
  <input id="btn" type="button" value="送信" />
 </div>
</form>

sample.js

document.addEventListener('DOMContentLoaded', function() {
 let getListValue = function(name) {
  let result = [] 
  //option要素はoptionsでアクセスする！
  let opts = document.getElementsById(name).options

  for(let i = 0, len = opts.length; i < len; i++){
   let opt = opts.item(i)
   //checkedではなくselectedを使うことに注意
   if(opt.selected){
    result.push(opt.value)
   }
  }
 return result
 }

 document.getElementById('btn').addEvenetListener('click', function() {
  window.alert(getListValue('food'))
 }, false)
}, false)

ここでは、option要素の集まりをoptionsプロパティによって取り出していることに注意する。チェックボックスでは、checkedプロパティを使っていたが、リストボックスでは、selectedプロパティを使う。

リストボックスの値をjavascriptで設定する

内容は上記のものと何ら変わらないため例だけ載せておく。

sample.html

<form>
 <div>
  <label for="food">好きな食べ物は？：</label>
  <select id="food" multiple>
   <option value="ラーメン">ラーメン</option>
   <option value="餃子">餃子</option>
   <option value="焼肉">焼肉</option>
  </select>
  <input id="btn" type="button" value="送信" />
 </div>
</form>

sample.js

document.addEvenetListener('DOMContentLoaded', function() {
 let setListValue = function(name, value) {
  let opts = document.getElementsByName(name)

  for(let i = 0, len = opts.length; i < len; i++){
   let opt = opts.item(i)
   if(value.indexOf(opt.value) > -1){
    opt.selected = true
   }
  }
 }

 setListValue('food', ['餃子', '焼肉'])
}, false)

参考資料

山田祥寛様　「javascript本格入門」