エントリー記事

javascriptでラジオボタンの値を取得する

JavaScript

フォームを作っていて、CGIに値を渡す前にJava Scriptでいろいろとチェックして、あり得ない組み合わせになっていたらアラートを出して進めなくしたいシチュエーションってありますよね。

例えば、名前を入力していなかったら、画面が変わる前にアラートを出す場合、


if(document.getElementById("name").value=='')
	{
	alert('名前が入力されていません');
	}

上の場合、idがnameになっているもののvalueの値を参照するわけです。

で、ラジオボタンのname属性が同じものから、選択されているvalue値を読み込んで、あり得ない組み合わせになっていないかどうか調べる場合、mdはてっきり


if(document.getElementsByName("payment")=='クレジットカード払い' &&...){....}

だと思ってたんですが、Firebug様がエラー連発。調べること数時間....ラジオボタンって、配列なことが判明orz

ラジオボタンのname属性が同じものから、選択されているvalue値を取り込む

こんな関数を作って


function radioValue(element)
{
	var len;
	len = element.length;
	for (i=0;i<len;i++) {
	if (element[i].checked) return element[i].value;
	}
	return "";
}

こんな感じに使います。


function formcheck(){
	if (radioValue(document.form01.user)=='初めて利用する' && radioValue(document.form01.payment)=='後払い銀行振込')
		{
		alert('初めてご利用の方は、支払い方法に「後払い銀行振込」を選択できません。他の支払い方法を選択してください。');
		return false;
		}
		else
		{
		return true;
		}
}

formのname属性がform01で、ラジオボタンのname属性がuserのものとpaymentのものから、特定の組み合わせをはじく。下の場合、「初めて利用する人」の支払い方法が「後払い銀行振込」の場合、アラートが出て先へ進めなくするパターン。

で、エラーがなければ、CGIにsubmitするようにするには


<input name="submitButtonName" type="button" value="送信内容を確認する" onclick="if(formcheck()==true){document.form01.submit();}" />

って、これだけじゃわかりにくいですね(^^;)。
あとでちゃんと書きます(本日ダウン)