目次

オブジェクトなJavaScriptの基礎講座

買い物オーダーフォーム(ウィンドウ間データの受け渡し)

◆ はじめに

たとえば、買い物オーダーフォームのあるウィンドウで買い物して、その結果を別ウィンドウへ表示するには、ウィンドウ間のデータ受け渡しが必要です。今回は、ここのところをご説明いたしましょう!

今回は、あくまでも、ウィンドウ間データの受け渡しで、ページ間データの受け渡しではありません。尚、ページ間データの受け渡しは、別途説明したいと思います。

ウィンドウ間データの受け渡しの制御は、JavaScriptでオープンしたウィンドウ対してのみ有効で、アンカーのターゲット_blankでオープンしたウィンドウは制御できません。

JavaScriptでオープンしたウィンドウは、ウィンドウの親子関係になりますが、アンカーのターゲット_blankでのオープンでは、他人の関係になります。逆に云うと、親子関係があるウィンドウ間でしか、データの受け渡しはできません。

◆ ウィンドウ間データの受け渡しの方法

仮に、t08012.htmというページが表示されているウィンドウから、JavaScriptのopenメソッドで、kaimono.htmというページを表示する別ウインドウをオープンします。

すると、t08012.htmのウィンドウが親で、kaimono.htmのウインドウが子になり、親子関係が出来るわけです。

で、子から親を制御するには、子のhtml(JavaScript)の中で、親のオブジェクトをopenerで修飾することにより可能になります。また、親から子を制御するには、子ウインドウをオープンしたウィンドウハンドラで、子のオブジェクトを修飾することにより可能です。

では、実際の『買い物オーダーフォーム』を例に見ていきましょう...。

◆ 買い物オーダーフォーム

サンプル

ここの買い物オーダーフォームサンプルをクリックしてください。


ソース

<script type="text/javascript">
<!--

     var f1=false, f2=false, f3=false, f4=false, f5=false;
     function test_onSubmit(){
         if(document.TestForm.ID.value == ""){
            alert("お名前が入力されていません");
            return false;
         }
         if(f1 == false && f2 == false && f3 == false && f4 == false && f5 == false){
            alert("項目が入力されていません");
            return false;
         }
         
         wkmsg="mailto:" + document.TestForm.XTO.value + "?Subject=" + document.TestForm.XSUB.value;
         wkmsg = wkmsg + "&cc=" + document.TestForm.XCC.value;
         document.TestForm.action=wkmsg; 
         alert(wkmsg);
         return true;
     }
     function clear(){
         document.TestForm.ID.value = "";
         f1=false, f2=false, f3=false, f4=false, f5=false;
     }
     function sum(fm){
        wktotal = 0;
        if(fm.ShouhinA.checked){
           wktotal = eval(wktotal) + eval(fm.ShouhinA.value) * fm.ShouhinAcnt.value;
        }
        if(fm.ShouhinB.checked){
           wktotal = eval(wktotal) + eval(fm.ShouhinB.value) * fm.ShouhinBcnt.value;
        }
        if(fm.ShouhinC.checked){
           wktotal = eval(wktotal) + eval(fm.ShouhinC.value) * fm.ShouhinCcnt.value;
        }
        if(fm.ShouhinD.checked){
           wktotal = eval(wktotal) + eval(fm.ShouhinD.value) * fm.ShouhinDcnt.value;
        }
        if(fm.ShouhinE.checked){
           wktotal = eval(wktotal) + eval(fm.ShouhinE.value) * fm.ShouhinEcnt.value;
        }
        fm.goukeihyouji.value = "";
        fm.goukeihyouji.value = wktotal;
     }
// -->
</script>
<h1>買い物オーダーフォームサンプル</h1>
<form name="TestForm" METHOD="POST" ENCTYPE="text/plain" onSubmit="return test_onSubmit()">
<p>
<em>欲しい商品をクリックしてください。</em><br>
<br>
<INPUT TYPE="checkbox" NAME="ShouhinA" value="1000" onClick="f1=!f1">商品A(1000円)
数量<INPUT TYPE="text" NAME="ShouhinAcnt" SIZE=4 VALUE=""><br>
<INPUT TYPE="checkbox" NAME="ShouhinB" value="2000" onClick="f2=!f2">商品B(2000円)
数量<INPUT TYPE="text" NAME="ShouhinBcnt" SIZE=4 VALUE=""><br>
<INPUT TYPE="checkbox" NAME="ShouhinC" value="3000" onClick="f3=!f3">商品C(3000円)
数量<INPUT TYPE="text" NAME="ShouhinCcnt" SIZE=4 VALUE=""><br>
<INPUT TYPE="checkbox" NAME="ShouhinD" value="4000" onClick="f4=!f4">商品D(4000円)
数量<INPUT TYPE="text" NAME="ShouhinDcnt" SIZE=4 VALUE=""><br>
<INPUT TYPE="checkbox" NAME="ShouhinE" value="5000" onClick="f5=!f5">商品E(5000円)
数量<INPUT TYPE="text" NAME="ShouhinEcnt" SIZE=4 VALUE=""><br>
<br>
<em>お買い上げ合計</em><br>
<br>
<INPUT TYPE="button" NAME="goukei" value="合計" onClick="sum(this.form)"><br>
<INPUT TYPE="text" NAME="goukeihyouji" SIZE=10 VALUE=""><br><br>
<A HREF="#" onClick="window.open('kaimono.htm','child_htm','width=400,height=200'); return false">
買い物確認</A><br>
<br>
<em>毎度ありがとうございます</em><br>
<br>
お客様のお名前: <INPUT TYPE="text" NAME="ID" SIZE=20><br>
<br>
<em>メールタイトル(Subject)と各メールアドレス(To,Cc)を入力して下さい。</em><br>
Subject: <INPUT TYPE="text" NAME="XSUB" SIZE=50 VALUE="注文メール"><br>
To:   <INPUT TYPE="text" NAME="XTO" SIZE=50 VALUE="chaichanx@parkcity.ne.jp"><br>
Cc:   <INPUT TYPE="text" NAME="XCC" SIZE=50 VALUE="お客さまのメールアドレスをどうぞ"><br>
<br>
<br>
<INPUT TYPE="submit" VALUE="お買い上げのメール送る">
<INPUT TYPE="reset" VALUE="取り消し" onClick="clear()">
</p>
</form>

補足説明

openメソッドで、新規ウインドウを起動し、子ウィンドウとしてkaimono.htmを表示しています。

eval()関数は、JavaScriptで「+」するとデフォルトだと文字列の連結になってしまうので、数値計算するために使用しています。
this.formは、このフォームのオブジェクトを示します。(関数側で、オブジェクトのプロパティやメソッドの修飾がらくになる。

◆ 買い物オーダー結果ウィンドウ

サンプル

ここの買い物オーダーフォームサンプルをクリックして、その中の「買い物確認」をクリックください。


「買い物確認」htmlのソース

<script type="text/javascript">
<!--
var wktotalcnt=0;
var wktotalkei=0;

        document.write("<TABLE BORDER>\n");
        document.write("<TR><TH>商品</TH><TH>単価</TH><TH>数量</TH><TH>明細合計</TH></TR>\n");
        if(window.opener.document.TestForm.ShouhinA.checked){
           document.write("<TR><TD>商品A</TD><TD>1000</TD><TD>"
           + window.opener.document.TestForm.ShouhinAcnt.value 
           + "</TD><TD>" + opener.document.TestForm.ShouhinAcnt.value*1000 + "</TD></TR>\n");
           wktotalcnt = wktotalcnt + eval(window.opener.document.TestForm.ShouhinAcnt.value);
           wktotalkei = wktotalkei + window.opener.document.TestForm.ShouhinAcnt.value*1000;
        }
        if(window.opener.document.TestForm.ShouhinB.checked){
           document.write("<TR><TD>商品B</TD><TD>2000</TD><TD>"
           + window.opener.document.TestForm.ShouhinBcnt.value
           + "</TD><TD>" + opener.document.TestForm.ShouhinBcnt.value*2000 + "</TD></TR>\n");
           wktotalcnt = wktotalcnt + eval(window.opener.document.TestForm.ShouhinBcnt.value);
           wktotalkei = wktotalkei + window.opener.document.TestForm.ShouhinBcnt.value*2000;
        }
        if(window.opener.document.TestForm.ShouhinC.checked){
           document.write("<TR><TD>商品C</TD><TD>3000</TD><TD>"
           + window.opener.document.TestForm.ShouhinCcnt.value
           + "</TD><TD>" + opener.document.TestForm.ShouhinCcnt.value*3000 + "</TD></TR>\n");
           wktotalcnt = wktotalcnt + eval(window.opener.document.TestForm.ShouhinCcnt.value);
           wktotalkei = wktotalkei + window.opener.document.TestForm.ShouhinCcnt.value*3000;
        }
        if(window.opener.document.TestForm.ShouhinD.checked){
           document.write("<TR><TD>商品D</TD><TD>4000</TD><TD>"
           + window.opener.document.TestForm.ShouhinDcnt.value
           + "</TD><TD>" + opener.document.TestForm.ShouhinDcnt.value*4000 + "</TD></TR>\n");
           wktotalcnt = wktotalcnt + eval(window.opener.document.TestForm.ShouhinDcnt.value);
           wktotalkei = wktotalkei + window.opener.document.TestForm.ShouhinDcnt.value*4000;
        }
        if(window.opener.document.TestForm.ShouhinE.checked){
           document.write("<TR><TD>商品E</TD><TD>5000</TD><TD>"
           + window.opener.document.TestForm.ShouhinEcnt.value
           + "</TD><TD>" + opener.document.TestForm.ShouhinEcnt.value*5000 + "</TD></TR>\n");
           wktotalcnt = wktotalcnt + eval(window.opener.document.TestForm.ShouhinEcnt.value);
           wktotalkei = wktotalkei + window.opener.document.TestForm.ShouhinEcnt.value*5000;
        }
        document.write("<TR><TD>合計</TD><TD></TD><TD>"
        + wktotalcnt + "</TD><TD>" + wktotalkei + "</TD></TR>\n");
        document.write("</TABLE>\n");

// -->
</script>

補足説明

子ウィンドウでは自分のオブジェクトは普通にwindow.〜等で参照できますが、親ウィンドウのオブジェクトはwindow.opener.〜で参照更新ができます。
親ウィンドウは、子ウィンドウをオープンした、ウィンドウハンドラで子のオブジェクトを参照更新できます。以下参照。

<script type="text/javascript">
    var w;
    function openpage(){
          w = open("child1.htm","");
    }
    function stsmsg(){
         w.status = "ABC";                       // child1.htmのステータスバーへABCを表示
         w.document.TSTForm.msgText.value="XYZ"; // child1.htmのテキストエリアへXYZを表示
   }
  :
  :
</script>

目次