- 締切済み
複数のボタンに対する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; } =====================ＪＳ ここまで=====================
- seseseseto
- お礼率23% (6/26)
- JavaScript
- 回答数7
- ありがとう数2
- みんなの回答 （7）
- 専門家の回答
みんなの回答
- auty
- ベストアンサー率58% (284/486)
- auty
- ベストアンサー率58% (284/486)
・ 私の経験では、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
補足
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)
＃3です。 「再送信しますか？」というのはJavascriptでは制御できません。 追加した要素の削除 #4の回答を参考に（removeChildを使う） （#2の回答のようにCGI側で値で判断するならvalueの書き換えだけで済む ） 追加した属性の削除 ～.removeAttribute('target');
補足
#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)
・ 使い方は 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);"> としてみてください。
補足
こうしてみました。 <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)
JavascriptによるHTMLの書き換えは、別のウィンドウを開こうが、そこにフォームを送信しようが元に戻ってはくれない。 preview()を実行した後も previewである事を示すhidden項目は追加されたままだし、 formのtarget属性も指定されたままになっている。 preview()のフォーム送信後、タイマーでもかけて変更内容を戻す(hidden項目を消去し、formのtarget属性を削除する)必要がある。 なぜ、actionやmethodまでJavascriptで設定しているかわからないが、必要があってそうしているなら、それらも戻してやらないと不都合が出るのかも。
補足
ご回答ありがとうございます。 >JavascriptによるHTMLの書き換えは、別のウィンドウを開こうが、そこにフォームを送信しようが元に戻ってはくれない。 とりあえずためしにプレビュー側で親ウィドウをリロードするよう以下を入れたら動作的にはうまくいきました。 <body onLoad="window.opener.location.reload(true)"> ただ、「情報を再送信…」というメッセージが出てOKをしなければうまくいきません。 この「情報を再送信…」のメッセージをJS側で強制OKにすることは出来るんですかね…？（ちょっと話はそれてしまって、恐縮です。）
- fujillin
- ベストアンサー率61% (1594/2576)
よくわかっていませんが・・・ 引数の値によって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ならプレビューという判断になります。
補足
説明不足でした。申し訳ございません。 (1)登録 … 実際にTSVファイルにデータを書込み、その内容をもとにHTMLページを生成 (2)プレビュー … 仮のTSVファイルにデータを書込みその内容をもとにHTMLページを出力（その為、別ウィンドウ） …となっております。 １）入力フォームのdata1～data3がhidden設定されていますが、入力用なのでtextまたはtextareaなのでは？ →ここに関しては入力後の確認画面なので、hiddenで持っています。 ２）プレビューの際にわざわざ別ウィンドウを開いている理由が不明。 →冒頭の理由です。 プレビュー後に登録をすると、別ウィンドウが立ち上がり、プレビュー時にしか出来ないはずのhidden値までわたってしまいます。
- auty
- ベストアンサー率58% (284/486)
・ たぶん、プレビュー画面で確認後それを閉じる前に、親ウィンドウ（opener）のhidden属性nameを削除しておけばよいのでは。
補足
ご回答ありがとうございます。 JavaScript初心者の為、どのような記述をしてよいかわかっておりません。何か参考のページやサンプル等をお教えいただけますでしょうか ちなみに別ウィンドウのプレビュー画面をBODYを以下のようにしたところやはりだめでした。 <body onLoad="window.opener.document.getElementById('page').value='';window.close();">
補足
移動中の為携帯からのアクセスです ちなみにご指摘の通りでieでだめでした