FORMタグのtarget属性に値を書込む方法とは?

このQ&Aのポイント
  • FORMタグのtarget属性に値を書き込む方法について教えてください。送信ボタンを押すとtargetの値を取得できず、javascriptエラーが発生します。具体的には、「引数は無効です」と表示されます。make_newwin関数を実行しようとしていますが、うまくtargetの値を取得できません。targetには親ウィンドウの名前を指定したいです。何か良い方法があれば教えてください。
  • FORMタグのtarget属性に値を書き込む方法について教えてください。送信ボタンを押すとtargetの値が取得できず、javascriptエラーが発生します。「引数は無効です」というエラーメッセージが表示されます。make_newwin関数を実行しようとしていますが、targetの値をうまく取得できません。targetには親ウィンドウの名前を書き込みたいです。どうすればよいでしょうか。
  • FORMタグのtarget属性に値を書き込む方法を教えてください。送信ボタンを押すとtargetの値を取得できず、javascriptエラーが表示されます。「引数は無効です」というエラーメッセージが表示される状況です。make_newwin関数を実行しようとしていますが、うまくtargetの値を取得できません。targetには親ウィンドウの名称を書き込む必要があります。解決策を教えてください。
回答を見る
  • ベストアンサー

<FORM>タグのtargetに値を書込む方法を教えて下さい

送信ボタンを押すとtargetの値をとれず、javascriptエラーになります。 「引数は無効です」と表示されます。 SUBMITした時にmake_newwin(f)を動作しようとしているのですが、 うまくtargetが取れません。 targetには、親ウィンドウ名を書き込みたいのです。 何か良い方法ありましたら、教えて下さい。 <script language="javascript" type="text/javascript"> <!-- function make_newwin(f) { alert(f) …ここで内容を表示したところ[object]と表示されました。   var w = window.open('about:blank', f.target);    w.focus(); window.close(); } <FORM name="test" action="/cgi-bin/test.cgi" method="post" target="" onSubmit="make_newwin(this);"> <input name = "aaa" type = "hidden" value ="10000" >        : </FORM> </BODY> <script> document.test.target=opener.window.top.name; </script> </HTML>

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

  • ベストアンサー
  • leaz024
  • ベストアンサー率75% (398/526)
回答No.4

> ■親ウィンドウのHTMLで、target="ko"と限定して > ありますよね。もし、親ウィンドウも2つ表示されて > いて、子ウィンドウも2つ表示されている場合、 > それぞれの処理をさせるためには、どうしたら > 良いでしょうか?今の状態ですと、子ウィンドウ > が、上書きされてしまいます。 そのような場合、それぞれの親が自分の子に、他の子とは違う名前を付けなければなりません。となると HTML では対処できないので、JavaScript で設定するようにします。 また、No.3 のサンプルでは親の名前も固定なので、このままでは子から親への送信にも問題があるかも知れません。ですから、親の名前もウィンドウごとにユニーク(一意的)な名前になるようにした方が良さそうです。 ユニークな名前を作るには、ミリ秒単位で値が変わる Date オブジェクトを利用するとよいでしょう。Date オブジェクトの getTime メソッドは、1970年1月1日0時0分0秒からの経過時間(ミリ秒)を返します。 以上を踏まえ、No.3 の親ウィンドウのサンプルを書き換えてみます。 ■親ウィンドウのHTML(その2) <html> <head> <title>親</title> <script type="text/javascript"> <!-- // 自分に名前を付ける window.name = (new Date()).getTime();   ★変更:親の名前設定 // FORM送信で開くウィンドウのスタイルを指定するための関数 function make_newwin(f) {   f.target = window.name + "_ko";   ★追加:子の名前設定※   var w = window.open("about:blank", f.target, "スタイル設定");   w.focus(); } //--> </script> </head> <body> <form action="/cgi-bin/test-check.cgi" method="post" onSubmit="make_newwin(this)">   ★削除:target="ko" は不要 <input type="submit"> </form> </body> </html> ※親の名前がユニークなので、「親の名前+"_ko"」とするだけで子もユニークになります。  子の名前も親と同じように Date オブジェクトで設定してもよかったのですが、こちらの方が簡単かつ安全なのでこのようにしました。

sara555
質問者

お礼

とてもわかり易い回答を書いていただき、有難うございました。 先程、補足した件ですが、私の勘違いでうまくいきませんでしたが、 無事、できるようになりました。有難うございました。

sara555
質問者

補足

丁寧でわかりやすい回答有難うございます。 教えていただいた方法で行ってみたところ、 うまく動作することができました。 原因は、ENTERキーを無効にしたくて、 <input type="submit">と記述していなくて、 <input type="button" onclick="subm()"> として、SUBMITをjavascriptで動かそうとして いたので、うまくいきませんでした。 また、まだうまく言ってないところが ありまして、上記の部分でやはり、ENTERキーで SUBMITするのをやめたいのですが、それは 無理な話でしょうか? それと、「引数が無効」のエラーは発生します。 なぜかというと、教えていただいたとおり、 親ウィンドウのURLと子ウィンドウのURLで、 ドメインが違うので、どうしてもエラーが発生 します。解決する方法があれば、教えて下さい。

その他の回答 (3)

  • leaz024
  • ベストアンサー率75% (398/526)
回答No.3

> なぜ、window.openを使用しなければならないのかというと、 > 以下で質問した際に、この方法でうまくいきました。 それぞれの質問を読みましたが、親→子、子→親の両方の質問が混じってますよね? 質問される際は、どちらのどの処理で困っているのか明記されるとよいと思います。 で、親から子を開く時には、ウィンドウスタイルの指定などのために window.open することはありますが、子から親に向けて送信する時には、既にウィンドウがあるので window.open は必要ありません。 今、質問されているのは、子ウィンドウから親ウィンドウへの送信ですよね?ということは window.open を使う必要はないということです。 なお、やはり私が試した限りでは「引数が無効」のエラーは発生しません。 親ウィンドウのURLと子ウィンドウのURLで、ドメインが違うということはありませんか? 本件については未確認ですが、異なるドメインのウィンドウを操作しようとすると、エラーとなることがあります。 ちなみに、 > <FORM>で、渡している項目数が多すぎて、このような結果になりました。 「渡す項目」って INPUT とか SELECT とかのことですよね?これの数が多すぎて問題になるということは、通常あり得ません。 どこか別のところに問題があると考えて間違いないでしょう。 それと、q=990988 の方でちょっと気になったことがあり、そちらにも書き込みましたのでご確認ください。 No.3 の補足で挙げられた質問などから考えられる、全体のサンプルを簡単に書いてみましたので、ご参考ください。 ■親ウィンドウのHTML <html> <head> <title>親</title> <script type="text/javascript"> <!-- // 自分に名前を付ける window.name = "oya"; // FORM送信で開くウィンドウのスタイルを指定するための関数 function make_newwin(f) {   var w = window.open("about:blank", f.target, "スタイル設定");   w.focus(); } //--> </script> </head> <body> <form action="/cgi-bin/test-check.cgi" method="post" target="ko" onSubmit="make_newwin(this)"> <input type="submit"> </form> </body> </html> ■子ウィンドウのHTML(test-check.cgiで出力) <html> <head> <title>子</title> <script type="text/javascript"> <!-- // 親ウィンドウに対して送信し、自分は閉じるための関数 function send2opener(f) {   if (!opener || opener.closed)     f.target = '_blank';   else if (opener.top.name)     f.target = opener.top.name;   else     f.target = opener.top.name = 'dummy_name';   f.submit();   window.close();   return false; } //--> </script> </head> <body> <form action="/cgi-bin/test_new.cgi" method="post" onSubmit="return send2opener(this)"> <input type="submit"> </form> </body> </html> ※JavaScriptコードのインデントに全角スペースを使用していますので、コピーして試される場合はタブなどに置き換えてください。

sara555
質問者

補足

回答有難うございます。サンプルのソースまで 書いていただいて、大変助かります。 説明のつじつまが合わなくて、本当申し訳ありません。上のソースでうまくいったのですが、 あと1つ教えていただきたいのです。 ■親ウィンドウのHTMLで、target="ko"と限定して ありますよね。もし、親ウィンドウも2つ表示されて いて、子ウィンドウも2つ表示されている場合、 それぞれの処理をさせるためには、どうしたら 良いでしょうか?今の状態ですと、子ウィンドウ が、上書きされてしまいます。 教えて下さい。

  • leaz024
  • ベストアンサー率75% (398/526)
回答No.2

> 親 → 子 → 親(更新)と言う形で処理をしたいのですが、 > この記述は、子 → 親(更新)に作成したものですが。 はい、私もそのつもりで回答したのですが・・・。 # それともどこか認識のずれがあるでしょうか? > 以下のように、targetを表示してみたところ、うまく表示できていました。 > alert(f.target) そうですよね、f.target は document.test.target=opener.window.top.name; で取得しているので、これがちゃんと表示されないと“それ以前の問題”ということになってしまいます。 > var w = window.open('about:blank', f.target); > の行で、「引数が無効です」と表示されます。 > 解決する方法はないでしょうか? これなんですが、私の環境(WinXP+IE6)ではエラーが起きないんですよ。 で、どうせ f.target である親ウィンドウは既に開いているのだから、わざわざ window.open せずに、FORM の target のみを変更する方法を No.1 で書いたわけです。 # というか、targetは指定してあるのだから、単純に window.open しないだけで解決するような気もします。 もし No.1 の方法を試されていないのでしたら、一度試してみてもらえますか?それでもエラーが出るようでしたら、再度補足ください。 また、もし質問の make_newwin のコードが主要部の抜粋だとすれば、全容を示してもらえると何か分かるかも知れません。

sara555
質問者

補足

回答有難うございます。 とても、わかりにくい説明で申し訳ありません。 なぜ、window.openを使用しなければならないのかというと、 以下で質問した際に、この方法でうまくいきました。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=949297 http://oshiete1.goo.ne.jp/kotaeru.php3?q=975293 ここまでは、ウィンドウ名を固定にしていたので、 うまくいっていたのですが、この質問をしたところ、 難しくなり、今質問させていただいてる件に至ります。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=990988 <FORM>で、渡している項目数が多すぎて、このような結果に なりました。 説明不足でもうしわけありません。 良かったら教えて下さい。

  • leaz024
  • ベストアンサー率75% (398/526)
回答No.1

要するに、opener.top(opener.window.top と同じ)に対して送信したい、ということですよね? だったら送信時に name を取得して target に設定すればよいだけで、事前に取得したり、window.open したりする必要はありません。 <script type="text/javascript"> <!-- function setTarget(f) {   // このHTMLが直接開かれた場合(openerがundefined)や   // 親ウィンドウが既に閉じられた場合には _blank にする。   if (!opener || opener.closed)     f.target = '_blank';   // opener.top.name が設定されていればそれを使う。   // ※topウィンドウの場合、普通は設定されていない。   else if (opener.top.name)     f.target = opener.top.name;   // name が設定されていない場合は、強制的に設定する。   else     f.target = opener.top.name = 'dummy_name';   close(); } // --> </script> <FORM action="/cgi-bin/test.cgi" method="post" onSubmit="setTarget(this)"> ※下記の部分は必要ありません。 <script> document.test.target=opener.window.top.name; </script>

sara555
質問者

補足

素早い回答、感謝しております。 親 → 子 → 親(更新)と言う形で処理をしたいのですが、 この記述は、子 → 親(更新)に作成したものですが。 以下のように、targetを表示してみたところ、うまく表示できていました。 var w = window.open('about:blank', f.target); の行で、「引数が無効です」と表示されます。 解決する方法はないでしょうか? function make_newwin(f) { alert("送信しました。" + document.test.target) alert(f.target) var w = window.open('about:blank', f.target); w.focus(); window.close(); }

関連するQ&A

  • ENTERキーを無効にしたいのですが教えて下さい

    ENTERキーを無効にしたいのですが、SUBMITボタンでjavascriptを動かしています。 SUBMITを押した瞬間に、別ウィンドウにデータを渡しているのですが、 どの部分にどのようなスクリプトを追加すれば良いでしょうか? 良かったら教えて下さい。 ■親ウィンドウのHTML <html> <head> <title>親</title> <script type="text/javascript"> <!-- window.name = (new Date()).getTime();    function make_newwin(f) {   f.target = window.name + "_ko";   var w = window.open("about:blank", f.target, "スタイル設定");   w.focus(); } //--> </script> </head> <body> <form name="test" action="/cgi-bin/test-check.cgi" method="post" onSubmit="make_newwin(this)"> <input type="submit"> </form> </body> </html>

  • ENTERキーを無効にしたいのですが教えて下さい。その2

    以前、以下の方法を教えていただいてうまくいったのですが、 ボタンを画像ボタンにし、javascriptで、押したら沈むボタンを 作成したところ、ENTERキーが無効にならなくなりました。 ENTERキーを押されて送信されないことが先決なので、 どなたかご伝授いただければと思います。 以前のスクリプト <html> <head> <title>親</title> <script type="text/javascript"> <!-- window.name = (new Date()).getTime(); function make_newwin(f) {   f.target = window.name + "_ko";   var w = window.open("about:blank", f.target, "スタイル設定");   w.focus();   f.submit(); } //--> </script> </head> <body> <form action="/cgi-bin/test-check.cgi" method="post" onSubmit="return false"> <input type="button" value="送信" onClick="make_newwin(this.form)"> </form> </body> </html> こちらで、 <input type="button" value="送信" onClick="make_newwin(this.form)"> これを以下のようにtypeを変えてしまったところ、効かなくなりました。 <input type="image" SRC="new.gif" ALT="新規登録ボタン" NAME="botan_new11" WIDTH="78" HEIGHT="26" BORDER="0" ID="botan_new" border=0 onMouseOver="MM_swapImage('botan_new11','','botan_new_sw.gif',1)" onMouseOut="MM_swapImgRestore()" onClick="make_newwin(this.form)"> これは、無理な話なのでしょうか?教えて下さい。

  • form につけた id 値の取得方法

    form 内に id という名前の input 要素があると、form につけた id 値が取得できません。firefox で確認しましたが、例の f2.id が input 要素になります。このような場合 form の id 値はどのようにすれば取得できるでしょうか。 <!doctype html> <html> <head><title>id test</title></head> <body> <form id="f1" name="f1"> <input type="hidden" name="idx"> </form> <form id="f2" name="f2"> <input type="hidden" name="id"> </form> <script type="text/javascript"> var f1 = document.getElementById('f1'); var f2 = document.getElementById('f2'); alert("f1.name: " + f1.name + ", f1.id: " + f1.id + "\nf2.name: " + f2.name + ", f2.id: " + f2.id); </script> </body> </html>

  • form の target(

    form タグに オプションとして存在する target に関してです。 form method="POST" action="***.cgi" target="new" と記述すればsubmit実行時に結果を別ウィンドウに転送します ここまではいいのでが・・・・ submitボタンが複数ある場合(ボタンによって処理が違う) ボタンによって、このボタンは新しいウィンドウを開くが、 このボタンは開かない(同一ウィンドウ内に結果表示する) というように設定することはできますか? CGIとJavaSCRIPTの利用は可能です。 やはり別の form を立てるしかないのでしょうか? (cgiに渡す値が大量なため一つのformで実現したいとおもっています)

    • ベストアンサー
    • HTML
  • 名無しformの操作

    以下のような、元々名前のないformが複数ある場合にボタンイベントで発生した共通のtest()関数内で処理を行う場合、どのフォームか識別できる方法はあるのでしょうか? テスト1、をクリックした場合、テスト1のフォームの操作を行いたいです。 <script ....... function test(???) { document.どのフォームかわからない.action="/index.cgi"; document.どのフォームかわからない.a.value="1"; document.どのフォームかわからない.submit(); } </script> <form> <input type="hidden" name="a" value=""> <input type="button" value="テスト1" onclick="javascript:test(???)"> </form> <form> <input type="hidden" name="a" value=""> <input type="button" value="テスト2" onclick="javascript:test(???)"> </form> <form> <input type="hidden" name="a" value=""> <input type="button" value="テスト3" onclick="javascript:test(???)"> </form>

  • サブウィンドウに値を渡して、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では、そのデータを登録させ、「ありがとうございました」を表示させるものです。 また、そもそもこの方向でうまくできますか? よろしくお願いします。

  • <form>タグに2つのボタン

    <form>タグで2つのボタンを表示させ、以下のようにそれぞれのボタンで フィールドに別の値を入れて送信させることはできますでしょうか? できればHTMLで、できなければJavaScriptでできますでしょうか? ・button1を押したときは  フィールド「CASE」に1を入れて送信、  HTMLで書くと、<input type="hideen" name="CASE" value="1"> ・button2を押したときは  フィールド「CASE」に2を入れて送信、  HTMLで書くと、<input type="hideen" name="CASE" value="2"> ===== HTML ====================== <form action="test.cgi" method="post"> <input type="text" name="text1"> <input type="submit" value="button1"> <input type="submit" value="button2"> </form> 宜しくお願いします。

    • ベストアンサー
    • HTML
  • onBlurのイベントを使ってデータベースを参照し値を代入する方法

    伝票入力する際、ACCESS等で作ると、例えば「得意先コード」を入力すると 「得意先名」が表示される。という画面がありますよね。 そこで先輩方にお伺いしたいのですが、 ASPを使って同様のことをやる場合、どんな手法があるのでしょうか? 私なりに考えた方法が2つほどあるのですが、これが正しいのでしょうか? <案1> ・子ウインドウを表示し、そこでデータベースを参照し、親ウインドウに値を代入。 ---親ウインドウ側--- <INPUT type="text" name="text1" onBlur="GetJTname()"> <INPUT type="text" name="text2"> <script language="JAVAScript"> function GetJTname(){  Newwin=window.open("test1_1.asp?a=" + document.form1.text1.value,"sample","width=240,height=180"); } </script> ---子ウインドウ側--- <form name="form2"> <INPUT type="text" id=text1 name=text1 value="<%=rs.Fields("name_inf").Value%>"> </form> <script language="JAVAScript"> function action(){  window.opener.document.form1.text2.value=document.form2.text1.value;  window.close(); } </script> <案2> ・自分自身にデータを投げる <INPUT type="text" name="text1" onBlur="GetJTname()"> <INPUT type="text" id=text2 name=text2 QS=Request.QueryString("B") value="<%if QS <>"" then %><%=Tname(QS)%><%end if%>"> <%function Tname() <script language="JAVAScript"> function GetJTname(){  location.href ='test1.asp?B=' + document.form1.text1.value; } </script> <%function Tname(code) '... ADOの処理 end function%> (案1)では、当然ながら一瞬ウインドウが開きます。 (案2)では、せっかく入力したTEXT1の内容が消えてしまいます。

  • <FORM TARGET="">で開く窓の大きさ指定

    Javascriptかもしれませんが、perl内で使いたいので一応ここで‥‥ A.cgiからフォームに入力後送信、B.cgiに飛びます。 その時、B.cgiを新しく開いたウィンドウに表示したいので下記のようにしてます。 A.cgi側フォーム <FORM METHOD="post" ACTION="B.cgi" TARGET="_blank"></FORM> この_blankで新しい窓は開きますが、この開いた窓の大きさを指定するにはどうしたらいいんでしょうか? Javascriptはあまり良くわかりませんが、window.open()くらいなら使った事あります。これだと大きさも指定できますが、パラメーター(?)を渡しつつ、開いた窓の大きさも指定したいのです。 渡したいパラメーターは1種類(しかも変数で代入できる)なので、フォームじゃなくても <A HREF="B.cgi=?$i"></A>って格好でもいいです。($iの値は固定されていない) 何か私でもできる簡単な方法はありますか?

    • ベストアンサー
    • Perl
  • javascriptで取得した値を、FORMで送信する

    いつもお世話になっております。 jspからwindow.openを使い、別ウインドウを表示しました。 別ウインドウでの質問です。 javascriptで前のページ(jsp)の情報を受け取り、それを次のページ(jsp)へFORM(POST)で送りたいのですが、うまくいきません。 ご教授下さい。 <HTML> <HEAD> <script type="text/javascript"> <!-- function sent() { var num = window.opener.document.aaa.number01.value; ここで前ウィンドウの情報を取得しています return num; } function sub() { document.bbb.submit(); } // --> </script> </HEAD> <BODY onload="sub()"> <form name="bbb" METHOD="POST" action="http://okwave.jp"> <input type="hidden" name="timeid" value=""> <input type="hidden" name="number00" value="1"> <input type="hidden" name="number01" value="sent()"> <!--<input type="hidden" name="number01" value="204038054776">--> 当たり前ですが、コメントにしている部分にすると次のページでうまくいきます。 </form> </BODY> </HTML>

専門家に質問してみよう