Form.Element.Serializersオブジェクト
【抜粋】一部省略 Form.Element.Serializers = { input: function(element) { (省略) }, (省略) selectMany: function(element) { (省略) } }
入力要素(inputタグ等)の名前と値を取得するためのメソッドを備えます。前述Formオブジェクト、Form.Elementオブジェクトで使用されます。プログラマが外部から使用することはないと思います。また、各メソッドも複雑ではないです。なので、各メソッドの簡単な説明のみを記述します。
inputメソッド
【抜粋】 input: function(element) { switch (element.type.toLowerCase()) { case 'submit': case 'hidden': case 'password': case 'text': return Form.Element.Serializers.textarea(element); case 'checkbox': case 'radio': return Form.Element.Serializers.inputSelector(element); } return false; },
タグ名をメソッド呼び出しに利用するため、メソッド名をタグ名に合わせてあります。typeプロパティの値により後述textareaメソッドかinputSelectorメソッドを呼び出します。
ここでtypeのbutton, file, image, resetが対象外になっているのが、Formオブジェクトのメソッドの一部と、Form.Elementオブジェクトのメソッドでこれらが扱えない理由です。
場合によっては、「case 'submit':」の後に「case 'button':」を追加してもいいかもしれません。
inputSelectorメソッド
【抜粋】 inputSelector: function(element) { if (element.checked) return [element.name, element.value]; },
前述inputメソッドで、入力要素がcheckboxかradioのときに呼び出されるメソッド。チェックされている場合のみ、[(nameプロパティ),(valueプロパティ)]形式の配列を返却します。
同名のcheckboxやradioが複数あっても関知しません。ただ引数の要素のみを処理します。
textareaメソッド
【抜粋】 textarea: function(element) { return [element.name, element.value]; },
メソッド名がタグ名に合わせてある理由はinputメソッドと同じ。前述inputメソッドからも呼び出されます。引数の要素から、[(nameプロパティ),(valueプロパティ)]形式の配列を作成して返却します。
selectメソッド
【抜粋】 select: function(element) { return Form.Element.Serializers[element.type == 'select-one' ? 'selectOne' : 'selectMany'](element); },
メソッド名がタグ名に合わせてある理由はinputメソッドと同じ。typeがselect-oneなら後述selectOneメソッドを、それ以外(つまりselect-multiple)なら後述selectManyメソッドを呼び出しています。
selectOneメソッド
【抜粋】 selectOne: function(element) { var value = '', opt, index = element.selectedIndex; if (index >= 0) { opt = element.options[index]; value = opt.value; if (!value && !('value' in opt)) value = opt.text; } return [element.name, value]; },
前述selectメソッドで、要素のtypeがselect-oneの場合に呼び出されるメソッド。multipe指定なしのselectタグの場合です。selectedIndexプロパティが選択されたオプションのインデックスになるので、その値を取り出します。valueプロパティがない場合はtextプロパティ(画面上に見える見出し部分)を値として設定します。
selectManyメソッド
【抜粋】 selectMany: function(element) { var value = new Array(); for (var i = 0; i < element.length; i++) { var opt = element.options[i]; if (opt.selected) { var optValue = opt.value; if (!optValue && !('value' in opt)) optValue = opt.text; value.push(optValue); } } return [element.name, value]; }
前述selectメソッドで、要素のtypeがselect-multipleの場合に呼び出されるメソッド。multipe指定ありのselectタグの場合です。オプションを一つずつ調べて、選択されている場合にその値を配列に格納しています。valueがない場合にtextを使用しているのは前述selectOneメソッドと同じです。返却される値は、この場合だけ[(nameプロパティ),[(valueプロパティ), ...] ]という入れ子の配列になります。
buttonメソッド追加検討
上の二つのメソッドでbuttonタグ要素も扱えるようにするため、ここでbuttonメソッドを追加するのも手です。値は返却しなくても構わないと思います。
【改修案】buttonメソッド追加 button: Prototype.emptyFunction
Prototype.emptyFunctionを使ってみました。追加する場合は「,」の整合性に注意してください。