radioボタンでも、うまくアラート処理したいのですが・・・

質問

<SCRIPT LANGUAGE="JavaScript">

<!--

// ヌル及び空欄のチェックを行う

function isFilled(elm) {
if (elm.value == "" ||
elm.value == null)
return false;
else return true;
}

function isReady(form) {

// 名前の空欄のチェックを行う

if (isFilled(form.name) == false) {
alert("お名前を入力して下さい。");
form.name.focus();
return false;
}

return true;
}

//-->

</SCRIPT>

フォームによるアンケートページを作成しているのですが、
textボックスで回答が書かれていなく、空欄の部分があったら
アラートを出し、そのtextボックス部分に戻す、というような
上記プログラムの流れにしています。

textボックスではうまくいくのですが、radioボタンのとき、
うまくいきません(アラートは出るが、フォームに戻らない)。

回避策を教えてください。

回答No.2

noname#99638 · ベストアンサー

全体のスクリプトが分からないのでとりあえず書いてみました。
多分下の書き方で、大丈夫だと思うのですが・・・
少し長いですが、参考にして下さい。(プログラムが余り上手くないのはご勘弁）

<SCRIPT LANGUAGE="JavaScript">
//テキストフィールド用入力チェック
function isFilled(elm) {
　if (elm.value == "" || elm.value == null){
　　return false;
　}else{
　　return true;
　}
}
//ラジオボタン用入力チェック
function isSelected(radioobj){
　　for ( i = 0 ; i < radioobj.length ; i++ ) {
　　　if ( radioobj[i].checked ) {
　　　　return true;
　　　}
　　}
　　return false;
}
//送信ボタンが押されたときのチェック
function check(fm){
　if(isFilled(fm.namae) == false){
　　alert("名前入れてね")
　　return false;
　}
　if (isFilled(fm.addr) == false) {
　　alert("アドレス入れてね")
　　return false;
　}
　if(isSelected(fm.present) == false){
　　alert("プレゼントを選んでね")
　　return false;
　}
　　//好きなだけチェックを入れられます

return true; //最後にtrueを返す
}

</SCRIPT>

フォーム部分です。
<FORM NAME="fm" ACTION="送信先" onSubmit="return check(this)">
　名前:　　　　<INPUT SIZE="25" TYPE="text" NAME="namae" >
　　　　　　　　<!--　name="name"　から変更しました ↑-->
<BR>
　アドレス:　　<INPUT SIZE="30" TYPE="text" NAME="addr">
<BR>
　　 <INPUT TYPE="radio" NAME="present" value="りんご">りんご
　　<INPUT TYPE="radio" NAME="present" value="バナナ">バナナ
<BR>
<INPUT TYPE="submit" VALUE="送信">
<BR>
</FORM>

回答No.3

noname#99638

今回は、k_satoさんがお急ぎのようでしたので、いきなりスクリプトを書いてしまいましたが、ちょっとまとめておきます。

１．ラジオボタンの「on」「off」は、
フォームの名前．ラジオボタンの名前［インデックス］．checked
の　true か　false　をひとつずつ調べます。
ちなみに、
　ラジオボタンの名前．length 　
は、同じ名前(NAMEプロパティの値が同じ)をもつラジオボタンの数です。

２．一番下のスクリプトが上手くいかなかったのは、
　テキストボックスの場合
　　　入力漏れがあれば　 Submitに　false　を返す
　ラジオボタンの場合
　　　チェックされていれば　Submitに　true　を返す
と、判断が反対になっていたからだと思います。

３．真下のスクリプトを少し工夫すると、抜けがある項目をすべて表示するということもできます。
（今のままだと、名前が抜けていれば、プレゼントが抜けていても「名前をいれてね」としか出ませんから）

ヒントは

var　msg=　""
if(名前が抜けてたら){
　msg = msg + "名前 "
}

です。（名探偵コナン（アニメ版）の次週のヒントなみですな・・・ほとんど答え？）

では、参考になりましたら幸いです。

お礼

望んでいたプログラムの流れが出来ました!
kana-tan様のおかげです・・・。
本当にありがとうございました(^-^)

ちなみにアラートのOKを押した後、カーソルを
自動で空欄部分に戻す方法も付け足しました。

function check(fm){
　if(isFilled(fm.namae) == false){
　　alert("お名前を入力して下さい")
　　　fm.namae.focus();
　　return false;
　}
　・
　・
だけど、radioボタンだけは無理なんですよね。
でも、大満足です。

本当にありがとうございました。

補足

本当にありがとうございます！

さっそく、教えていただいた通りに書き直して試してみます。
うまくプログラムが流れてくれるといいのですが・・・。

のちほど、またご報告します。

回答No.1

noname#99638

radioボタンのときの処理をどのように書かれているかがわからないので、新たに書いてみました。
下の書き方ではダメですか？
（フォーマットを整えるために全角空白が入っているので、コピーペーストしても動きません。）

<SCRIPT LANGUAGE="JavaScript">
//チェック用関数（引数はFORMオブジェクト）
function check(fm) {
　　for ( i = 0 ; i < fm.foo.length ; i++ ) {
　　　if ( fm.foo[i].checked ) {
　　　　return true; //どれかチェックされていたらフォームを送る
　　　}
　　}
　　alert("NG") //チェックされてないよ
　　return false;
}
</SCRIPT>
　：
　：
<FORM ACTION="送信先" onSubmit="return check(this)">
<INPUT TYPE="radio" NAME="foo" value="value1">value1
<INPUT TYPE="radio" NAME="foo" value="value2">value2
<INPUT TYPE="radio" NAME="foo" value="value3">value3　
<BR>
<INPUT TYPE="submit" VALUE="決定">

</FORM>

思っていた書き方ではなかったら、お返事下さい。

補足

ありがとうございます。
radioボタンの処理はわからず、止まっていました。

そして、kana-tan様のプログラムでradioボタンでも
動くようにはなったのですが…。

<!--

// ヌル及び空欄のチェックを行う

function isFilled(elm) {
if (elm.value == "" ||
elm.value == null)
return false;
else return true;
}

function isReady(form) {

// 名前の空欄のチェックを行う

if (isFilled(form.name) == false) {
alert("お名前を入力して下さい。");
form.name.focus();
return false;
}

// ふりがなの空欄のチェックを行う

if (isFilled(form.kana) == false) {
alert("ふりがなを入力して下さい。");
form.kana.focus();
return false;
}
　・
　・
　・

return true;
}

//プレゼントの空欄チェックを行う
function isReady(fm) {
for ( i = 0 ; i < fm.present.length ; i++ ) {
if ( fm.present[i].checked ) {
return true; //
}
}
alert("プレゼントをお選び下さい。") //
return false;
}
//-->

</SCRIPT>

アンケート項目は複数個あり、それぞれのアラートメッセージを
出していました。
上記のように、textボックスのチェックは今までのプログラムで行い、
radioボタンのチェックのみ、kana-tan様のプログラムで組んでみたら、
全て同じアラート文(プレゼントをお選び下さい。)が出てしまいました。

複数textボックスとradioボタンを組み合わせて使用したいのですが、
どのように組んだらよいのか、ご指導お願いいたします。

ちなみに
textボックスは
<INPUT size="25" type="text" name="name">
　・
　・
radioボタンは
<INPUT TYPE="radio" NAME="present" value="りんご">りんご
<INPUT TYPE="radio" NAME="present" value="バナナ">バナナ

と、普通のhtmlで記述しています。