prototype.js でチェックされてるラジオボタンの値を取得したい

ikedaHTML,JavaScript,prototype.js,XHTML

KREISEL チームの池田です。
開発中に久し振りに javascript を使う場面があって prototype.js の素晴らしさを再確認したのでご紹介します。

フォームに input 要素の radio ボタンが 3 つあって、どれが選択されているか一発で取得したい場合、みなさんはどうしますか。

排他制御のフォームコントロールなので prototype.js なら要素のオブジェクトの値、
つまり、

$('radio_element_name').value

で取得できると思っていましたが失敗。（これでいけたら楽なのですが。）

思い直して調べてみると、フォームの特定の要素オブジェクトのみ取得する便利な
getInputs メソッドを発見。

var radio_elements = Form.getInputs('form_id', 'radio', 'radio_name');
radio_elements.each(function (element)
{
    if (element.cheked == true) {
        window.alert(element.value);
    }
}

ちなみに getInputs メソッドの第一引数には form オブジェクトかID名を渡すのですが、
getElementsByTagName() でオブジェクトを取得する場合は配列で戻ってくることに注意。

form = getElementsByTagName('form')[0];

上記のソースでも期待通りですが、prototype.js ならもっと簡潔に書く方法がありました。

var value = Form.serialize($('form')).toQueryParams()['radio_element_name'];

これは Form.serialize が全フォームコントロールを “name=value" の形に変換し、さらに toQueryParams メソッドが配列に変換するので、フォームコントロール名を指定すれば値が取得できます。

これならどんなフォームコントロールの値も簡単に取得できるのでお試し下さい。

ikedaHTML,JavaScript,prototype.js,XHTML

Posted by ikeda