チェックボックスがundefinedと表示します

解決済

質問者：syunra
質問日時：2011/07/24 11:23
回答数：5件

下記のように入力すると、チェックボックスがundefinedと表示されてしまいます。
どのように変更すればよいのでしょうか？
教えてください

<script type="text/javascript">

</script>
<form action="/kantan-cgi/formmail.pl?id=*********"
method="post" onSubmit="return CheckForm();">
<dl>
<dt><span class="mainBp">【選んでください】</span></dt>
<dd><input type="checkbox" name="Course1" value="コース１" />コース１
<input type="checkbox" name="Course2" value="コース２" />コース２
<input type="checkbox" name="Course3" value="コース３" />コース３</dd>
<dt>名前(必須)</dt>
<dd><input type="text" name="Name" /></dd>
<dt>性別</dt>
<dd>
<input type="radio" name="Sex" value="男性" />男
<input type="radio" name="Sex" value="女性" />女
</dd>
<dt>年齢</dt>
<dd><input type="text" name="Age" size="2" /></dd>
<dt>住所</dt>
<dd><input type="text" name="Address" size="70" /></dd>
<dt>電話番号</dt>
<dd><input type="text" name="Tel" /></dd>
<dt>E-Mailアドレス</dt>
<dd><input type="text" name="Email" size="50" /></dd>
</dl>
<input type="submit" value="送信" />
</form>

通報する

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

質問の本文を隠す

回答 (5件)

No.1

回答者： think49
回答日時：2011/07/24 16:35

チェックボックスの処理が全く入ってないじゃないですか…。

http://jsfiddle.net/C5xSP/1/

- 0
- 件

通報する

この回答へのお礼

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

問題解決しました。
ただ、あまりに使っていたjavascriptの記述と違いすぎて、こんどは必須の追加ができなくなてしまいました。どのように追加すればよいでしょうか？

通報する

お礼日時：2011/07/24 22:23

No.2

回答者： think49
回答日時：2011/07/24 22:46

#1 です。

必須項目を加えるのなら「名前」と同じ要領でやれないでしょうか？
汎用性重視なら http://www.tagindex.com/kakolog/q4bbs/2201/2595. … が参考になるかも。

- 0
- 件

通報する

この回答へのお礼

サイトを確認したのですが素人なので．．．
ちょっと理解できませんでした
すみません

よろしければ、いちどサイトを見てもらえないでしょうか？
http://www.david-men.com/webmail.html

通報する

お礼日時：2011/07/25 16:06

No.3

回答者： yambejp
回答日時：2011/07/25 11:37

今回のケースだとこんな感じでしょうか？

かなり元ソースが汚いので、よく推敲して理解を深めた方がよいでしょう
あと、コースについては「少なくともどれか一つは選ばなくてはいけない」など
特殊なバリデートが必要な気がしますが・・・

<script>
function CheckForm(f){
var namesArray = new Array(
{"key":'Name',"err":"名前が入力されていません。"}
, {"key":'Sex',"err":"性別が選択されていません。"}
, {"key":'Age',"err":"年齢が入力されていません。"}
, {"key":'Address',"err":"住所が入力されていません。"}
, {"key":'Tel',"err":"電話番号が入力されていません。"}
, {"key":'Email',"err":"メールアドレスが入力されていません。"}
);
for (var i in namesArray){
var k = namesArray[i]["key"];
var e = f.elements[k];
if(e.type=="text" && e.value==""){
alert(namesArray[i]["err"]);
return false;
}
if((typeof e[0])!="undefined" && e[0].type=="radio"){
var flg=true;
for(var j=0;j<e.length;j++){
if(e[j].checked){
flg=false;
break;
}
}
if(flg){
alert(namesArray[i]["err"]);
return false;
}
}
}
var msg="";
msg+='選んでください：\n' ;
msg+=f.elements["Course1"].checked?'\t\t'+f.elements["Course1"].value+ '\n':"";
msg+=f.elements["Course2"].checked?'\t\t'+f.elements["Course2"].value+ '\n':"";
msg+=f.elements["Course3"].checked?'\t\t'+f.elements["Course3"].value+ '\n':"";
msg+='名前：\t\t' + f.elements["Name"].value + '\n';
msg+='性別：\t\t' + (f.elements["Sex"][0].checked?f.elements["Sex"][0].value:f.elements["Sex"][1].value )+ '\n';
msg+='年齢：\t\t' + f.elements["Age"].value + '\n';
msg+='住所：\t\t' + f.elements["Address"].value + '\n';
msg+='電話番号：\t' + f.elements["Tel"].value + '\n';
msg+='E-Mailアドレス：\t' + f.elements["Email"].value;
return confirm('下記の内容で送信してよろしいですか？\n\n'+msg);
}
</script>
<form onSubmit="return CheckForm(this);">
<dl>
<dt><span class="mainBp">【選んでください】</span></dt>
<dd><input type="checkbox" name="Course1" value="コース１" />コース１
<input type="checkbox" name="Course2" value="コース２" />コース２
<input type="checkbox" name="Course3" value="コース３" />コース３</dd>
<dt>名前(必須)</dt>
<dd><input type="text" name="Name" /></dd>
<dt>性別</dt>
<dd>
<input type="radio" name="Sex" value="男性" />男
<input type="radio" name="Sex" value="女性" />女
</dd>
<dt>年齢</dt>
<dd><input type="text" name="Age" size="2" /></dd>
<dt>住所</dt>
<dd><input type="text" name="Address" size="70" /></dd>
<dt>電話番号</dt>
<dd><input type="text" name="Tel" /></dd>
<dt>E-Mailアドレス</dt>
<dd><input type="text" name="Email" size="50" /></dd>
</dl>
<input type="submit" value="送信" />
</form>

- 0
- 件

通報する

この回答へのお礼

何度もすみません
上記の
var namesArray = new Array(
{"key":'Name',"err":"名前が入力されていません。"}
, {"key":'Sex',"err":"性別が選択されていません。"}
, {"key":'Age',"err":"年齢が入力されていません。"}
, {"key":'Address',"err":"住所が入力されていません。"}
, {"key":'Tel',"err":"電話番号が入力されていません。"}
, {"key":'Email',"err":"メールアドレスが入力されていません。"}
);
のなかにメニューフォームを入れたのですが、反応しません
どうしてでしょうか？

通報する

お礼日時：2011/07/25 18:28

No.4

回答者： yambejp
回答日時：2011/07/25 18:31

＞のなかにメニューフォームを入れたのですが、反応しません

ごめんなさい、意味がわからない。
メニューフォームとは何のことで、それをどのように実装したいのでしょうか？
具体的に提示していただけると回答できるかも

- 0
- 件

通報する

この回答へのお礼

下記の利用履歴の
<dt>利用履歴(必須)</dt>
<dd><select name="Visited">
<option value=""> -- 選択して下さい -- </option>
<option value="利用したことがない">利用したことがない</option>
<option value="以前、利用したことがある">以前、利用したことがある</option>
</select></dd>
だと

{"key":'Visited',"err":"利用履歴が選択されていません。"}
が反応しないのです。何度もすみさせんお願いします。

----------------------------------------------------------------------

<script>
function CheckForm(f){
var namesArray = new Array(
{"key":'Visited',"err":"利用履歴が選択されていません。"}
, {"key":'Name',"err":"名前が入力されていません。"}
, {"key":'Sex',"err":"性別が選択されていません。"}
, {"key":'Age',"err":"年齢が入力されていません。"}
, {"key":'Address',"err":"住所が入力されていません。"}
, {"key":'Tel',"err":"電話番号が入力されていません。"}
, {"key":'Email',"err":"メールアドレスが入力されていません。"}
);
for (var i in namesArray){
var k = namesArray[i]["key"];
var e = f.elements[k];
if(e.type=="text" && e.value==""){
alert(namesArray[i]["err"]);
return false;
}
if((typeof e[0])!="undefined" && e[0].type=="radio"){
var flg=true;
for(var j=0;j<e.length;j++){
if(e[j].checked){
flg=false;
break;
}
}
if(flg){
alert(namesArray[i]["err"]);
return false;
}
}
}
var msg="";
msg+='選んでください：\n' ;
msg+=f.elements["Course1"].checked?'\t\t'+f.elements["Course1"].value+ '\n':"";
msg+=f.elements["Course2"].checked?'\t\t'+f.elements["Course2"].value+ '\n':"";
msg+=f.elements["Course3"].checked?'\t\t'+f.elements["Course3"].value+ '\n':"";
msg+='利用履歴：\t\t' + f.elements["Visited"].value + '\n';
msg+='名前：\t\t' + f.elements["Name"].value + '\n';
msg+='性別：\t\t' + (f.elements["Sex"][0].checked?f.elements["Sex"][0].value:f.elements["Sex"][1].value )+ '\n';
msg+='年齢：\t\t' + f.elements["Age"].value + '\n';
msg+='住所：\t\t' + f.elements["Address"].value + '\n';
msg+='電話番号：\t' + f.elements["Tel"].value + '\n';
msg+='E-Mailアドレス：\t' + f.elements["Email"].value;
return confirm('下記の内容で送信してよろしいですか？\n\n'+msg);
}
</script>
<form onSubmit="return CheckForm(this);">
<dl>
<dt><span class="mainBp">【選んでください】</span></dt>
<dd><input type="checkbox" name="Course1" value="コース１" />コース１
<input type="checkbox" name="Course2" value="コース２" />コース２
<input type="checkbox" name="Course3" value="コース３" />コース３</dd>
<dt>利用履歴(必須)</dt>
<dd><select name="Visited">
<option value=""> -- 選択して下さい -- </option>
<option value="利用したことがない">利用したことがない</option>
<option value="以前、利用したことがある">以前、利用したことがある</option>
</select></dd>
<dt>名前(必須)</dt>
<dd><input type="text" name="Name" /></dd>
<dt>性別</dt>
<dd>
<input type="radio" name="Sex" value="男性" />男
<input type="radio" name="Sex" value="女性" />女
</dd>
<dt>年齢</dt>
<dd><input type="text" name="Age" size="2" /></dd>
<dt>住所</dt>
<dd><input type="text" name="Address" size="70" /></dd>
<dt>電話番号</dt>
<dd><input type="text" name="Tel" /></dd>
<dt>E-Mailアドレス</dt>
<dd><input type="text" name="Email" size="50" /></dd>
</dl>
<input type="submit" value="送信" />
</form>

通報する

お礼日時：2011/07/25 18:52

No.5ベストアンサー

回答者： yambejp
回答日時：2011/07/25 22:14

ああ、セレクトですね・・・

その場合はチェック項目を一つ増やします

<script>
function CheckForm(f){
var namesArray = new Array(
{"key":'Name',"err":"名前が入力されていません。"}
, {"key":'Sex',"err":"性別が選択されていません。"}
, {"key":'Age',"err":"年齢が入力されていません。"}
, {"key":'Address',"err":"住所が入力されていません。"}
, {"key":'Tel',"err":"電話番号が入力されていません。"}
, {"key":'Email',"err":"メールアドレスが入力されていません。"}
, {"key":'Visited',"err":"利用履歴が選択されていません。"}
);
for (var i in namesArray){
var k = namesArray[i]["key"];
var e = f.elements[k];
if(e.type=="text" && e.value==""){
alert(namesArray[i]["err"]);
return false;
}
if(e.type=="select-one" && e.value==""){
alert(namesArray[i]["err"]);
return false;
}
if((typeof e[0])!="undefined" && e[0].type=="radio"){
var flg=true;
for(var j=0;j<e.length;j++){
if(e[j].checked){
flg=false;
break;
}
}
if(flg){
alert(namesArray[i]["err"]);
return false;
}
}
}
var msg="";
msg+='選んでください：\n' ;
msg+=f.elements["Course1"].checked?'\t\t'+f.elements["Course1"].value+ '\n':"";
msg+=f.elements["Course2"].checked?'\t\t'+f.elements["Course2"].value+ '\n':"";
msg+=f.elements["Course3"].checked?'\t\t'+f.elements["Course3"].value+ '\n':"";
msg+='名前：\t\t' + f.elements["Name"].value + '\n';
msg+='性別：\t\t' + (f.elements["Sex"][0].checked?f.elements["Sex"][0].value:f.elements["Sex"][1].value )+ '\n';
msg+='年齢：\t\t' + f.elements["Age"].value + '\n';
msg+='住所：\t\t' + f.elements["Address"].value + '\n';
msg+='電話番号：\t' + f.elements["Tel"].value + '\n';
msg+='E-Mailアドレス：\t' + f.elements["Email"].value + '\n';
msg+='履歴：\t\t' + f.elements["Visited"].value + '\n';
return confirm('下記の内容で送信してよろしいですか？\n\n'+msg);
}
</script>
<form onSubmit="return CheckForm(this);">
<dl>
<dt><span class="mainBp">【選んでください】</span></dt>
<dd><input type="checkbox" name="Course1" value="コース１" />コース１
<input type="checkbox" name="Course2" value="コース２" />コース２
<input type="checkbox" name="Course3" value="コース３" />コース３</dd>
<dt>名前(必須)</dt>
<dd><input type="text" name="Name" /></dd>
<dt>性別</dt>
<dd>
<input type="radio" name="Sex" value="男性" />男
<input type="radio" name="Sex" value="女性" />女
</dd>
<dt>年齢</dt>
<dd><input type="text" name="Age" size="2" /></dd>
<dt>住所</dt>
<dd><input type="text" name="Address" size="70" /></dd>
<dt>電話番号</dt>
<dd><input type="text" name="Tel" /></dd>
<dt>E-Mailアドレス</dt>
<dd><input type="text" name="Email" size="50" /></dd>
<dt>利用履歴(必須)</dt>
<dd><select name="Visited">
<option value=""> -- 選択して下さい -- </option>
<option value="利用したことがない">利用したことがない</option>
<option value="以前、利用したことがある">以前、利用したことがある</option>
</select></dd>
</dl>
<input type="submit" value="送信" />
</form>