• 締切済み

複数のボタンに対するActionと動的hiddenについて

JavaScript初心者です。 入力内容を確認する画面があり、その画面からは実際にデータを 書き込む機能(1)と一時的に書込み、その結果を別ウィンドウで出力 するプレビュー機能(2)を考えています。 (1)も(2)もAction先は同じCGIで、プレビューの場合のみあるhidden値を 持たせ、Action先のCGI側でそのhiddenが存在すればプレビュー機能(2)、 なければ通常登録機能(1)と処理を分けています。 今問題となっているのはプレビュー実行後、登録を実行した場合、なぜか プレビューと同じ動作になってしまうという点です。 （別ウィンドウが立ちあがり、hidden属性もAction先へ渡ってしまっている） 初心者である為、解決方法がわからず、悩んでおります。 よいアドバイスをお願い致します。 =====================画面　ここから===================== ※<>はHTMLタグを示す <form> 　　　　　　　　　確認画面　　　　　　　　　　 ----------+---------------------------------+ |データ１ | 入力内容１ | +-------------------------------------------+ |データ２ | 入力内容２ | ----------+---------------------------------+ |データ３ | 入力内容３ | +-------------------------------------------+ +--------------+　　　+--------------+ |　プレビュー　|　　　|　　登録　　　| +--------------+　　　+--------------+ <input type="hidden" name="data1" value="入力内容１" /> <input type="hidden" name="data2" value="入力内容２" /> <input type="hidden" name="data3" value="入力内容３" /> </form> ※登録は以下で実行 　<input type="button" value="登録" onClick="javascript: run();" /> ※プレビューは以下で実行 　<input type="button" onClick="javascript: preview('30');" value="プレビュー" /> =====================画面　ここまで===================== =====================ＪＳ　ここから===================== function preview(id){ var q = document.createElement('input'); q.type = 'hidden'; q.name = 'name'; q.value = id; newWindow =window.open("about:blank","preName","menubar=no,toolbar=no,location=no,status=no,scrollbars=yes,resizable=yes"); newWindow.focus(); document.forms[0].appendChild(q); document.forms[0].target = 'preName'; document.forms[0].action = run.cgi; document.forms[0].method = 'post'; document.forms[0].submit(); } function run(){ document.forms[0].action = run.cgi; document.forms[0].method = 'post'; document.forms[0].submit(); return; } =====================ＪＳ　ここまで=====================

みんなの回答

  • auty
  • ベストアンサー率58% (284/486)
回答No.7

opener.document.forms[0].removeChild(opener.document.forms[0].name); は残してください。（#4） 結局、 <body onLoad="opener.document.forms[0].removeChild(opener.document.forms[0].name);opener.document.forms[0].setAttribute('target', '');"> となるでしょうか。

seseseseto
質問者

補足

移動中の為携帯からのアクセスです ちなみにご指摘の通りでieでだめでした

  • auty
  • ベストアンサー率58% (284/486)
回答No.6

・　私の経験では、ieで、removeAttribute()がうまく働かないことが多いようです。 そこで、target属性を空文字にするとどうなるか、試したところうまく行くようです。 target="" または target="_self" そこで opener.document.forms[0].setAttribute('target', ''); または opener.document.forms[0].setAttribute('target', '_self'); としてみたらどうでしょうか。 ・　また以下のページを参考にしてみてください。 http://nakawake.net/blog/web/javascript/iesetattributeremoveattribute.php

seseseseto
質問者

補足

targetについてはうまく上書きできたようで、新たなウィンドウは立ち上がらなくなりましたが、hiddenのname属性を消せていないようで、プレビュー画面が開いてしまいます。 <body onLoad="window.opener.document.forms[0].setAttribute('page',new Function(''));window.opener.document.forms[0].setAttribute('target', '');"> お知恵を貸していただけると幸いです

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.5

＃3です。 「再送信しますか？」というのはJavascriptでは制御できません。 追加した要素の削除　#4の回答を参考に（removeChildを使う） （#2の回答のようにCGI側で値で判断するならvalueの書き換えだけで済む ） 追加した属性の削除 ～.removeAttribute('target');

seseseseto
質問者

補足

#4と同様のお返事になってしまい、恐縮ですが、IE6だと うまくいきませんでした。 -------------------------------------------------------------- こうしてみました。 <body onLoad="opener.document.forms[0].removeChild(opener.document.forms[0].name);opener.document.forms[0].removeAttribute('target');"> removeChildで要素の削除、removeAttributeで属性の削除を プレビュー画面側で行いました。 そうするとFirefoxだと意図した動きとなり、IE6だとやはり プレビュー後の登録時にプレビューと同様の動きとなって しまいました。 --------------------------------------------------------------

  • auty
  • ベストアンサー率58% (284/486)
回答No.4

・　使い方は document.forms[0].appendChild(q)と同じですが、削除をする場合は、removeChild()を利用します。 <body onLoad="window.opener.document.getElementById('page').value='';window.close();"> ではなく、 <body onLoad="opener.document.forms[0].removeChild(opener.document.forms[0].name);"> としてみてください。

seseseseto
質問者

補足

こうしてみました。 <body onLoad="opener.document.forms[0].removeChild(opener.document.forms[0].name);opener.document.forms[0].removeAttribute('target');"> removeChildで要素の削除、removeAttributeで属性の削除を プレビュー画面側で行いました。 そうするとFirefoxだと意図した動きとなり、IE6だとやはり プレビュー後の登録時にプレビューと同様の動きとなって しまいました。

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.3

JavascriptによるHTMLの書き換えは、別のウィンドウを開こうが、そこにフォームを送信しようが元に戻ってはくれない。 preview()を実行した後も previewである事を示すhidden項目は追加されたままだし、 formのtarget属性も指定されたままになっている。 preview()のフォーム送信後、タイマーでもかけて変更内容を戻す(hidden項目を消去し、formのtarget属性を削除する)必要がある。 なぜ、actionやmethodまでJavascriptで設定しているかわからないが、必要があってそうしているなら、それらも戻してやらないと不都合が出るのかも。

seseseseto
質問者

補足

ご回答ありがとうございます。 >JavascriptによるHTMLの書き換えは、別のウィンドウを開こうが、そこにフォームを送信しようが元に戻ってはくれない。 とりあえずためしにプレビュー側で親ウィドウをリロードするよう以下を入れたら動作的にはうまくいきました。 <body onLoad="window.opener.location.reload(true)"> ただ、「情報を再送信…」というメッセージが出てOKをしなければうまくいきません。 この「情報を再送信…」のメッセージをJS側で強制OKにすることは出来るんですかね…？（ちょっと話はそれてしまって、恐縮です。）

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

よくわかっていませんが・・・ 引数の値によってCGI側で「プレビュー」と「登録」の処理を変えているということですよね？ 疑問点は １）入力フォームのdata1～data3がhidden設定されていますが、入力用なのでtextまたはtextareaなのでは？ ２）プレビューの際にわざわざ別ウィンドウを開いている理由が不明。 とりあえず、イメージとしてこんな感じでは？ ---- HTML ----- <form id="testForm" method="POST" action="～～TEST.cgi"> <input type="text" name="data1" value="入力内容１"> <input type="text" name="data2" value="入力内容２"> <input type="text" name="data3" value="入力内容３"> <input type="hidden" name="flag" value="なし"> 　　<!-- （↑）どちらを押したかのフラグ --> <input type="button" value="登録" onclick="hoge('')"> <input type="button" value="プレビュー" onclick="hoge('30')"> </form> ---- Script ----- function hoge(id) { 　frm = document.getElementById("testForm"); 　frm.flag.value = id; 　frm.submit(); } ただし、CGI側の判定は、flagデータの有無ではなく（データは常に存在します）、その値がnullなら登録、30ならプレビューという判断になります。

seseseseto
質問者

補足

説明不足でした。申し訳ございません。 (1)登録　…　実際にTSVファイルにデータを書込み、その内容をもとにHTMLページを生成 (2)プレビュー　…　仮のTSVファイルにデータを書込みその内容をもとにHTMLページを出力（その為、別ウィンドウ） …となっております。 １）入力フォームのdata1～data3がhidden設定されていますが、入力用なのでtextまたはtextareaなのでは？ 　→ここに関しては入力後の確認画面なので、hiddenで持っています。 ２）プレビューの際にわざわざ別ウィンドウを開いている理由が不明。 　→冒頭の理由です。 プレビュー後に登録をすると、別ウィンドウが立ち上がり、プレビュー時にしか出来ないはずのhidden値までわたってしまいます。

  • auty
  • ベストアンサー率58% (284/486)
回答No.1

・　たぶん、プレビュー画面で確認後それを閉じる前に、親ウィンドウ（opener）のhidden属性nameを削除しておけばよいのでは。

seseseseto
質問者

補足

ご回答ありがとうございます。 JavaScript初心者の為、どのような記述をしてよいかわかっておりません。何か参考のページやサンプル等をお教えいただけますでしょうか ちなみに別ウィンドウのプレビュー画面をBODYを以下のようにしたところやはりだめでした。 <body onLoad="window.opener.document.getElementById('page').value='';window.close();">

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

関連するQ&A

  • 親ウィンドウで動的に作成したhidden値をサブウィンドウから削除

    QNo.4132708 複数のボタンに対するActionと動的hiddenについて で皆様に色々とアドバイスを頂いたものです。 しかし根本的な解決には至らず、また、皆様のお知恵を頂きたく 思います。 現在の問題点としてはサブウィンドウ側でtarget属性とname属性の 削除をonload時に行おうとしていますが、Firefoxだとうまくいき、 IE6だとうまくいかないことまではわかりました。 IE6でもうまくいくようにするにはどうしたらよいか お知恵をいただければ幸いです。 IEだとremoveChildがうまくいかないようなので、その他方法があれば よろしくお願い致します。 =====================機能　ここから===================== 入力内容を確認する画面があり、その画面からは実際にデータを 書き込む機能(1)と一時的に書込み、その結果を別ウィンドウで出力 するプレビュー機能(2)を考えています。 (1)も(2)もAction先は同じCGIで、プレビューの場合のみあるhidden値を 持たせ、Action先のCGI側でそのhiddenが存在すればプレビュー機能(2)、 なければ通常登録機能(1)と処理を分けています。 =====================機能　ここから===================== =====================画面　ここから===================== ※<>はHTMLタグを示す <form> 　　　　　　　　　確認画面　　　　　　　　　　 ----------+---------------------------------+ |データ１ | 入力内容１ | +-------------------------------------------+ |データ２ | 入力内容２ | ----------+---------------------------------+ |データ３ | 入力内容３ | +-------------------------------------------+ +--------------+　　　+--------------+ |　プレビュー　|　　　|　　登録　　　| +--------------+　　　+--------------+ <input type="hidden" name="data1" value="入力内容１" /> <input type="hidden" name="data2" value="入力内容２" /> <input type="hidden" name="data3" value="入力内容３" /> </form> ※登録は以下で実行 　<input type="button" value="登録" onClick="javascript: run();" /> ※プレビューは以下で実行 　<input type="button" onClick="javascript: preview('30');" value="プレビュー" /> =====================画面　ここまで===================== =====================ＪＳ　ここから===================== function preview(id){ var q = document.createElement('input'); q.type = 'hidden'; q.name = 'name'; q.value = id; newWindow =window.open("about:blank","preName","menubar=no,toolbar=no,location=no,status=no,scrollbars=yes,resizable=yes"); newWindow.focus(); document.forms[0].appendChild(q); document.forms[0].target = 'preName'; document.forms[0].action = run.cgi; document.forms[0].method = 'post'; document.forms[0].submit(); } function run(){ document.forms[0].action = run.cgi; document.forms[0].method = 'post'; document.forms[0].submit(); return; } =====================ＪＳ　ここまで===================== =====================サブウィンドウ側　ここから===================== <body onLoad="opener.document.forms[0].removeChild(opener.document.forms[0].name);opener.document.forms[0].setAttribute('target', '');"> =====================サブウィンドウ側　ここまで=====================

  • 同じnameのhiddenで別々の内容のvalueを送りたい

    同じnameのhiddenで別々の内容のvalueを送りたい <form action="" name="MyForm" method="post"> <input type="hidden" name="rm" value="×××.txt">テスト1 <input type="button" value="閲　覧" onClick="MyForm.action='rm.cgi';MyForm.submit();"> <input type="button" value="削　除" onClick="MyForm.action='delete.cgi';MyForm.submit();"> <input type="hidden" name="rm" value="○○○.txt">テスト2 <input type="button" value="閲　覧" onClick="MyForm.action='rm.cgi';MyForm.submit();"> <input type="button" value="削　除" onClick="MyForm.action='delete.cgi';MyForm.submit();"> <input type="hidden" name="rm" value="△△△.txt">テスト3 <input type="button" value="閲　覧" onClick="MyForm.action='rm.cgi';MyForm.submit();"> <input type="button" value="削　除" onClick="MyForm.action='delete.cgi';MyForm.submit();"> 別のcgiでform送信すると、txtファイルが生成され、上記の繰り返しの部分に追加されていく様なイメージです。 閲覧・削除ボタンを押すと直前のhiddenを送信したいのですが、現状では一番最初のhiddenが送信されてしまいます。 方法がわかる方いらっしゃいましたら、御回答お願い致します。

    • ベストアンサー
    • HTML
  • １つのformで複数のactionを実行できますか？

    フォーム内に商品の購入ボタンがあります。同じフォーム内に商品名でグーグルのサイト内を検索させるボタンを設置し、横に並べることは可能ですか？ フォームの入れ子はよくないようなので、検索をJava scriptでできればよいのですが・・・ スタイルシートではデザイン上無理でした。 <form id="fm" name="fm" action="URL" method="POST"> <input type="hidden" name="shouhinmei" value="商品名"> <input type="hidden" name="kakaku" value="500"> <input type="image" src="kounyuu.gif value="購入"> <form method=get action="http://www.google.co.jp/search"> <input type=hidden class="q" name=q value="商品名"><input type=hidden name=ie value=UTF-8><input type=hidden name=oe value=UTF-8><input type=hidden name=hl value="ja"><input name=btnG type="image" src="検索.gif value="検索"><input type=hidden name=sitesearch value="サイトのURL"></form> </form> </form> +----+　　+----+ |購入|　　|検索| +----+　　+----+

  • hiddenのvalueの値を変えたい

    おはようございます。 教えていただきたいことがあります。 HTMLのほうに <input type="hidden" name="btn" value=""> と書きます。 それでJavaSctiptのfunctionの中で document.forms[0].btn.value=funcitonの引数; とやっているのですが、hiddenのvalueの中に値が入っていないようです。 どうしてでしょうか？ こういう使い方ってできないものなのでしょうか？ 宜しくお願いします。

  • hiddenで送ったデータの取り出し方

    PerlもHTMLも初心者です。hiddenの使い方が分からないのですが、 ■sub test1 <form NAME="minshu" ACTION="test.cgi" METHOD="post"> <input TYPE="submit" > <INPUT TYPE="hidden" NAME="aso" VALUE="write">　.. ■test.cgi $hatoyama=$Form{'aso'}; と、hiddenで送った変数をtest.cgiで受け取る時、$Form{}で受け取ると決まっているのですか？$minshu{aso}とかでは受け取れないのですか？ この場合、hiddenのnameはどういう役目をしているのですか？ hiddenのname="minshu"　とかすれば$minshu{aso}で受け取れるかと思っていたのですが、うまくいかないようなので．．

    • ベストアンサー
    • Perl
  • 1つのformで複数のactionをボタン１つで

    質問です。 １つのformで複数のactionを１つの送信ボタンで実行したいと思っています。 やりたいことは、１つのframeから他の2つのframeにデータを渡すことです。 フレームは以下のように3つに分かれています。 <frameset cols="60%, 40%"> <frame name="test1" src="xxxx.php"> <frameset rows="50%, 50%"> <frame name="test2" src="yyyy.php"> <frame name="test3" src="zzzz.php"> </frameset> </frameset> xxxx.php内のデータをyyyy.php, zzzzphpの２つに渡したいです。 <script language="javascript"> function send(){ 　　document.form1.target = "test2"; 　　document.form1.action = "yyyy.php"; 　　document.form1.submit(); 　　document.form1.target = "test3"; 　　document.form1.action = "zzzz.php"; 　　document.form1.submit(); } </script> <form name ="form1" method="POST" action="yyyy.php"> <input type="hidden" name="string" value="string" > <input type="button" value="送信" onClick="send()"> </form> 現在、上記のように試したり、過去の質問【一つのformから複数のactionを実行】url：http://okwave.jp/qa/q4234502.htmlを参考にしていますがうまくいきません。 わかる方アドバイスお願い致します。

  • ラジオボタンでうまくするには・・・・

    初めまして。 現在下記のプルダウン形式で、一つの価格が同じなので問題なく動くのですが <FORM action="cart/sys/cart.cgi" method="post"> <INPUT type=hidden value=005 name=num> <INPUT type=hidden value=●●● name=name> <INPUT type=hidden value=2000 name=tan> <SELECT name=sur> <OPTION value="" selected>購入数量</OPTION> <OPTION value=1>１</OPTION> <OPTION value=2>２</OPTION> <OPTION value=3>３</OPTION> <OPTION value=4>４</OPTION> <OPTION value=5>５</SELECT> <INPUT type=submit value=カートに入れる> </FORM><BR> <FORM action="・・・/cart.cgi" method="post"> <INPUT type=hidden value=005 name=num> <INPUT type=hidden value=●●● name=name> <INPUT type=hidden value=2000 name=tan> </FORM> 同じ商品で１・２・３・４・５のそれぞれに単価が変わる設定をしたいのですが、うまくいく方法が見つからないです。 ラジオボタン形式で作ってみたものの・・・・ <FORM action="・・・/cart.cgi" method="post"> <INPUT type=hidden value=005 name=num> <INPUT type=hidden value=●●● name=name> <INPUT type=submit value=カートに入れる> </FORM> <FORM> <INPUT type="radio" name="name1" value="2000">１袋<BR> <INPUT type="radio" name="name1" value="3900">２袋<BR> <INPUT type="radio" name="name1" value="5800">３袋<BR> <INPUT type="radio" name="name1" value="7500">４袋<BR> <INPUT type="radio" name="name1" value="8500">５袋</FORM> としてみましたがうまくいきません。 なにか方法ございましたら、ご教授いただければと思います。

    • ベストアンサー
    • HTML
  • 複数FORMの一括実行について

    通常であれば同一サイト内に下記のソース（フォーム）が入るのですが、 これを改良しサイト上で希望の送信先をチェックボックスで選択し一回の操作で複数のcgiを実行したく思います。 良いcgiがあれば教えてください。 又は改造ができるcgi、修正方法を分かりましたらお教え願います。 サイトA <form action="https://aaa.cgi" method="post"> <input type="hidden" name="名前" value="name"> <input type="hidden" name="メール" value="mail"> <input name="Submit" type="submit" value="送信"> </form> サイトB <form action="https://bbb.cgi" method="post"> <input type="hidden" name="名前" value="name"> <input type="hidden" name="メール" value="mail"> <input name="Submit" type="submit" value="送信"> </form> サイトC <form action="https://ccc.cgi" method="post"> <input type="hidden" name="名前" value="name"> <input type="hidden" name="メール" value="mail"> <input name="Submit" type="submit" value="送信"> </form>

    • 締切済み
    • CGI
  • 複数のデータを1度にsubmitするには？

    HTML初心者です。 下記の様にして、1つのsbmitで複数のデータを送りたいのですが、 後のデータ1つしか送れません。どうすればできるかお教え下さい。 ＊あくまで１つのsbmitボタンで同じnameの複数のデータを送りたいのですが。 ------------------------------------------------ <form method="get" action="xxx.cgi"> <input type="submit" name="leave" value="退室"> <input type="hidden" name="asyuku" value="101"> <input type="hidden" name="asyuku" value="102"> </form> ------------------------------------------------ よろしくお願いします。

  • ボタン別でフォームの送信先を変えたい

    同じ場所に3つある今のフォームを1つにまとめたいのですが、 「ラジオボタン」でやるのではなく「submitボタン」によって送信先の振り分けはできないのでしょうか？ CGIなどを使って一旦クッションを置くのは問題ないです。何か参考になるサイトさんとかありましたら教えてください。 <form action="1.php" method="get" class="form" target="a" name="1"> <input type="hidden" name="s" value=90 /> <input type="hidden" name="t" value="e" /> <input type="text" name="moji" value="" size="8" /> <input type="submit" name="button" value="検索" /> </form> <form action="http://e.php" method="get" name="2" target="a"> <input type="hidden" name="test" value=et /> <input type="text" name="77" value="" size="8" /> <input type="submit" value="検索2" class="button" /> </form> <form action="http://8.cgi" method="get" target="a"> <input type="text" size="8" name="q" value="" /> <input type="submit" value="検索3" class="button" /> <input type="hidden" name="sut" value="JJ" /> </form>

    • ベストアンサー
    • CGI

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する