JSでフォームの入力値をobjectにして取得するよ

ちょっちメモ的に

軽い気持ちで書いてたら，思ったよりぐんにょりした仕様が多かったのでメモ的にエントリ．てきとーにgistで貼り付けてみたり．

form.elementsにINPUT[type='image']な要素が含まれない

• HTMLFormElement#elementsにはtype="image"のinput要素は含まれない - rikubaの日記

oh…歴史的な理由て．

form.elementsにFIELDSET要素が含まれる

今回は判定しないので単純に無視してます．さらにfieldset.elementsにはFIELDSET要素以下の子要素が含まれます．まとめてコントロールするときには何か使えるかも．

multiple属性のついたSELECT要素の扱い

multiple属性が有効であっても，name属性がvars[]のようになっていなければ，一番最後のselectedな要素の値を送信します．

よって，他と同様にisAryのときだけmultipleとして扱って，子のOPTION要素を走査しています．

valueなしのOPTION要素の扱い

option要素にvalue属性が指定されていないとき，中のテキストがデータとして扱われるはず．

<select>
<option value="valueあり" selected="selected">あるよ</option>
</select>
→ select.value === 'valueあり'

<select>
<option selected="selected">ないよ</option>
</select>
→ select.value === 'ないよ'

上記のような感じですね．しかし，IE6〜8ではselect.valueから値を取得できず，IE6〜7ではoption.valueでも取得できません．

<option value="">ラベル</option>
　と
<option>ラベル</option>

これらの区別が付きづらそうだったので，とりあえず対応しないことにしてます．スマートに判別できるのかな…

おまけ.fieldset要素のdisabled属性

• HTML5 - The fieldset element

上記を見ると，fieldsetのdisabled属性がtrueの場合に，中に入ったコントロール類はすべて無効になるとされていますが今回は仕様外としています．

有効 : Firefox 8 (Mac), Opera 11.6 (Mac)

無効 : InternetExplorer 9, Safari 5.1 (Mac), Chrome16 (Mac)

手元でさらっと見てみた感じだと，上記のような対応状況でした．

---