フォームの部品を取得する時は、elements と options

フォームの部品を洗いざらい取得したい場合には、elements と options を使えば簡単に取得できる。

例えば、「id=test」を持つ form 要素があったとして、部品の name と value を取得したい、ついでに、セレクトボックスの option 要素に定義している　textContent も取得したいとすると、こんな感じになる。

// 変数 thisForm に form 要素を定義
var thisForm = document.getElementById("test");
// 格納庫として変数 formElms を定義
var formElms = {names: new Array(), values: new Array(), texts: new Array()};
// form 要素内の部品を順に取得
for (var x = 0; x < thisForm.elements.length; x++) {
// それぞれを格納
  formElms.names.push(thisForm.elements[x].name);
  formElms.values.push(thisForm.elements[x].value);
// 部品のタグ名が select だった場合
  if (thisForm.elements[x].tagName == "SELECT") {
// select 要素内の option 要素を順に取得
    for (var y = 0; y < thisForm.elements[x].options.length; y++) {
      formElms.texts.push(thisForm.elements[x].options[y].textContent);
    }
  }
}