• ベストアンサー

サブウィンドウに値を渡して、CGIにPOSTしたい

お世話になります。 javascript初心者です。 題名のようにPOSTした値をポップアップで確認して、CGIに渡そうとしています。 親ウィンドウのoya.htmは、 <html> <head><title>submitの確認をポップアップで確認</title> <script type="text/javascript"> <!-- function fnWinOpen() { window.open("pop_post.htm", "win", "width=150,height=20"); } //--> </script> </head> <body> <form name="Form_name"> <input type="text" name="Data" /> <input type="button" value="送信" onClick="fnWinOpen()"> </form> </body> </html> でして、 サブウィンドウのpop_post.htmは、 <html> <head><title>submitの確認をポップアップで確認</title> <script type="text/javascript"> <!-- function fnStart() { document.getElementById("SubData").value = window.opener.Form_name.Data.value; } function job( url ) { 後はこの関数を完成さればと考えている } //--> </script> </head> <body onload="fnStart()"> <form method="post" > <input type="text" id="SubData" /> <input type="button" name="sub" value="送信job" onClick="job('thanks.cgi')"> </form> </body> </html> とやっています。 サブウィンドウに値を表示させることはできました。 後は、サブウィンドウの方の job関数で、submitするにはどうすればようのでしょう？ 最後に値が渡されるCGI、thanks.cgiでは、そのデータを登録させ、「ありがとうございました」を表示させるものです。 また、そもそもこの方向でうまくできますか？ よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • Yohjira
  • ベストアンサー率66% (14/21)
回答No.4

親ウィンドウのformでsubmit（ANo.3の方の回答に書かれている方法）が一番わかりやすいと思います。 まずはANo.1のお礼のスクリプトが理解してみて、 何が悪いのかを確認して、ANo.3の方のやり方を試してみるといいのではないでしょうか。 サブウィンドウが動いている間、親ウィンドウが操作できないようにする処理もあったほうがよさそうですね。 （必須ではないと思いますが） 今までやったことがある方法ですが、 方法１：親ウィンドウにフォーカスが移動したら、強制的にサブウィンドウを閉じる 方法２：showModalDialogを使ってサブウィンドウを開く ダイアログが開いている間は親画面を操作することができなくなりますが、 ちょっと処理が特殊になるので、難しいと思うならお勧めしません。

gahosky
質問者

お礼

基本から積み上げて行きたいと思います。 ありがとうございました。

gahosky
質問者

補足

最後に聞きたいのですが、javacriptのおすすめの参考書やリファレンス本なんかあります？

その他の回答 (3)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.3

＃2です。 ＞サブウィンドウは閉じて、GCIからの出力は、親ウィンドウでされるということがやりたいです。 ANo1にある通り、通常はformタグ内でtargetを指定すればそのwindowが対象となりますが、親windowの場合（最初に開いたwindow）だと名前が設定いないので、指定が難しいようです。（というか、私が知らないだけ） target='' や forms[0].target = window.opener.name などで試して見ましたが見事に失敗しました。 別windowを開いて、親・サブウィンドウとも閉じてしまうか、少し複雑になりますが、親ウィンドウのformでsubmitするという手ぐらいしか思いつきません。 簡単な指定方法があるかも知れませんが、とりあえず親ウィンドウでsubmitするとして・・・ 1）親のformのmethod、actionを設定しておく。 2）サブウィンドウのフォームの値（ご質問例の場合は1個）を、親ウィンドウのフォームへコピー 　（サブ側でユーザが値を変更している可能性があるので）　 　fnStart() 　の処理の逆を行えばＯＫです。 3）親ウィンドウのフォームをサブミット 　window.opener.Form_name.submit();　などの方法による 4)サブウィンドウを閉じる。 　window.close(); 　（きちんと確認をしていませんが、親ウィンドウが開いたウィンドウを、子ウィンドウが閉じるので、確認ダイアログがでるかも知れません。ちなみにOperaでは出ませんでした。） ・・・と書いてみましたが、子ウィンドウのボタンを押す前に、親ウィンドウを操作して別の表示にされてしまっていたら、エラー出まくりになりそうですね。 最初に親ウィンドウの表示内容の確認もしておかないといけないかも。 結局、親子でデータの往復をしているので、わざわざ子ウィンドウを開く意味が今いち不明ですが・・・

gahosky
質問者

お礼

私は基本ができてないので、応用が理解できないのだと思います。 丁寧に教えて頂きましてありがとうございました。

gahosky
質問者

補足

子ウィンドウを開く理由は、送信データの確認だけのためにCGIを動かしたくないからです。 最後に聞きたいのですが、javascriptの参考書やリファレンス本で定番のものはあります？

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

CGIからの出力をサブウィンドウで受けるということでいいんですよね？ ＜１＞（ANo1の回答と同じですが） job()　でdocument.forms[0].submit();　ですが、このままだとactionが不明なので、formタグで <form action="～～thanks.cgi" method="post" > などと指定しておく必要があります。 cgiの呼び出しだけなら、スクリプトからlocation.hrefなどで呼び出せますが、データの受け渡しをするなら、submitするのが簡単。 それなら、スクリプトの呼び出しをonClick="job(this.form)"としておけば、スクリプト側でそのformを特定する必要がなくなるので、そのままsubmitできます。 ＜２＞ スクリプト（job()）の内容が単にsubmitするだけであれば、サブウィンドウの送信jobボタンを <input type="submit" value="送信job"> とすることで、スクリプトを使用しなくても、そのままで送信できます。

gahosky
質問者

お礼

返答が遅れてすいません。 ＞CGIからの出力をサブウィンドウで受けるということでいいんですよ＞ね？ 説明不足でした。“送信job”ボタンが押されたら、サブウィンドウは閉じて、GCIからの出力は、親ウィンドウでされるということがやりたいです。

  • Yohjira
  • ベストアンサー率66% (14/21)
回答No.1

サブウィンドウからでも親からでも、例えば、 document.forms[0].submit();（もしくはnameやidで呼び出し） で送信できると思います。targetやactionの設定も必要だとは思いますが。 （質問の意味がそういうことではないのかな・・・） 「ありがとうございました」の表示方法をどのように考えているのかによっては、 もう少し何らかの考慮がいるかもしれませんね。

gahosky
質問者

お礼

返答が遅れましてすいませんでした。 サブウィンドウのpop_post.htmは、 <script type="text/javascript"> <!-- function fnStart() { document.getElementById("SubData").value = window.opener.Form_name.Data.value; } function job( url ) { document.forms[0].target = "pop_formName"; document.forms[0].method = "post"; document.forms[0].action = "thanks.cgi"; document.forms[0].submit; } //--> </script> </head> <body onload="fnStart()"> <form method="post" > <input type="text" id="SubData" /> <input type="button" name="sub" value="送信job" onClick="job('thanks.cgi')"> </form> </body> </html> こうゆうことでしょうか？ 私は基本がわかってないからなのか、これが何をやっているのかわかりません。 「ありがとうございました」の表示は親ウィンドウでしたくて、サブウィンドウの"送信job"ボタンでサブウィンドウが閉じられるようにしたいです。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • javascriptからCGIへの値渡し

    cookieは利用しない方向で考えています。 HTML上のdocument.form01.のsubmitが押下されたら一度手入力されたデータ(userinput)を加工し、 別のフォームform02.valueに格納してtest.cgiにPOSTで投げる動作を期待しています。 下記だとページ遷移無しで一時的な格納まで確認しましたが CGIへの送信が機能していないようです。 どの様にすべきでしょうか？ [html] <script type="text/javascript"> <!-- function onSubmit() { document.form02.sendform.value = '\"' + document.form01.userinput.value + '\"'; document.form02.submit(); } --> </script> <body> <form name="form02" method="POST" action="test.cgi"> <input type="hidden" name="sendform" value=""> </form> <form method="POST" action="" name="form01"> <input type="text" name="userinput"> <input type="submit" value"送信" onclick="return onSubmit();"> </form> </body> </html>

  • javascriptでCGIを実行するには

    htmlタグ <form method="post" action="・・・/cgi-bin/gogo.cgi"> <input type="text" name="name" size="20" value=""> <input type="submit" value="送信"> 上記で送信ボタンを押すとcgi側でnameを受け取れますが、 以下の場合はcgiは動作するのですが、nameを受け取れません、 受け取れる方法を教えてください。 <script type="text/javascript" language="javascript"> <!-- function gogo(){ document.write('<img src="・・・/cgi-bin/gogo.cgi">'); } // --> </script> </head> <body> <form method="post" action="javascript:gogo()"> <input type="text" name="name" size="20" value=""> <input type="submit" value="送信"> </form>

  • サブウィンドウから親ウィンドウのフォームへの書き込み

    よろしくお願いします。 やりたい事は サブウィンドウを開いて サブウィンドウのテキストボックスに入力した内容を 親ウィンドウのテキストボックスに書き込みたいのです。 以下親ウィンドウ（oya.html） <html> <head> <script type="text/javascript"> <!-- function search(){ window.open( 'sub.html' ,'childwin', "width=350,height=250,location=no,menubar=no,toolbar=no,resizable=yes,scrollbars=yes" ); } --> </script> </head> <body> <form name="mainform" method="POST" action="hoge.php"> <TABLE border="1"> <TR> <TD>A:<INPUT type="text" name="A" id="A"></TD> </TR> <TR> <TD>B:<INPUT type="text" name="B" id="B"></TD> </TR> <TR> <TD><input type="button" onclick="search();return false;" value="サブウィンドウ"></TD> </TR> <TR> <TD><center><input type="submit" name="exec" value="確認"></center></TD> </TR> </TABLE> </form> </body> </html> 以下サブウィンドウ（sub.html） <html> <head> <script type="text/javascript"> <!-- --> </script> </head> <body> <form name="subform"> <TABLE border="1"> <TR> <TD>A:<INPUT type="text" name="A" id="A"></TD> </TR> <TR> <TD>B:<INPUT type="text" name="B" id="B"></TD> </TR> <TR> <TD><input type="button" value="入力"></TD> </TR> </TABLE> </form> </body> </html> 以上です。親ウィンドウの中にformが入れ子状態になってしまうため javascriptで対応できないのかと思い質問させて頂きました。 ご教示お願いいたします。

  • フォームのPOSTデータをサブウィンドウに渡したいです。

    フォームのPOSTデータをサブウィンドウに渡したいです。 <form action="sample.html" method="post"> <input type="checkbox" name="test[]" value="0">0 <input type="checkbox" name="test[]" value="1">1 <input type="checkbox" name="test[]" value="2">2 <input type="checkbox" name="test[]" value="3">3 <input type="checkbox" name="test[]" value="4">4 </form> 上記のフォームの値を、サブミットボタンを押したときにサブウィンドウをひらき、そのサブウィンドウに渡したいのですが、いまいち上手くいきません。 window.openでサブウィンドウを開いてもデータが受け渡せずにいます。 このような場合、どうしたら値を渡せるのでしょうか。 理想はPOSTで渡したいのですが、引数で渡す方法でもかまいません。

  • POSTメゾットでの値の受け渡しについて

    フォームからの値の受け渡しについて質問いたします。 <form ction="test.php" method="POST"> 　　<input type="text" name="text"> 　　<input type="submit" value="検索"> </form> で渡されたtextを下記スクリプトで受け取れません。 ＝＝＝＝testphp＝＝＝＝ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> </head> <body> <? print ".$_POST['text']."; ?> </body> </html> ＝＝＝＝＝＝＝＝＝＝ ただ気になることがあり、このファイル達が置かれているディレクトリの.htaccessに <Limit GET POST> require valid-user </Limit> の記述があります。 このディレクトリはメンバー制限をかけているディレクトリですが、 メンバーとしてこのディレクトリのTOPページに入り、 検索フォームを入力してsubmitしても値はブロックされるものでしょうか？ よろしくお願いします。

    • ベストアンサー
    • PHP
  • リンクでPOST送信

    http://www.kojikoji.net/pso/javascript.asp こちらにその方法がのっていて、 Windows IE 6.0 Windows Opera 7.13 では動作を確認しました。ですが、 Windwos Netscape 7.1 で動作しません。Netscapeにも対応した書き方で、<a href=...>を用いてPOST送信することは可能でしょうか？ *****以下引用*********************************** リンクやボタンを使って「xxx.asp」へPOST送信 <html> <head> <script language="JavaScript"> <!-- function wPost(a1,a2){ document.form1.text1.value=a1; document.form1.text2.value=a2; document.form1.action = "xxx.asp"; document.form1.submit(); } //--> </script> </head> <body> <a href="javascript:wPost("text1","text2")">送信</a> <input type="button" OnClick="wPost('text3','text4')" value="送信"> <form name="form1" method="post" action="err.html"> <input type="hidden" name="text1"> <input type="hidden" name="text2"> </form> </body> </html>

  • 複数のフォームから送信

    複数のフォームからtextの値を送信したいのですができますか？〒番号を入力して検索ボタンをおすと住所がでてきて最後に登録をしたいです。検索だけのプログラムはできてますがフォームを二つにすると両方のsubmitが登録になります・・・ 一応自分でいろいろためしましたがだめでした。。。 html,php,javascriptです。 二つともだめでした。。。。 rei1.php ------------------------- <html> <body <form method="POST" action="1.php"> お名前：<input type="text" name="name"> <br> <br> <form method="POST" action="yubin.php"> 〒：<input type="text" name="yubin"> <input type="submit" value="検索"> <br> 住所：<input type="text" name="zyu"> <br> </form> メールアドレス：<input type="text" name="email"> <br> <input type="submit" value="登録する"> </form> </body> </html> -------------------------------------- rei2.php -------------------------------------- <html> <head> <script language="javascript"><!-- function send() { document.nform.submit(); document.nform2.submit(); document.nform3.submit(); } //--></script> </head> <body> <form name="nform" method="POST" action="1.php"> お名前：<input type="text" name="name"> <br> </form> <form name="nform2" method="POST" action="yubin.php"> 〒：<input type="text" name="yubin"> <input type="submit" value="検索"> <br> 住所：<input type="text" name="zyu"> <br> </form> <form name="nform3" method="POST" action="1.php"> メールアドレス：<input type="text" name="email"> <br> <input type="submit" value="登録する"> </form> </body> </html> ------------------------------------

  • javaからcgiの呼び出し

    htmlタグで <form method="post" action="/cgi-bin/gogo.cgi"> とすると、formボタンでcgiが実行されますが、これと同じことを下記のjavaで実行する方法を教えてください。 <script type="text/javascript" language="javascript"> <!-- function gogo(){ cgi呼び出し } //--> </script> <body> <form method="post" action="javascript:gogo()"> ・・・ <input type="submit" value="送信">

  • 送信データの受け取りについて

    ご教授願います。 ページ１からMETHOD="get"で値をSubmitして ページ２で受信したいのですが、 ページのURLバーのアドレスの最後に「?ACT=3」と 記載されているにもかかわらず、 ページ２内での$_get['ACT']で 値を拾えませんし、$ACTも確認できません。 どの様な原因が考えられるのでしょうか。 ＜環境＞ IE 7.0.5730.13 PHP 5.2.6 ＜プログラム＞ *ページ１ <html> <head> <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"> <script type="text/javascript"><!-- function Cli_Submit(){ ListForm.action = "Test_submit2.php"; ListForm.submit(); } // --></script> </head> <BODY> <FORM NAME="ListForm" METHOD="get"> <TD><INPUT TYPE="text" NAME="ACT"></TD> <TD><INPUT TYPE="button" VALUE="Submit" onClick="Cli_Submit()"> </FORM></BODY></HTML> *ページ２ <html> <head> <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"> <script type="text/javascript"><!-- // --></script> </head> <BODY> <FORM NAME="ListForm" METHOD="post"> <TD><INPUT TYPE="text" NAME="ACT" VALUE="<?php print $_get['ACT'] ?>"></TD> <TD><INPUT TYPE="button" VALUE="Submit" onClick="Cli_Submit()"> </FORM></BODY></HTML>

    • 締切済み
    • PHP
  • POSTデータのNAME属性をVALUEによって取得する方法

    HTML→PHPのPOSTデータのやりとりについて、 【HTML】 <form name="form1" method="post" action="xxx.php"> <input name="01" type="text" value="1"> <input name="02" type="text" value="0"> <input name="03" type="text" value="0"> <input name="04" type="text" value="1"> <input type="submit" name="Submit" value="送信"> </form> 【xxx.php】 フォームから送信されたデータを使って、「value」が"1"の「name」を拾うのにはどのように書けばいいでしょう？ ↓このように取得したいです。 $data[0]="01"; $data[1]="04"; よろしくお願いします。

    • ベストアンサー
    • PHP

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する