フォームの入力後、ページを表示する際に、入力された項目だけをページに表示させることができます。ここでは、フォームに商品ごとの注文個数を入力させ、注文を受けた商品だけを確認ページに表示する方法について考えてみましょう。
フォームに商品の注文個数を入力するテキスト領域を配置するための定義を行います。
<TD><INPUT ID="NumOrder" NAME="Od" TYPE="text" SIZE="4" STYLE="ime-mode:disabled"></TD>
確認ページ（kakunin2.htm）に、入力された訪問者の情報と注文を受けた商品を表示するためのテーブルを定義します。
<TABLE ID="pTable" BORDER COLS=2 WIDTH="200" >
<TR>
<TD>商品</TD>
<TD>価格</TD>
<TD>注文数</TD>
</TR>
</TABLE>確認ページが表示される際に、テーブルに注文を受けた商品を表示する関数を呼び出す処理を設定します。
<BODY onLoad="settext()">呼び出し元のウィンドウを参照して、各項目で入力された内容を表示するJAVA Scriptを確認ページヘッダー内に記述します。
function settext(){
document.Form1.msge.value="\n"+"name:"+window.opener.customer.value+"\n"+
"email:"+window.opener.email.value+"\n"+
"addres:"+window.opener.addres.value;
document.all.oTable.tBodies[0].rows[0].cells[1].innerText=window.opener.customer.value;
document.all.oTable.tBodies[0].rows[1].cells[1].innerText=window.opener.email.value;
document.all.oTable.tBodies[0].rows[2].cells[1].innerText=window.opener.addres.value;
k=1;
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();
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[3].innerText
document.all.pTable.tBodies[0].rows[k].cells[2].innerText=window.opener.NumOrder(i).value
document.Form1.msge.value=
document.Form1.msge.value+"\n"
for(j=0;j<3;j++){
document.Form1.msge.value=
document.Form1.msge.value+" "+document.all.pTable.tBodies[0].rows[k].cells[j].innerText;
}
k++;
}
}確認ページでは、事前にテーブルの見出し行だけが定義されているので、ページを表示する際に、注文を受けた商品の数だけ行を追加する必要があります。テーブルに行を追加するには「incertCell」メソッドを使用します。
oRow = document.all.pTable.tBodies[0].insertRow();
oRow.insertCell();「insertCell」メソッドで追加したセルには、他のセルと同様に「innerText」プロパティを使用して値を設定・参照することができます。
行を削除する場合は「deleteRow」メソッド、セルを削除する場合は「deleteCell」メソッドを使用します。
