通販：注文書（メール）

注文確認画面の作成

注文が確定したら確認画面が必要になります。
ここでは、同じ画面内に確認画面を用意して、金額を確認後にメールの画面に進みます。

実例（p7-4.html）

フォームに確認画面を追加

商品一覧の下に確認画面を作ります。

フォームの内側、テーブルの下に<div>タグと<textarea>タグを追加します。<textarea>タグにはreadonly属性を付けておきます。

		<tr>
			<th>合計</th>
			<th><input type="button" value="注文確認" onClick="check_order()"></th>
			<td class="t_right"><span id="total_price"></span></td>
			<td>&nbsp;</td>
		</tr>
	</table>
	<div class="menutitle">注文確認</div>
	<textarea name="order_text" cols="90" rows="10" readonly id="order_text"></textarea>
	</form>
</div>

「注文確認」ボタンを使わずとも、自動的に合計金額が計算されているので、ボタンの役割を変更し、ユーザー関数check_order()を呼びだし、注文内容のとりまとめを行い、メール送信の内容を確認画面に表示します。

CSSの追加

<textarea>の幅をmainmenu（ID）に合わせて調節します。

order_text（ID）を追加します。

<style type="text/css">
.price {
	text-align: right;
}
.number {
	text-align: right;
}
#order_text {
	width: 494px;
}
</style>

スクリプトの追加

function check_order() {
	var t,n;
	
	//変数初期化
	t = "";
	tprice = 0;
	
	//注文の取得と再計算
	for (n=0;n<sid.length;n++) {
		//個数のある商品のみ
		if (snumber[sid[n]+"n"] > 0) {
			t += "[" + sid[n] + "]\t" + sprice[sid[n]] + "円×" + snumber[sid[n]+"n"] + "個\n";
			tprice += sprice[sid[n]] * snumber[sid[n]+"n"];
		}
	}
	
	//合計金額の表示
	if (tprice > 0) {
		t += "(合計)" + tprice + "円";
	} else {
		alert("注文された商品がありません。必要な個数を確認してください。");
	}
	
	//確認画面の出力
	document.order.order_text.value = t;
}

変数tには、確認画面に出力する内容を順次入れて行きます。
変数tpriceは合計金額が入っていますが、ここでもう一度計算しなおしています。

for文では、フォームから価格と個数を取得して、変数tに文字列を追加し、変数tpriceに金額を加算しています。

今回は確認画面に商品名が出て来ません。これは配列変数に商品名を準備してないためです。
事前に商品管理のデータベースを考えて置くと、データを別ファイルから読み込ませることも可能です。（データベースの作成を参照）

商品名を表示する方法

商品名を表示する方法を提示しておきますが、実際にはこの作業をせずに次の段階へと進みます。

フォームから商品名を取得することができないため、データベースが必要になります。
そこで、データの入った配列変数を事前に用意することになります。

パターン１

配列変数に商品名だけを順に入れます。

//商品名
sname = new Array("サクラソフトクリーム","さくらかき氷","あんこぼたもち","きなこぼたもち","どら焼き","三色団子","みたらし団子","ぼたもち2種類セット","どら焼き10個セット","お団子セット（2種類各5本）");

上記の方法では、表の順番を変えると、配列変数snameの中も順番を変更しなくてはなりません。
これは変数snameの要素が番号で割り当てられているため、順番が重要です。

パターン２

配列変数に要素名を指定して、商品名を入れます。

//商品名
sname = new Array();
sname["s001"] = "サクラソフトクリーム";
sname["s002"] = "さくらかき氷";
sname["w001"] = "あんこぼたもち";
sname["w002"] = "きなこぼたもち";
sname["w003"] = "どら焼き";
sname["w004"] = "三色団子";
sname["w005"] = "みたらし団子";
sname["w006"] = "ぼたもち2種類セット";
sname["w007"] = "どら焼き10個セット";
sname["w008"] = "お団子セット（2種類各5本）";

要素名にあたる商品コードは、配列変数sidで管理しているため、それを使って呼び出すことができます。順番に連続で処理する場合は、配列変数sidの順番が影響します。
配列変数check_order()の一部を変更して商品名を表示させます。

	//注文の取得と再計算
	for (n=0;n<sid.length;n++) {
		//個数のある商品のみ
		if (snumber[sid[n]+"n"] > 0) {
			t += "[" + sid[n] + " " + sname[sid[n]] + "]\t" + sprice[sid[n]] + "円×" + snumber[sid[n]+"n"] + "個\n";
			tprice += sprice[sid[n]] * snumber[sid[n]+"n"];
		}
	}

このように事前に配列変数を利用するならば、他のデータも同様にするべきでしょう。管理するデータをできるだけ同じ場所に置く方が見やすくて、手間も小さくなります。

実例（p7-4-2.html）

上記の作業によって、確認画面に商品名が表示されるようになりますが、名前の長さは様々で統一した大きさにはならないため、確認画面で一行の幅に統一感がなくなります。
これを見栄え良くするには、テーブルを書き出して、それぞれの項目を同じ列で表示することになります。
ただし、今回はメールで送信することが目的のため、コピーしやすいようにテキストエリアを使っています。簡易的な表現に留めておきます。

次のページへ

戻る