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

マんタ
2020/05/27 06:57

いよいよ　JavaScript　第7章　最終章でございますｗｗｗ

今回はフォーム処理していきます

その前にフォームの基礎知識を・・・・

フォームはWebページ上に入力欄や選択肢を配置して見る人が内容を送信できるようにした画面のことです。

利用することで、商品の注文画面やアンケート、の入力画面が作れますねwww

内容を送信する方法は

次のようなものがありますね。

wwwサーバのCGIプログラムで処理

ユーザーがフォームの内容を入力し、submitボタンをクリックすることで、wwwサーバのCGIプログラムが動きCGIプログラムに従い処理されます。

ユーザーのメールソフトで送信

ユーザーがフォームの内容を入力し、submitボタンをクリックすることで、ユーザーのパソコンのメールソフトが起動し、HTMLファイルで指定されているメールアドレスに送られる。ブラウザやメールソフトの環境によっては正しく動作しないこともあるのでCGIプログラムで処理するほうが確実です。

CGIプログラムにつぃてはこちらを見たほうが早いかもしれません_(_^_)_

CGIとJavaScript

フォームの内容を送信するときは、wwwサーバのCGIプログラムを介して入力漏れやミスをチェックしますが、通信回線の状況により時間がかかることがあります。

JavaScriptを使えばユーザーのブラウザ上で簡単にチェックができるのでサーバーの負荷を軽減できます。

今回はここまででおしまいにしておきます。

まだ未完成ですが一応小計を自動的に表示するプログラムの一部を載せておきます。

&lt;script type="text/javascript"&gt;
&lt;!--
function ocha1(){
 document.form1.sum1.value=1000*document.form1.na1.selectedIndex;
 document.form1.moto.value=parseint(document.form1.sum1.value)+parseint (document.form1.sum2.value) +parseint (document.form1.sum3.value);
 }
function ocha2(){
 document.form1.sum2.value=200*document.form1.na2.selectedIndex;
 document.form1.moto.value=parseint(document.form1.sum1.value)+parseint (document.form1.sum2.value) +parseint (document.form1.sum3.value);
 }
function ocha3(){
 document.form1.sum3.value=500*document.form1.na3.selectedIndex;
 document.form1.moto.value=parseint(document.form1.sum1.value)+parseint (document.form1.sum2.value) +parseint (document.form1.sum3.value);
 }
--&gt;
&lt;/script&gt;

 &lt;p&gt;お茶一覧&lt;/p&gt;  
       &lt;p&gt;合計&lt;input name="moto"type="text"value="0"size="20"&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;5&lt;/option&gt;
&lt;option value="Hou3"&gt;10&lt;/option&gt;
&lt;option value="Hou4"&gt;15&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;200円&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;5&lt;/option&gt;
&lt;option value="m3"&gt;10&lt;/option&gt;
&lt;option value="m4"&gt;15&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;5&lt;/option&gt;
&lt;option value="jas3"&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;/table&gt;
_&lt;/tr&gt;_
&lt;table summary="お客様情報の入力"&gt;

____________________________________________________________________________________________________________________
&lt;/head&gt;
&lt;body&gt;
&lt;form name="form1"&gt;
&lt;script type="text/javascript" src="script.js"&gt;
&lt;/script&gt;
&lt;div class="page"&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;