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

質問

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

<script type="text/javascript">
<!--
function CheckForm() {
//****************送信内容の取得****************
var data = new Array();
var namesArray = new Array(
'Name', 'Sex', 'Age', 'Address'
, 'Tel', 'Email');
var f = document.forms[0];
for (var i in namesArray) {
var n = namesArray[i];
if (n == 'Sex') {
data[n] = '';
for (var j = 0; j < f[n].length; j++) {
if (f[n][j].checked) {
data[n] = f[n][j].value;
break;
}
}
}
else {
data[n] = f[n].value;
}
}
//****************名前のチェック****************
if (data.Name.length == 0) {
alert('名前が入力されていません。');
f.Name.focus();
return false;
}
//***********確認ダイアログによる確認***********
return confirm('下記の内容で送信して'
+ 'よろしいですか？\n\n'
+ '選んでください：\t\t' + data.Course1 + '\n' + data.Course2 + '\n' + data.Course3 + '\n'
+ '名前：\t\t' + data.Name + '\n'
+ '性別：\t\t' + data.Sex + '\n'
+ '年齢：\t\t' + data.Age + '\n'
+ '住所：\t\t' + data.Address + '\n'
+ '電話番号：\t' + data.Tel + '\n'
+ 'E-Mailアドレス：\t' + data.Email);
}
//-->
</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>

回答No.5

yambejp · ベストアンサー

ああ、セレクトですね・・・
その場合はチェック項目を一つ増やします

<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>

お礼

ありがとうございました。
感謝感謝です

回答No.4

yambejp

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

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

お礼

下記の利用履歴の
<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>

回答No.3

yambejp

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

<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>

お礼

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

回答No.2

think49

#1 です。

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

お礼

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

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

回答No.1

think49

チェックボックスの処理が全く入ってないじゃないですか…。
http://jsfiddle.net/C5xSP/1/

お礼

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

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