チェックボックスとテキストフィールドを連動させて、Javascriptでチェックをかけたい

解決済

質問者：fishpaw
質問日時：2003/05/30 15:30
回答数：4件

このようなアンケートがあるとします。

//アンケートスタート

●Q1　あなたはJavascriptを使いこなしていますか？
ラジオボタン回答1　使いこなしている
ラジオボタン回答2　あまり使いこなしているといえない
ラジオボタン回答3　ぜんぜん使いこなしていない

●Q2　Q1で「あまり使いこなしているといえない」
「ぜんぜん使いこなしていない」と回答した方のみお答えください。
その理由はどのようなものですか？

チェックボックス回答1　むずかしい
チェックボックス回答2　わかりにくい
チェックボックス回答3　そのほか
テキストフィールド　そのほかの理由（　　　　　　　）

【送信ボタン】

//アンケートエンド

■上のアンケートでJavascriptを使用して
次のことをしたいのですが、教えてください。

1.Q1の2と3にチェックがあるのに、
Q2に未回答のままフォームデータを送信しようとした場合に、
アラートを表示させたい

2.Q2で3を選んだ人にもかかわらず、
そのほかの理由テキストフィールドに未記入のまま
フォームデータを送信しようとした場合、
アラートを表示させたい

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： mousengoke
回答日時：2003/05/31 09:02

えーと、

まず確認を取っておきたいのですが
SubmitCheck()は該当<form>タグからonSubmitで呼び出しているんでしょうか?
また、regsは該当<form>の名前(name属性の値)ととっていいんでしょうか?
あと、【中略】の部分にはreturn trueは無いととっていいんでしょうか?

とりあえず上記の条件ととって話を進めると

No2.で僕がやったように
onSubmit="SubmitCheck(this)"
で呼び出して関数名をfunction SubmitCheck(thisform)にしておけば
document.regsはすべてthisformに置き換える事が出来ます。

【中略】の後を

scriptqueshantei = checans(thisform);
return scriptqueshantei;

とすれば問題ないと思います。確認はとってません。

あと複数回答の件ですがはっきりチェックボックスと書いてありましたね。見落としてました。ごめんなさい。

else{
quesumu = checradioon(thisform.ques2);
if(!quesumu){
alert("Q2に答えてください。");
return false;
}
}

if(thisform.ques2[2].checked){
if(thisform.q2else.value==""){
alert("テキスト欄に理由を書いてください。");
return false;

の部分を

else{
quesumu = checques2(thisform);
if(!quesumu){
alert("Q2に答えてください。");
return false;
}
}

if(thisform.q2a3.checked){
if(thisform.q2else.value==""){
alert("テキスト欄に理由を書いてください。");
return false;

に書き換えてください。
そして次の関数を加えてください。

function checques2(thisform){
var checkumua1;
var checkumua2;
var checkumua3;

checkumua1 = thisform.q2a1.checked;
checkumua2 = thisform.q2a2.checked;
checkumua3 = thisform.q2a3.checked;

if(checkumua1 || checkumua2 || checkumua3){
return true;
}
else{
return false;
}
}

本当はchecradioonみたいに流用の利く関数にしたかったんだけど難しそうだったんで特化したものにしました。
ちなみにQ2のname属性の値はid属性のそれと同じものに変えてあります。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
本日、所用のためデータをいじることができませんので、実際データに入れ込んでテストしてみてから、あれば、改めて質問などさせていただければと思います。すみません。

通報する

お礼日時：2003/05/31 16:01

No.4

回答者： you111111
回答日時：2003/06/01 21:11

>チェックはしてくれるのですが、そのまま送信のダイアログボックスがでてきてしまいます…。

入力画面に戻し、その回答欄にフォーカスさせたいです！

関数自体はできている様なので、送信ボタンのonclickイベントで
onclick="javascript:SubmitCheck()"
とすればよいのでは？・・・

>あと、Q2は複数回答できるようにしたいのですが、
>ラジオボタンのままで大丈夫なのでしょうか？

ラジオボタンの名前を変えればできます。
<input type="radio" name="rad2_1">2-1
<input type="radio" name="rad2_2">2-2
<input type="radio" name="rad2_3">2-3

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2003/06/21 16:59

No.2

回答者： mousengoke
回答日時：2003/05/30 19:52

<html>

<head>
<script type="text/javascript">

</script>
</head>
<body>
<form onSubmit="return checans(this)" action="送信先のURL">
<p>●Q1　あなたはJavascriptを使いこなしていますか？ </p>
<p>
<label for="q1a1">
<input type="radio" name="ques1" id= "q1a1" value="q1a1">使いこなしている
</label>
<label for="q1a2">
<input type="radio" name="ques1" id= "q1a2" value="q1a2">あまり使いこなしているといえない
</label>
<label for="q1a3">
<input type="radio" name="ques1" id= "q1a3" value="q1a3">ぜんぜん使いこなしていない
</label>
</p>
<p>●Q2　Q1で「あまり使いこなしているといえない」「ぜんぜん使いこなしていない」と回答した方のみお答えください。
その理由はどのようなものですか？ </p>
<p>
<label for="q2a1">
<input type="radio" name="ques2" id= "q2a1" value="q2a1">むずかしい
</label>
<label for="q2a2">
<input type="radio" name="ques2" id= "q2a2" value="q2a2">わかりにくい
</label>
<label for="q2a3">
<input type="radio" name="ques2" id= "q2a3" value="q2a3">そのほか
</label>
</p>
<input type="text" name="q2else">
<input type="submit" value="送信">
</form>
</body>
</html>

ちなみに当たり前の話ですがアンケートに答える人がjavascriptを無効にしてあったり使えない環境の場合エラーなしで投稿できてしまいます。

この回答への補足

ありがとうございます。

すでにあるfunction SubmitCheck()という送信時のチェックのためのプログラムに上のチェック機能を追加したいのですが、どのように書き直せばいいのでしょうか…。

ちなみにそのfunctionはつぎのようになっています。
function SubmitCheck()
{
var bchecked = 0;　　　　　//これは入力中のチェックです
if(allHankakuCheck()){
return false;
}
if(allNumericCheck()){　　　//これも入力中のチェックです
return false;
}
if(ua == 0 || ua == 2){
if ( document.regs.media.selectedIndex == 0 ){
alert("どのようにしてこのページをしりましたか？");
return false;
}
if ( !EmptyCheck(document.regs.name.value,"あなたの名前を記入してください") )
{
document.regs.name.focus();
return false;
}

【中略】

return true;
}

あと、Q2は複数選択できるようにしたいのですが、
単純にcheckboxに変更するだけじゃだめですよね？