この使用例は、メールを使ってフォーム内容を
送信する時に、記入漏れがあれば知らせる物です。

色で書かれた文字は同色で書かれた同じ名前を使用するということです。
確認をクリックすれば実際の動きを見られます。
確認後はブラウザの "戻る" ボタンで戻ってください。

確認

  1. <HTML>
  3. <HEAD>
  5. <TITLE>フォームの内容確認</TITLE>
  7. <Script Language="JavaScript">
  9. <!--
  10. //チェック項目の変数を宣言
  11. 　　var f1=false,f2=false,f3=false,f4=false,f5=false;
  13. //START 記入項目チェック
  14. 　　function Check(){
  15. 　　　　if (document.MyForm.yourname.value==""){
  16. 　　　　　　alert("お名前が入力されていません");
  17. 　　　　　　return false;
  18. 　　　　}
  19. 　　　　if (f1==false && f2==false){
  20. 　　　　　　alert("性別の項目がチェックされていません");
  21. 　　　　　　return false;
  22. 　　　　}
  23. 　　　　if (document.MyForm.email.value==""){
  24. 　　　　　　alert("メールアドレスが入力されていません");
  25. 　　　　　　return false;
  26. 　　　　}
  27. 　　　　if (f3==false && f4==false && f5==false){
  28. 　　　　　　alert("ブラウザの項目がチェックされていません");
  29. 　　　　　　return false;
  30. 　　　　}
  31. 　　　　if(document.MyForm.message.value==""){
  32. 　　　　　　alert("メッセージが入力されていません");
  33. 　　　　　　return false;
  34. 　　　　}
  35. // END 記入項目チェック
  37. // START 記入漏れがなかったときの処理
  38. 　　　　return send();
  39. 　　}
  40. // END 記入漏れがなかったときの処理
  42. // START 送信確認処理
  43. 　　function send(){
  44. 　　　　result = confirm("送信してよろしいですか？");
  45. 　　　　if (result==true){
  46. 　　　　　　return true;
  47. 　　　　}
  48. 　　　　else{
  49. 　　　　　　return false;
  50. 　　　　}
  51. 　　}
  52. // END 送信確認処理
  54. // START ”取り消し”ボタンを押したときの処理
  55. 　　function cls(){
  56. 　　　　result = confirm("記入された物が削除されます");
  57. 　　　　if (result==true){
  58. 　　　　　　document.MyForm.reset();
  59. 　　　　}
  60. 　　}
  61. // END ”取り消し”ボタンを押したときの処理
  62. //-->
  63. </SCRIPT>
  65. </HEAD>
  67. <BODY>
  69. <H1>アンケートにお答えください</H1>
  70. <HR><B>
  71. <FORM NAME="MyForm" ACTION="mailto:your@mail.address?subject=*** test_mail ***"
  72. METHOD="POST" ENCTYPE="text/plain" onSubmit="return Check()">
  74. <INPUT TYPE="hidden" NAME="title" VALUE="*** test_mail ***">
  76. お名前：（半角カナでの記入はできません。）<BR>
  77. <INPUT TYPE="text" NAME="yourname" SIZE="45">
  78. <P>
  79. 性　別：
  80. <INPUT TYPE="radio" NAME="sex" VALUE="male" checked onClick="f1=!f1">男性
  81. <INPUT TYPE="radio" NAME="sex" VALUE="female" onClick="f2=!f2">女性
  82. <P>
  83. E-mailアドレス：<BR>
  84. <INPUT TYPE="text" NAME="email" VALUE="E-mail@mail.address" SIZE="45">
  85. <P>
  86. 持っているブラウザ<br>
  87. <INPUT TYPE="checkbox" NAME="Netscape" VALUE="On"
  88. onClick="f3=!f3">Netscape<br>
  89. <INPUT TYPE="checkbox" NAME="Explorer" VALUE="On"
  90. onClick="f4=!f4">Explorer<br>
  91. <INPUT TYPE="checkbox" NAME="Other" VALUE="On"
  92. onClick="f5=!f5">その他
  93. <p>
  94. 使用している機械<br>
  95. <SELECT NAME="Machine">
  96. <OPTION SELECTED>DOS/V
  97. <OPTION>PC-98
  98. <OPTION>PC98-NX
  99. <OPTION>Mac
  100. <OPTION>UNIX
  101. </SELECT>
  102. <P>
  103. メッセージ：（半角カナでの記入はできません。）<BR>
  104. <TEXTAREA NAME="message" ROWS="20" COLS="48"></TEXTAREA>
  105. <BR><BR>
  106. <INPUT TYPE="submit" VALUE="送　　る">
  107. <INPUT TYPE="button" VALUE="取り消し" onClick="cls()">
  109. </FORM>
  110. </B>
  112. </BODY>
  114. </HTML>



プログラムの説明です。< >で囲まれた部分は、行番号を
表しています。また、クリックすればその行へジャンプします。

<11>
 var 名前(f1など)[=値,名前=値…];　と書いてそれぞれの宣言をします｡
<14>
 関数名 Check() は、好きな名前でかまいませんが、
同じページ内に別のJavaScriptを使うときは、
同じ関数名は使えないので別々の関数名にしてください。
<15>
 MyFormの部分は､下に書くformの名前です。
<71>
 ACTION="mailto:あなたのメールアドレス?subject=メールのタイトル" と書いてください。
2バイト文字(日本語等)をメールタイトルにすると文字化けを起こす可能性があります
アルファベット及び英数字のみで記入してください。
<72>
 ENCTYPE="text/plain"と書かないと送信されてきたデータのフォーマットが
textに変換されてきません。onSubmitは送信ボタンが押されたときに使う関数を指示する物です。
SubmitCheck() は上で宣言した関数名を書いてください｡
<74>
 メールのタイトルとするものを VALUE="　" に記入してください。
<77>
 NAME="xxxx"とはメールで送られてくるときの項目名となります。
また、NAME="name" とするとNetscapeでは "Scriptエラー" となります。
<80>
 <INPUT TYPE="xxx" NAME="xxx" VALUE="xxx" checked onClick="xxxx">
XXXXとすると初期値としてチェックされている状態となります。
(動作見本では初期値のチェックはしていません)
<84>
 VALUE="xxxx"と書くとテキストボックス内に初期値として
"xxxx" が入力された状態となります。
<96>
 SELECTED に指定されている項目は、初期値として
選択されている状態になります。
<104>
 ROWでテキストエリアの横幅、COLS縦幅を指定します。



警告を出さなくて良いところは、HEAD部で

if(document.MyForm.message.value==""){
　　alert("メッセージが入力されていません");
　　return false;
}
上のようなIF文を記述しない。
または、
//　　if(document.MyForm.message.value==""){
//　　　　alert("メッセージが入力されていません");
//　　　　return false;
//　　}
上のように行の頭に // と書いてコメントにすれば大丈夫です。


back