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を使ってみました。追加する場合は「,」の整合性に注意してください。