フォームの入力後、すぐにメールを送信するかわりに、別のページを表示させることができます。ここでは、【確認】ボタンのクリックで入力内容の確認ページを表示する方法について考えてみましょう。
【確認】ボタンをクリックしたときに、確認ページを表示する関数を呼び出します。
<INPUT ID="ExecOpen" TYPE="button" VALUE="確認" onClick="ShowKakuninPage()">
ボタンがクリックされた時に確認ページを表示するための関数を記述します。<function ShowKakuninPage(){
if (customer.value == ""||addres.value == ""
||document.body.value == ""||email.value == ""){
alert("必須項目が入力されていません。");
}
else{
window.open("kakunin.htm","確認","");
}
}通常、フォームに入力された内容の確認にはCGIを使用して表示することがほとんどです。しかし、使用しているプロバイダがCGIの利用を制限している場合や、CGIの知識がない場合など、例のようにJAVA Scriptを使用することでも確認ページの表示を行うことができます。
内容確認をする場合、「locatipn」プロパティは使用できません。これはJAVA Scriptを使用して確認ページを表示する場合、「location」プロパティで別のページに切り替えてしまうと、入力されていた情報が取得できなくなるためです。この場合、フォームに入力された内容を表示するには、「open」メソッドを使用して新しいウィンドウを開きます。
確認ページ(kakunin.htm)が表示される際に、確認内容を表示するための関数を呼び出す処理を、確認ページ内に記述します。
<BODY onLoad="settext()">呼び出し元のウィンドウを参照して、各項目で入力された内容を表示するJAVA Scriptを確認ページヘッダー内に記述します。
function settext(){
document.Form1.msg.value="\n"+"name:"+window.opener.customer.value+"\n"+
"email:"+window.opener.email.value+"\n"+
"addres:"+window.opener.addres.value+"\n"+
"body:"+window.opener.body.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;
document.all.oTable.tBodies[0].rows[3].cells[1].innerText=window.
opener.body.value;
}確認内容を表示する際は、「opener」プロパティで、元のウィンドウに入力されている値を参照することができます。「opener」プロパティで元のウィンドウのテーブルに表示されている値を参照して現在のウィンドウのテーブルに表示するには、次のような書式で記述します。
document.all.現在のウィンドウのテーブル.表示を行うセル指定.innerText
=window.opener.document.all.元のウィンドウのテーブル.値の参照を行うセル指定.innerText【送信】ボタンが押された時に、確認ページを表示しているウィンドウを閉じ、呼び出し元のウィンドウに送信完了のページを表示するように、確認ページヘッダー内に設定します。
function CloseWin(){
setTimeout("window.close()",1000)
window.opener.location ="thankyou.htm"
}