メールフォームに「規約同意」のチェックをつける

0   名前： ange ： 2007/04/26（木） 09:22  ID:uumnrx.t sub-Q5
できるだけ自分で解決しようと思っているのですが、ネットであれこれ探しても、
どうしてもうまくいかないので、教えていただければと思います。

【やりたいこと】
既に作成してあるメールフォームの一番下に、規約文を入れ、その下にチェックボタンをつけ、
そこにチェックを入れた場合のみメール送信、という形にしたい。（チェックが外れていれば警告文が出る）
※メールアドレスや連絡先など、他の入力必須項目も記入されていないと警告文が出ます。

【ソース】
<script language= "JavaScript">
function ceck_in()
{
txt = document.formZ.namae01.value;
if (txt == "") {
alert("お名前もしくは会社・組織名が入力されていません");
document.formZ.namae01.focus();
return false;
}
txt = document.formZ.kana01.value;
if (txt == "") {
alert("ふりがなが入力されていません");
document.formZ.kana01.focus();
return false;
}
txt = document.formZ.zip01.value;
if (txt == "") {
alert("郵便番号が入力されていません");
document.formZ.zip01.focus();
return false;
}
txt = document.formZ.zip02.value;
if (txt == "") {
alert("都道府県が選択されていません");
document.formZ.zip02.focus();
return false;
}
txt = document.formZ.zip03.value;
if (txt == "") {
alert("郡市区、町名・番地が入力されていません");
document.formZ.zip03.focus();
return false;
}
txt = document.formZ.tel.value;
if (txt == "") {
alert("電話番号が入力されていません");
document.formZ.tel.focus();
return false;
}
txt = document.formZ.mail.value;
if (txt == "") {
alert("メールアドレスが入力されていません");
document.formZ.mail.focus();
return false;
}
}
</script>

【補足】
・チェックボックスをチェックするためのソースは、こちらのサイトさんに掲載されていたものをそのまま
使用してみましたが、うまくいかなかったので一旦削除しています。
・上のソース自体は他の方が書かれたものです。
・メール送信はPHPで行っています。（これも他の方が書かれたソースです）

Javascriptはまだまだ素人なので、どなたかお力添えいただければと思います。
宜しくお願いいたします。
1   名前： 匿名 ： 2007/04/26（木） 09:22  ID:b.hDXWdk sub-Ds
＞うまくいかなかったので一旦削除しています。

なんで？その削除してしまったものこそ、書いてもらわないと。
要するに、そのチェックボックスをform要素でたどって、
if(obj.checked)で通してreturn trueすればいいだけ。

あと、formの要素参照の書き方は、そんな書き方してると、
うるさい人いるので注意されると思うよ（正論なのだが）(w
2   名前： ange ： 2007/04/26（木） 09:22  ID:uumnrx.t sub-Q5
>匿名さん

ご回答ありがとうございます。
自分のあまりの無知加減に、かなり恥ずかしく思って削除してしまいました・・・
以下追加したソースです。

・
・
・
txt = document.formZ.mail.value;
if (txt == "") {
alert("メールアドレスが入力されていません");
document.formZ.mail.focus();
return false;
}

txt = document.formZ.check1.value;
if(!document.form1.check1.checked){
flag = 1;
}
if(flag){
window.alert('規約に同意の上、チェックして下さい');
return false;
}
else{
return true;
}

}
</script>

このサイトさんのソースをほとんどコピーしただけのものです。

書き方については、私が作成したものではないのでどうにもいじれなかったのですが、
あまりにもひどい場合には対策をとることにします。

知識不足ですみません。

3   名前： 某制作 ： 2007/04/26（木） 09:22  ID:gFY2524F sub-Q5
if(!document.form1.check1.checked){
flag = 1;
}
if(flag){
window.alert('規約に同意の上、チェックして下さい');
return false;
}
else{
return true;
}

の部分を


if(!document.forms["form1"].elements["check1"].checked){
window.alert('規約に同意の上、チェックして下さい');
return false;
}else{return true;}
としたら良いんじゃないでしょうか！？

一応テストしましたが
何かありましたらお知らせください。
4   名前： 某制作 ： 2007/04/26（木） 09:22  ID:gFY2524F sub-Q5
ちなみにですけど
元の関数ですと
flagがエラーになるのでは…

if(!document.form1.check1.checked){
flag = 1;
}

じゃあチェックがなかった場合…
flagは未定義値になってしまうので

elseも書いてあげなければなりません
あとは数値より
if(!document.form1.check1.checked){
flag = false;
}else{flag=true;}
とした方がよいのかも…


さらにお節介ですが
IEならばJavascriptにエラーがあったとき
左下のエラーメッセージをダブルクリックすると
詳しいエラー内容（場所）が特定できます。

Firefoxの方がもっと◎ですが♪

以上、宜しくお願いします。
5   名前： 匿名 ： 2007/04/26（木） 09:22  ID:aQuF.kCj sub-Cz
超手抜き。
var ErrorMessages = {
    'namae01' : 'お名前もしくは会社・組織名が入力されていません',
    'kana01'  : 'ふりがなが入力されていません',
    'zip01'   : '郵便番号が入力されていません',
    'zip02'   : '都道府県が選択されていません',
    'zip03'   : '郡市区、町名・番地が入力されていません',
    'tel'     : '電話番号が入力されていません',
    'mail'    : 'メールアドレスが入力されていません',
    'check1'  : '規約に同意の上、チェックして下さい'
};

function checkIn (form) {
    var name, c;
    for (var name in ErrorMessages)
        if (c = form.elements[name])
            if (c.type == 'text' && c.value == '' || c.type == 'checkbox' && ! c.checked)
                return Boolean (alert (ErrorMessages[name]) || c.focus ());
    return true;
}
<form action="#" onsubmit="return checkIn (this); ">

改造ポイント：
・上記ではデフォルトが送信可だが、本来ならデフォルトは送信不可にすべき。まあ、どうせサーバ側で再チェックするだろうけど。
・はっきり言って alert() は鬱陶しいし、誤操作のもとになる。別の警告手段を考えた方が良い。


>>1
召喚されてしまった。以下ただの雑談

form 要素というよりはコントロールの参照の方ね。以前別所で「PHP で出力した <input name="var[]"> を JavaScript から参照できない」という質問が頻発したので、省略形しか教えないサンプルは使い物にならないと判断した。

それよりも、script 要素に type 属性がないことを、俺は厳重に注意する。HTML の基本ルールを知らない証拠だから。HTML の基本ルールを知らずに、HTML を操作するプログラムを書けるとは思えない。だから「今どき language 属性なんて書いているサンプルは信用するな」と、俺はいつも言っている。

# つか、基本的に他人が書いたコードは信用するな、が正解なのかもしれない。もちろん、俺のも含めて、ね。
# まあ、たぶん 10 年後ぐらいには「今どき type="text/javascript" なんて書いているサンプルは使うな、application/javascript だ」と言ってることだろう（text/javascript は RFC 4329 で廃止）。
6   名前： 匿名 ： 2007/04/26（木） 09:22  ID:aQuF.kCj sub-Cz
>>5
> もちろん、俺のも含めて、ね

ほら、言った側から訂正だ OTL。>>5 に var name を 2 回書いてしまった（影響はないが無駄）。

おまけ。以下は Firefox 1.5+ 専用。どこまで圧縮できるか頭の体操。実用性はない。
<script type="application/javascript; version=1.6">

function checkIn (form, messages) {
    return Array.every (form.elements, function (c) {
        return ! messages[c.name]
            || (c.type == 'text' && c.value != '' || c.type == 'checkbox' && c.checked)
            || Boolean (alert (messages[c.name]) || c.focus ());
    } );
}

</script>

<form action="#" onsubmit="return checkIn (this, {
    'namae01' : 'お名前もしくは会社・組織名が入力されていません',
    'kana01'  : 'ふりがなが入力されていません',
    'zip01'   : '郵便番号が入力されていません',
    'zip02'   : '都道府県が選択されていません',
    'zip03'   : '郡市区、町名・番地が入力されていません',
    'tel'     : '電話番号が入力されていません',
    'mail'    : 'メールアドレスが入力されていません',
    'check1'  : '規約に同意の上、チェックして下さい'
} ); ">
7   名前： ange ： 2007/04/26（木） 09:22  ID:uumnrx.t sub-Q5
>>3−6
親切かつ丁寧な解説、皆様ありがとうございます。
レス遅くなりましたがお礼申し上げます。
ひとまず、提案していただいたソースを参考に試してみます。

本当に、HTMLやCSSに関してもまだまだ勉強不足ですし、JavascriptやPHPに関しては
全く素人同然なので、今後も勉強が必要だと痛感しました。
皆様のように、人に教えてあげられるくらい知識を増やすべく（どうせ仕事でも必要に
なるとは思うので・・・）、がんばります。

またつまづいた時にはここにご相談に来させていただくと思います。
（個人的に、徹底的に調べ、試してみてそれでも駄目な時（もしくは時間が迫っている時）
に限り、最終手段としてここを利用させていただいているので、あまり多くはないのですが）

その時はまたご教授いただければ嬉しいです。
本当にありがとうございました！
一覧へ戻る