Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial

入力内容を確認するページを表示する

フォームの入力後、すぐにメールを送信するかわりに、別のページを表示させることができます。ここでは、【確認】ボタンのクリックで入力内容の確認ページを表示する方法について考えてみましょう。

■ 【確認】ボタンの配置

【確認】ボタンをクリックしたときに、確認ページを表示する関数を呼び出します。

<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"
}

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box