サイトの入力チェックについての質問です。

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

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/06/28 11:02:41
  • 終了:2012/07/03 20:04:44

ベストアンサー

id:ku__ra__ge No.1

ku__ra__ge回答回数118ベストアンサー獲得回数402012/06/28 12:59:13

ポイント200pt

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>
id:kohhi

早速お返事ありがとうございます。
考えてみます。
取り急ぎ御礼まで。

2012/06/28 20:20:33
id:kohhi

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

2012/07/03 20:04:34

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません