注文を受けた商品の合計価格を表示する

フォームの入力後、別のページを表示する際に、入力された項目を調べて計算させることができます。ここでは、フォームに商品ごとの注文個数を入力させ、注文を受けた商品だけを確認ページに表示する方法について考えてみましょう。

■　注文商品をテーブルに表示する処理

確認ページ（kakunin3.htm）に、呼び出し元のウィンドウを参照して、注文を受けた商品をテーブルに表示するJAVA Scriptを記述します。

k=1;
sum=0;
for(i=0;i<window.opener.document.all.oTable.tBodies.length;i++){
if(window.opener.NumOrder(i).value==""){
continue;
}
oRow = document.all.pTable.tBodies[0].insertRow();
oRow.insertCell();
oRow.insertCell();
oRow.insertCell();
oRow.insertCell();
document.all.pTable.tBodies[0].rows[k].cells[0].innerText= window.opener.document.all.oTable.tBodies[i].rows[0].cells[1].innerText
document.all.pTable.tBodies[0].rows[k].cells[1].innerText=
window.opener.document.all.oTable.tBodies[i].rows[0].cells[4].innerText
document.all.pTable.tBodies[0].rows[k].cells[2].innerText=window.opener.NumOrder(i).value
document.all.pTable.tBodies[0].rows[k].cells[4].innerText=
window.opener.document.all.oTable.tBodies[i].rows[0].cells[4].innerText*window.opener.NumOrder(i).value ;

■　テーブルの定義

確認ページに、入力された訪問者の情報と注文を受けた商品を表示するためのテーブルを定義します。

k=1;
sum=0;
sum = sum + eval(document.all.pTable.tBodies[0].rows[k].cells[4].innerText)
document.Form1.msg.value=document.Form1.msg.value+"\n"
for(j=0;j<5;j++){
document.Form1.msg.value=
document.Form1.msg.value+" "+document.all.pTable.tBodies[0].rows[k].cells[j].innerText;
}
k++;
}
document.all.sTable.tBodies[0].rows[0].cells[1].innerText=sum+"円"
document.Form1.msg.value=document.Form1.msg.value+"\n"+"合計"+sum+"円"
}

小計は、繰り返しのたびに表示させますが、合計は繰り返し処理が終わってから表示させます。

例のJAVA Scriptでは、合計価格を計算するために商品ごとに小計を求めています。小計は各商品の注文数×価格で求めることができ、この際、計算に必要な各セルの値は「innerText」プロパティで参照します。

合計価格は、小計を変数「sum」に累計していくことにより求めることができます。計算結果は合計価格を表示するセルの「innerText」プロパティに設定します。

<<<戻る