教育・子育て

JavaScript　第7章　フォームを処理するプログラム④終

マんタ
2020/05/30 04:58

いよいよJavaScriptも終　です。

今回はチェックボックスの入力漏れのチェックプログラムを記述するところから、

ついでにラジオボタンの選択漏れチェックとリセット時の確認メッセージのプログラムも記述しちゃいますね。

今回はちょっと面倒なのでTeraPadで説明します。

function check(){
 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
ここに下のラジオボタンの選択漏れチェックのプログラムが入ります。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
　　　if(document.form1.namae.value==""){
  alert("お名前を入力してください。");
  document.form1.namae.focus();
  return false;
  }
 else if(document.form1.yuubin.value==""){
  alert("郵便番号を入力してください。");
  document.form1.yuubin.focus();
  return false;
  }
 else if(document.form1.jusyo.value==""){
  alert("ご住所を入力してください。");
  document.form1.jusyo.focus();
  return false;
  }
 else if(document.form1.denwa.value==""){
  alert("電話番号を入力してください。");
  document.form1.denwa.focus();
  return false;
  }
 else if(document.form1.mail.value==""){
  alert("メールアドレスを入力してください。");
  document.form1.mail.focus();
  return false;
  }
 else{
  return true;
  }
 }

Content image

この部分がラジオボタンの選択漏れチェックのプログラム

function kakunin(){
 if(confirm("入力した内容をクリアしますか?")==true){
  return true;
  }
 else{
  return false;
  }
 }

リセット時に確認メッセージを表示するプログラム

HTMLファイル
&lt;p&gt;お客様情報入力欄。&lt;/p&gt;
&lt;table summary="お客様情報入力欄"&gt;
&lt;tr&gt;
&lt;th class="left"&gt;支払方法(必須デス)&lt;/th&gt;
&lt;td&gt;
&lt;label for="dai"&gt;&lt;input id="dai" type="radio" name="shiharai" value="daibiki"&gt;代金引換&lt;/label&gt;
&lt;label for="gin"&gt;&lt;input id="gin" type="radio" name="shiharai" value="furikomi"&gt;銀行振込&lt;/label&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="left"&gt;お名前(必須デス)&lt;/th&gt;
&lt;td&gt;&lt;input type="text" name="namae" size="40" value=""&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="left"&gt;郵便番号(必須デス)&lt;/th&gt;
&lt;td&gt;(例:604-8225)&amp;amp;amp;amp;nbsp;半角で入力&lt;br&gt;
〒&lt;input type="text" name="yuubin" size="10" maxlength="8" value=""&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="left"&gt;ご住所(必須デス)&lt;/th&gt;
&lt;td&gt;&lt;input type="text" name="jusyo" size="60" value=""&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="left"&gt;電話番号(必須デス)&lt;/th&gt;
&lt;td&gt;(例:012-345-6789)&amp;amp;amp;amp;nbsp;半角で入力&lt;br&gt;
&lt;input type="text" name="denwa" size="20" maxlength="13" value=""&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="left"&gt;メールアドレス&lt;/th&gt;
&lt;td&gt;&lt;input type="text" name="mail" size="40" value=""&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="left"&gt;備考&lt;/th&gt;
&lt;td&gt;&lt;textarea name="memo" cols="50" rows="5"&gt;ご意見ご要望をご記入ください。&lt;/textarea&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;p&gt;入力漏れ・入力ミス確認!!!!「注文」ボタンをクリックしてください。&lt;/p&gt;
&lt;p&gt;&lt;input type="submit" value="注文"&gt;&amp;amp;amp;amp;nbsp;&lt;input type="reset" value="リセット"&gt;&lt;/p&gt;

はこんなかんじです。

まずは、テキストボックスの入力漏れのチェックのポイントから

警告メッセージを表示する
alert(文字列
警告メッセージ)を表示する警告メッセージのダイアログボックスは指定した文字列と　OK　が表示されます。OKをクリックすると次の処理が実行されます。

戻り値を返す
return 値
処理結果を値として返す。この値を戻り値という。

プログラムの説明

function check(){

　　　　　｝

関数check(){を宣言

 alert("郵便番号を入力してください。");
  return false;
  }

nameが空欄の場合　falseを返すという意味です。

return true;

nameが空欄じゃない場合処理Bが実行されます

onsubmit="return check()"
注文ボタンがクリックされたとき名前のボックスにデータが入力されているかを見て
入力されていればフォームは送信され、入力されていなければ名前を入力してくださいと表示されます。
onsubmit要素は必ずform要素に記述。それ以外に記述しても正しく反応しません。

テキストボックスにフォーカスを移動
document.フォーム名.テキストボックス名.focus()
指定したテキストボックスにフォーカスを移動する。

ラジオボタンのチェックの有無を返す
document.フォーム名.ラジオボタン名[番号].checked
ラジオボタンのチェックの有無を返します。
チェックが付いてるときはtrue、ついていないときはfalseを返す
[]内にはラジオボタンの番号を入力。
0からカウントし1つめが0、2つめが1です。

論理演算子

ifの命令文の中で&&||の論理演算子を使う。

＆＆　2つの値がtrue場合trueを返す。AND条件の時に使う。

||　　2つの値がtrue場合trueを返す。OR条件の時に使う。

最期にリセット時の確認メッセージ

function kakunin(){
 if(confirm("入力した内容をクリアしますか?")==true){
  return true;
  }
 else{
  return false;
  }
 }

関数kakunin(）宣言

条件を満たす場合はconfirm("入力した内容をクリアしますか?")==true)を実行し、

満たさない場合はreturn false;を実行。

onreset="return kakunin()"

これも先ほどのと同じくform要素に記述。それ以外の要素に記述しても正しく動作しないので。

確認メッセージの表示
if(confirm("文字列)==true){
処理A
}
else{
処理B　　
}
確認メッセージの表示をします。確認メッセージのダイアログボックスは指定した文字列とOKとキャンセルが表示されます。

プログラムと起動画面

揃いが微妙ですが‥‥

Content image

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
&lt;script type="text/javascript"&gt;
&lt;!--
function ocha1(){
 document.form1.sum1.value=1000*document.form1.na1.selectedIndex;
 document.form1.gou.value=parseInt(document.form1.sum1.value)+parseInt(document.form1.sum2.value)+parseInt(document.form1.sum3.value);
 document.form1.zei.value=parseInt(document.form1.gou.value) *0.1
  document.form1.All.value= parseInt(document.form1.gou.value)+parseInt(document.form1.zei.value)+parseInt(document.form1.sou.value);
 }
function ocha2(){
 document.form1.sum2.value=300*document.form1.na2.selectedIndex;
 document.form1.gou.value=parseInt(document.form1.sum1.value)+parseInt(document.form1.sum2.value)+parseInt(document.form1.sum3.value);
 document.form1.zei.value=parseInt(document.form1.gou.value) *0.1
  document.form1.All.value= parseInt(document.form1.gou.value)+parseInt(document.form1.zei.value)+parseInt(document.form1.yusou.value);

   
 }
function ocha3(){
 document.form1.sum3.value=500*document.form1.na3.selectedIndex;
 document.form1.gou.value=parseInt(document.form1.sum1.value)+parseInt(document.form1.sum2.value)+parseInt(document.form1.sum3.value);
 document.form1.zei.value=parseInt(document.form1.gou.value) *0.1
  document.form1.All.value= parseInt(document.form1.gou.value)+parseInt(document.form1.zei.value)+parseInt(document.form1.sou.value);
 }
function kei4(){
 switch(document.form1.otodoke.selectedIndex){
  case 0:document.form1.sou.value=0;break;
  case 1:document.form1.sou.value=700;break;
  case 2:document.form1.sou.value=600;break;
  case 3:document.form1.sou.value=500;break;
  case 4:document.form1.sou.value=500;break;
  case 5:document.form1.sou.value=450;break;
  case 6:document.form1.sou.value=500;break;
  case 7:document.form1.sou.value=600;break;
  case 8:document.form1.sou.value=700;break;
  }
 document.form1.All.value=parseInt(document.form1.gou.value)+parseInt(document.form1.zei.value)+parseInt(document.form1.sou.value);
 }
function check(){
 if(document.form1.shiharai[0].checked==false&amp;amp;amp;&amp;amp;amp;document.form1.shiharai[1].checked==false){
  alert("支払方法を選択してください。");
  return false;
  }  
 else if(document.form1.namae.value==""){
  alert("お名前を入力してください。");
  document.form1.namae.focus();
  return false;
  }
 else if(document.form1.yuubin.value==""){
  alert("郵便番号を入力してください。");
  document.form1.yuubin.focus();
  return false;
  }
 else if(document.form1.jusyo.value==""){
  alert("ご住所を入力してください。");
  document.form1.jusyo.focus();
  return false;
  }
 else if(document.form1.denwa.value==""){
  alert("電話番号を入力してください。");
  document.form1.denwa.focus();
  return false;
  }
 else if(document.form1.mail.value==""){
  alert("メールアドレスを入力してください。");
  document.form1.mail.focus();
  return false;
  }
 else{
  return true;
  }
 }
function kakunin(){
 if(confirm("入力した内容をクリアしますか?")==true){
  return true;
  }
 else{
  return false;
  }
 }
--&gt;
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div class="mein"&gt;
&lt;noscript&gt;
&lt;/noscript&gt;
&lt;form name="form1"onsubmit="return check()" onreset="return kakunin()&gt;
&lt;title&gt;おちゃ～～～注文書&lt;/title&gt;
&lt;p&gt;お茶一覧&lt;/p&gt;  

&lt;table summary="数量"&gt;
 &lt;caption&gt;お茶&lt;/caption&gt;
&lt;tr&gt;
&lt;th&gt;ナンバー&lt;/th&gt;
&lt;th&gt;商品名&lt;/th&gt;
&lt;th&gt;単価&lt;/th&gt;
&lt;th&gt;数量&lt;/th&gt;
&lt;th&gt;小計&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class="right"&gt;01&lt;/td&gt;
&lt;td&gt;ほうじ茶&lt;/td&gt;
&lt;td class="right"&gt;1000円&lt;/td&gt;
&lt;td class="right"&gt;&lt;select name="na1" onchange="ocha1()"&gt;
&lt;option value="Hou0"selected&gt;0&lt;/option&gt;
&lt;option value="Hou1"&gt;1&lt;/option&gt;
&lt;option value="Hou2"&gt;2&lt;/option&gt;
&lt;option value="Hou3"&gt;3&lt;/option&gt;
&lt;option value="Hou1"&gt;4&lt;/option&gt;
&lt;option value="Hou2"&gt;5&lt;/option&gt;
&lt;option value="Hou3"&gt;6&lt;/option&gt;
 &lt;option value="Hou1"&gt;7&lt;/option&gt;
&lt;option value="Hou2"&gt;8&lt;/option&gt;
&lt;option value="Hou3"&gt;9&lt;/option&gt;
&lt;option value="Hou4"&gt;10&lt;/option&gt;&lt;/select&gt;個&lt;/td&gt;
&lt;td class="right"&gt;&lt;input name="sum1"type="text"value="0"size="20"class="right"&gt;円&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td class="right"&gt;02&lt;/td&gt;
&lt;td&gt;麦茶&lt;/td&gt;
&lt;td class="right"&gt;300円&lt;/td&gt;
&lt;td class="right"&gt;&lt;select name="na2" onchange="ocha2()"&gt;
&lt;option value="m0"selected&gt;0&lt;/option&gt;
&lt;option value="m1"&gt;1&lt;/option&gt;
&lt;option value="m2"&gt;2&lt;/option&gt;
&lt;option value="m3"&gt;3&lt;/option&gt;
 &lt;option value="m4"&gt;4&lt;/option&gt;
&lt;option value="m5"&gt;5&lt;/option&gt;
&lt;option value="m6"&gt;6&lt;/option&gt;
 &lt;option value="m7"&gt;7&lt;/option&gt;
&lt;option value="m8"&gt;8&lt;/option&gt;
&lt;option value="m9"&gt;9&lt;/option&gt;
&lt;option value="m10"&gt;10&lt;/option&gt;&lt;/select&gt;個&lt;/td&gt;
&lt;td class="right"&gt;&lt;input name="sum2"type="text"value="0"size="20"class="right"&gt;円&lt;/td&gt;
&lt;/tr&gt;
   &lt;tr&gt;
&lt;td class="right"&gt;03&lt;/td&gt;
&lt;td&gt;ジャスミン茶&lt;/td&gt;
&lt;td class="right"&gt;500円&lt;/td&gt;
&lt;td class="right"&gt;&lt;select name="na3" onchange="ocha3()"&gt;
&lt;option value="jas0"selected&gt;0&lt;/option&gt;
&lt;option value="jas1"&gt;1&lt;/option&gt;
&lt;option value="jas2"&gt;2&lt;/option&gt;
&lt;option value="jas3"&gt;3&lt;/option&gt;
 &lt;option value="jas4"&gt;4&lt;/option&gt;
&lt;option value="jas5"&gt;5&lt;/option&gt;
&lt;option value="jas6"&gt;6&lt;/option&gt;
 &lt;option value="jas7"&gt;7&lt;/option&gt;
&lt;option value="jas8"&gt;8&lt;/option&gt;
&lt;option value="jas9"&gt;9&lt;/option&gt;
&lt;option value="jas10"&gt;10&lt;/option&gt;&lt;/select&gt;個&lt;/td&gt;
&lt;td class="right"&gt;&lt;input name="sum3"type="text"value="0"size="20"class="right"&gt;円&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th colspan="4" class="right"&gt;合計&lt;/th&gt;
&lt;td class="right"&gt;&lt;input name="gou" type="text" value="0" size="18" class="right"&gt;円&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th colspan="4" class="right"&gt;税(10%)&lt;/th&gt;
&lt;td class="right"&gt;&lt;input name="zei" type="text" value="0" size="18" class="right"&gt;円&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th colspan="2" class="right"&gt;届け先&lt;/th&gt;
&lt;td class="right"&gt;&lt;select name="otodoke" onchange="kei4()"&gt;
&lt;option value="sentaku"&gt;地域選択&lt;/option&gt;
&lt;option value="hokkaidou"&gt;北海道&lt;/option&gt;
&lt;option value="touhoku"&gt;東北&lt;/option&gt;
&lt;option value="kantou"&gt;関東&lt;/option&gt;
&lt;option value="chuubu"&gt;中部&lt;/option&gt;
&lt;option value="kansai"&gt;関西&lt;/option&gt;
&lt;option value="chuugoku"&gt;中国&lt;/option&gt;
&lt;option value="shikoku"&gt;四国&lt;/option&gt;
&lt;option value="kyuusyu"&gt;九州&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;

&lt;th class="right"&gt;送料&lt;/th&gt;
&lt;td class="right"&gt;&lt;input type="text" name="sou" value="0" size="18" class="right"&gt;円&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th colspan="4" class="right"&gt;総合計&lt;/th&gt;
&lt;td class="right"&gt;&lt;input type="text" name="All" value="0" size="18" class="right"&gt;円&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;p&gt;お客様情報入力欄。&lt;/p&gt;
&lt;table summary="お客様情報入力欄"&gt;
&lt;tr&gt;
&lt;th class="left"&gt;支払方法(必須デス)&lt;/th&gt;
&lt;td&gt;
&lt;label for="dai"&gt;&lt;input id="dai" type="radio" name="shiharai" value="daibiki"&gt;代金引換&lt;/label&gt;
&lt;label for="gin"&gt;&lt;input id="gin" type="radio" name="shiharai" value="furikomi"&gt;銀行振込&lt;/label&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="left"&gt;お名前(必須デス)&lt;/th&gt;
&lt;td&gt;&lt;input type="text" name="namae" size="40" value=""&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="left"&gt;郵便番号(必須デス)&lt;/th&gt;
&lt;td&gt;(例:604-8225)&amp;amp;nbsp;半角で入力&lt;br&gt;
〒&lt;input type="text" name="yuubin" size="10" maxlength="8" value=""&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="left"&gt;ご住所(必須デス)&lt;/th&gt;
&lt;td&gt;&lt;input type="text" name="jusyo" size="60" value=""&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="left"&gt;電話番号(必須デス)&lt;/th&gt;
&lt;td&gt;(例:012-345-6789)&amp;amp;nbsp;半角で入力&lt;br&gt;
&lt;input type="text" name="denwa" size="20" maxlength="13" value=""&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="left"&gt;メールアドレス&lt;/th&gt;
&lt;td&gt;&lt;input type="text" name="mail" size="40" value=""&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th class="left"&gt;備考&lt;/th&gt;
&lt;td&gt;&lt;textarea name="memo" cols="50" rows="5"&gt;ご意見ご要望をご記入ください。&lt;/textarea&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;p&gt;入力漏れ・入力ミス確認!!!!「注文」ボタンをクリックしてください。&lt;/p&gt;
&lt;p&gt;&lt;input type="submit" value="注文"&gt;&amp;amp;nbsp;&lt;input type="reset" value="リセット"&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

JavaScript終　完結

Content image

ここまでご覧いただきありがとうございました。

いや、　なかなかに長かった気が・・・・・・・・・・・

ここまでやってこれたのも皆さんが見てくださったおかげです。

つぎはなににしようかな？

BYマんタ

JavaScript Webページプログラミング JavaScript完結 topic-education-parenting

0人がサポートしています

獲得ALIS:

24.04 ALIS

0.00 ALIS

マんタ
@25kit6

遂に！今年最後の月！！！気温もかなり下がって最低気温一桁だけど、まだなんとか耐えられる！年内に雪降らないトいいけどね(￣▽￣)

投稿者の人気記事

ありがとうございます。

Like token

Tip token

今日も暑い（т-т）

Like token

Tip token

雨が辛いｗｗｗ

Like token

Tip token

コメントする

コメントする

こちらもおすすめ！

教育・子育て

【科学（化学）】進化に必要だった猛毒のガス～酸素～

602.20 ALIS 25.63 ALIS

無料案内所という職業

596.41 ALIS 84.20 ALIS

Bitcoin史〜0.00076ドルから6万ドルへの歩み〜

799.98 ALIS 947.13 ALIS

教育・子育て

【科学】アリストテレスにデカルトにニュートンに…みな光に取り憑かれた～光学の発展～

153.37 ALIS 23.75 ALIS

他カテゴリ

防犯意識マーキング下書き供養④

133.78 ALIS 24.07 ALIS

他カテゴリ

テレビ番組で登録商標が「言えない」のか考察してみる

389.10 ALIS 26.20 ALIS

NFT解体新書・デジタルデータをNFTで販売するときのすべて【実証実験・共有レポート】

681.47 ALIS 121.79 ALIS

Eye catch

約２年間ブロックチェ－ンゲームをして

1.10k ALIS 61.20 ALIS

他カテゴリ

ALISのシステム概観

0.00 ALIS 5.00 ALIS

ジョークコインとして出発したDogecoin（ドージコイン）の誕生から現在まで。注目される非証券性🐶

1.44k ALIS 38.31 ALIS

他カテゴリ

オランダ人が語る大麻大国のオランダ

66.13 ALIS 46.20 ALIS

続・NFT解体新書・デジタルデータをNFTで販売するときのすべて【実証実験・共有レポート】

230.43 ALIS 6.37 ALIS