人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

サイトの入力チェックについての質問です。
http://1811way.com/work008/test01.html

名前(name="lname")と連絡方法のチェックボックス(name="chuusi")
が記入(=入力)されていなかったら、
アラームを出して、各入力フィールドに戻れ、
とい処理にしたいのですが、うまく書けません。

test01.html→test01.php
と展開します。(伺いたいのはtest01.htmlだけです)

test01.htmlのソースは
http://1811way.com/work008/test01-html.txt

test01.phpのソースは
http://1811way.com/work008/test01-php.txt

です。
不都合・追加の部分を書いていただけると助かります。
よろしくお願いします。

●質問者: kohhi
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● ku__ra__ge
●200ポイント ベストアンサー

test01.html の問題点について指摘させていただきます。

1. 「●中止の場合の連絡方法」のチェックボックスにname属性が2つあります。
これは構文的におかしいのでどちらか、1つにする必要があります。

2. checkForm関数がどこからも呼ばれていません。
入力をチェックする処理がどこからも呼ばれていません。呼ばれていない処理は実行されません。
「同意して送信」ボタンで呼ぶようにして、サブミットはcheckForm関数の最後に書くとよいでしょう。

3. javascriptに問題があります。
3.1. 存在しないフォーム名が指定されています。
「var f = window.document.the_form;」としてありますが、「the_form」はhtml内に存在しません。
「the_form」の代わりにhtml内に記述してある「form1」を指定する必要があります。

3.2. チェックボックスのチェック状態を判定する方法が誤っています。
javascriptでチェックボックスのチェック状態を判定するにはchecked属性を利用します。
また、複数のチェックボックスは配列として扱われます。

3.3. 括弧の対応が合っていません。
最後のifの「}」が抜けているため、構文エラーが発生しています。構文エラーが存在するとjavascriptは動作しません。

4. まとめ
それぞれの修正を行うと、以下のような内容になります

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>7月セミナー申し込みフォーム</TITLE>
 
<META http-equiv=Content-Type content="text/html; charset=SHIFT-JIS">
<META content="MSHTML 6.00.2800.1276" name=GENERATOR>
<style type="text/css"> 
<!--
td{font-size:12px;
}
--> 
</style>
<script language="JavaScript" type="text/JavaScript"> 
<!--

function checkForm() {
 
var f = window.document.form1; // ●変更 3.1.
 
// ワードチェック用正規表現
var check_tel = /\D/;
var check_zip = /\D/;
var check_mail = /.+@.+\..+/;
 
// license
var checkJob = false;
var checkIn = true;

// 名前
if (f.lname.value == "") {
alert("お名前を入力して下さい");
f.lname.select();
f.lname.focus();
return false;
}

var checkCount = 0; // ●変更 3.2.
var checkboxList = f["id2[]"]; // ●変更 3.2.
for (var i=0; i<checkboxList.length; i++) {if (checkboxList[i].checked) checkCount++; } // ●変更 3.2.
if (checkCount < 1) { // ●変更 3.2.
alert("中止の場合の連絡方法を選んで下さい");
f.chuusi.select();
f.chuusi.focus();
return false;
} // ●変更 3.3.

f.submit(); // ●「同意して送信」ボタンから、ここに移動させました
}
</script>
</HEAD>
<BODY>
<table bordercolor=#cccccc cellspacing=3 cellpadding=3 width="70%" align=center border=1>
 <form name="form1" method="get" action="test01.php" onsubmit="return false;">

 <tr>
 <td colspan=2>●お名前
 <input size=30 name="lname" style="IME-MODE: active">
 </td>
 </tr>

 <tr>
 <td colspan=2>●中止の場合の連絡方法(2つまでお選びください)
<!-- ●変更 1. -->
<input onclick="checkbox_check();" type="checkbox" value="中止連絡方法は電話" name=id2[]>電話 
<input onclick="checkbox_check();" type="checkbox" value="中止連絡方法はメール" name=id2[]>メール 
<input onclick="checkbox_check();" type="checkbox" value="中止連絡方法はFAX" name=id2[]>FAX 
<input onclick="checkbox_check();" type="checkbox" value="中止連絡方法は郵便" name=id2[]>郵便 
 </td>
 </tr>

 <tr>
 <td colspan=2><div align=center> <br>
 下記の個人情報の取扱いにご同意の上「同意して送信」ボタンを押してください。<br>
 <input type="button" value="同意して送信" onclick="checkForm();"><!-- ●変更 2. -->
 <input name="reset" type=reset value=クリア>
 </div></td>
 </tr>
 </form>
</table>

 

</BODY></HTML>

kohhiさんのコメント
早速お返事ありがとうございます。 考えてみます。 取り急ぎ御礼まで。

kohhiさんのコメント
ありがとうございました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ