- ベストアンサー
ページを再読み込み後、再読み込み前の状態に復元する方法が分からず困っております。
(多分)JavaScriptで分からない所がございましたので、ご教示いただける方がいらっしゃいましたら、よろしくお願いします。 【やりたいこと】 1. ボタンをクリックするとボタンにチェック(とりあえず色)をつけた上で、ページの再読み込みをしたいです。 2. ページの再読み込み後、ページの再読み込み前の状態に復旧したい(ページの再読み込み前にチェックしていたボタンの状態を保持しておきたい)です。 【状況】 1はできております。 ただし、1のページの再読み込み後、今までチェックしていたボタンが未チェック状態に戻ってしまいます。 【ソースコード】 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>title</title> <script type="text/javascript"> <!-- var f=new Array(5); f[0]=0; f[1]=0; f[2]=0; f[3]=0; f[4]=0; f[5]=0; function jump(b){ if (f[b]==0){ document.getElementById("form_check").elements[b].style.background='#dbed00'; document.getElementById("form_check").elements[b].style.color='#323232'; f[b]=1; } else { document.getElementById("form_check").elements[b].style.background='#d6d6d6'; document.getElementById("form_check").elements[b].style.color='#666666'; f[b]=0; } var text = ""; if (f[0] == 1) { text += document.getElementById("form_check").a.value; } if (f[1] == 1) { text += document.getElementById("form_check").b.value; } if (f[2] == 1) { text += document.getElementById("form_check").c.value; } if (f[3] == 1) { text += document.getElementById("form_check").d.value; } if (f[4] == 1) { text += document.getElementById("form_check").e.value; } if (f[5] == 1) { text += document.getElementById("form_check").f.value; } if (text) { alert("チェックされているのは" + text + "です。\n「OK」で再読み込み実施。"); } else { alert("何もチェックされていません。\n「OK」で再読み込み実施。"); } } --> </script> </head> <body> <form id="form_check" method="post" action="<?php echo $_SERVER['PHP_SELF'] ?>"> <p><input type="submit" value="a" name="a" onclick="jump(0)" onkeypress="jump(0)" /></p> <p><input type="submit" value="b" name="b" onclick="jump(1)" onkeypress="jump(1)" /></p> <p><input type="submit" value="c" name="c" onclick="jump(2)" onkeypress="jump(2)" /></p> <p><input type="submit" value="d" name="d" onclick="jump(3)" onkeypress="jump(3)" /></p> <p><input type="submit" value="e" name="e" onclick="jump(4)" onkeypress="jump(4)" /></p> <p><input type="submit" value="f" name="f" onclick="jump(5)" onkeypress="jump(5)" /></p> </form> </body> </html> どこかご教示いただけるようでしたら、ご教示いただければと思います。 以上、よろしくお願いします。
- iroha_168
- お礼率89% (204/228)
- JavaScript
- 回答数7
- ありがとう数17
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
pick52さん、ご指摘ありがとうございます。ぼけてました。 仕様もちょっと勘違いしてたので、こんな感じでどうでしょ？ //hoge.php <? session_start(); $req_s=$_REQUEST["s"]; $ses_s=&$_SESSION["s"]; if(is_array($ses_s)) $key=array_search($req_s,$ses_s); if (is_numeric($key)){ unset($ses_s[$key]); }else{ $ses_s=array_merge($ses_s,$req_s); } if(is_array($ses_s)){ foreach($ses_s as $val){ $class[$val]="class='color0'"; } } //print_r($ses_s);//セッションの内容を確認 print <<<eof <html> <head> <title>title</title> <script type="text/javascript" src="hoge.js"></script> <link rel="stylesheet" type="text/css" href="hoge.css" /> </head> <body> <form id="form_check" method="post" action="{$_SERVER['PHP_SELF']}"> <p><input type="submit" value="a" name="s" onClick="return jump(this);"{$class["a"]} /></p> <p><input type="submit" value="b" name="s" onClick="return jump(this);"{$class["b"]} /></p> <p><input type="submit" value="c" name="s" onClick="return jump(this);"{$class["c"]} /></p> <p><input type="submit" value="d" name="s" onClick="return jump(this);"{$class["d"]} /></p> <p><input type="submit" value="e" name="s" onClick="return jump(this);"{$class["e"]} /></p> <p><input type="submit" value="f" name="s" onClick="return jump(this);"{$class["f"]} /></p> </form> </body> </html> eof; ?> //hoge.css .color0{ background-Color:#dbed00; color:#323232; } p{ margin:0px; padding:0px; } //hoge.js function jump(obj){ var f=obj.form; var c=obj.className; obj.className=c=="color0"?"":"color0"; var text=""; for(var i=0;i<f.length;i++){ if(f[i].type=="submit" && f[i].name==obj.name && f[i].className=="color0"){ text+=(text==""?"":",")+f[i].value; } } if (text) { var flg=confirm("チェックされているのは" + text + "です。\n再読み込みしますか？"); } else { alert("何もチェックされていません。"); var flg= false; } if(flg) return true; obj.className=c; return false; }
その他の回答 (6)
- pick52
- ベストアンサー率35% (166/466)
yambejpさんの方法ってなんかサーバ側で特殊な設定しないとPHPとして 動作しないんじゃ...。 (しかもApacheなどの特定のサーバしか対応していないんじゃないで しょうか) ちょっと興味があったので調べてみるとまず通常、PHPスクリプトの 拡張子はphpですしPHPコードは <?php ～ ?> としないといけませんよね。 変数を出力するには echo() を使わないとHTML上に表示されませんし。 で、その若干の修正を区祝えてテストしてみましたが、チェックは 一つだけしか保持しないようです。 まあ、そこはJavaScriptの修正で対応できるのかもしれませんが これ以上のことはよく分かりません。
お礼
ありがとうございます。 まさにご指摘のとおりでした。 使用しているサーバはApacheなのでサーバの設定を変更(拡張子htmでphpが動作するように変更、短縮型の記述の有効化)した所、動作するようになりました。 そして動作結果も私が試した結果と同じような感じです (ただ、1回目の再読み込みのみに対応しているのか、1つだけしか保持できないのかはまだソースを追っていないため、未検証です)。 ご確認いただきありがとうございます。 以上、よろしくお願いします。
補足
下記の回答で誤りがあったみたいなので、訂正いたします。 ×1回目の再読み込みのみに対応している ○クリックしたボタンのみ再読み込み後に引き継いでいるようです。 その為、以前クリックした値は引き継がれないようです。 ソースを追った所、下記の2点にその原因があるような感じです。 ・s.valueにクリックした値しか入っていないようです。 ・textにクリックした値しか入っていないようです。 以上、よろしくお願いします。
- yambejp
- ベストアンサー率51% (3827/7415)
あれぇ・・・おかしいなコピペミスかな・・ 通常IE6/Firefox3でしかチェックしてないんですが あらためてOpera9/Netscape7.1でも確認しましたが動作していますね。 単純にコピペするだけなんですけどねぇ・・・
お礼
ありがとうございます。 どうもこちらの環境でphpの短縮型の記述が無効化されているのが原因だったみたいです。 actionのphp部分は修正したのですが、valueのphp部分を修正していなかったためそのような動作になったようです。 サーバの設定を変更し、phpの短縮型を有効にした上で、コピペした所、先ほどとは違う動作になりました。 しかし、意図していた動作とは違っているような感じでした。 以下がその結果となります。 どうも1回目の再読み込みのみ対応しているような気がしました (私のソースでは1回目の再読み込み自体に対応していません)。 その為、2回目以降は正常に動作しないような感じです。 【手順1】 1. 最初にアクセス時・・・どこにもチェックは付いておりません(○)。 2. aをクリックし、再読み込み・・・aにチェックが付いています(○)。 3. bをクリックし、再読み込み・・・bにチェックが付いています(×)。 ※ページの再読み込み前の状態に復旧したい為、3の場合は、a,bにチェックが付いてほしいです。 【手順2】 1. 最初にアクセス時・・・どこにもチェックは付いておりません(○)。 2. aをクリックし、再読み込み・・・aにチェックが付いています(○)。 3. 再度aをクリックし、再読み込み・・・aにチェックが付いています(×)。 ※ページの再読み込み前の状態に復旧したい為、3の場合は、どこにもチェックが付いてほしくないです。 ご教示いただいたソースが動く環境が整いましたので、こちらでも検証してまいりたいと思います。 以上、よろしくお願いします。
- yambejp
- ベストアンサー率51% (3827/7415)
cookieは面倒なので、php+javascriptでこんなかんじでどうでしょう？ //hoge.htm <html> <head> <title>title</title> <script type="text/javascript" src="hoge.js"></script> <link rel="stylesheet" type="text/css" href="hoge.css" /> </head> <body> <input type="hidden" id="s" value="<?=$_REQUEST['s'];?>"> <form id="form_check" method="post" action="<?=$_SERVER['PHP_SELF'];?>"> <p><input type="submit" value="a" name="s" onClick="return jump(this);" /></p> <p><input type="submit" value="b" name="s" onClick="return jump(this);" /></p> <p><input type="submit" value="c" name="s" onClick="return jump(this);" /></p> <p><input type="submit" value="d" name="s" onClick="return jump(this);" /></p> <p><input type="submit" value="e" name="s" onClick="return jump(this);" /></p> <p><input type="submit" value="f" name="s" onClick="return jump(this);" /></p> </form> </body> </html> //hoge.css .color0{ background-Color:#dbed00; color:#323232; } p{ margin:0px; padding:0px; } //hoge.js window.onload=function(){ var s=document.getElementById("s"); var f=document.getElementById("form_check"); if(s.value=="" || f.elements[s.value]) return false; for(var i=0;i<f.length;i++){ if(f[i].name=="s" && f[i].value==s.value){ f[i].className="color0"; break; } } } function jump(obj){ var f=obj.form; obj.className="color0"; var text=obj.value; if (text) { var flg=confirm("チェックされているのは" + text + "です。\n再読み込みしますか？"); } else { alert("何もチェックされていません。"); var flg= false; } if(!flg) return false; return true; }
お礼
ありがとうございます。 記載されているソースを試してみた所、下記の動作となりました(私が質問欄で記載させていただいたソースと見た目の動作は同じように見受けられました)。 もしかしたら私のコピペミスや、開発環境の違いかもしれませんが・・・。 【IE7、Firefox2】 1. 最初にアクセス時・・・どこにもチェックは付いておりません(○)。 2. aをクリックし、再読み込み・・・どこにもチェックは付いておりません(×)。 【私が質問欄で記載させていただいたソースのIE7の動作】 1. 最初にアクセス時・・・どこにもチェックは付いておりません(○)。 2. aをクリックし、再読み込み・・・どこにもチェックは付いておりません(×)。 まだご教示いただいたソースを読み込んでいない為、ソースを確認しながら対応していきたいと思います。 以上、よろしくお願いします。
- fujillin
- ベストアンサー率61% (1594/2576)
＞ページの再読み込みをしたいです。 って、リロードってことでしょうか？ 同じ内容をリロードする意味がよくわかりません。 通常は、次の処理（入力内容の確認画面とか）に移動するのが普通だと思うのですが？ その場合はフォームの内容がサーバに送信されるので、サーバ側のスクリプトでその内容に応じて処理をすることになると思います。ただし、質問文の内容だと、変数の状態はフォームの中にないので送信されませんね。hiddenのフォームに変数の内容をいれて送るとかすればできますが、サーバサイドの処理を実行できる環境でしょうか？ クライアント側での処理を基本にするのなら、#2様の回答のように変数をクッキーに保存しておいて受け渡すのが一番簡単でしょう。
お礼
ありがとうございます。 ページの再読み込みはリロードとなります。 考えている動作としては、ボタンをクリックすると「ある処理」を行い、再度そのページに戻ってくる事をイメージしております。 なお今回のソースでは「ある処理」の部分は省かせていただき、あくまで実行後再度そのページに戻ってくる部分のみ抽出させていただきました。 なので、例としてあげていただいた入力内容の確認画面(多分メールフォームの確認画面などを指しているものと思われますが)とは異なるのかなと思います(確かに通常は入力画面→確認画面というように遷移するものと思われます)。 それとサーバサイドの処理は可能です。 現在私の管理しているサーバで検証を行っておりますので、php.iniやhttpd.confなどの設定変更なども可能な環境となっております。 その為、必ずしもクライアント側での処理にはこだわっておりません(サーバ側、クライアント側どちらでも大丈夫です)。 以上、よろしくお願いします。
- pick52
- ベストアンサー率35% (166/466)
ページを更新すればページの内容が初期化されるのは仕様だから仕方 ないのでは。 どうしても戻したい場合は、フォームなどを変更する度にその編集内容を チェックしてサーバなりクライアント側にデータを保存するようにする しかないです。 (クライアントのCookieを使用するのが普通だと思います) 前の状態を保存しておけばあとは簡単ですよね。
お礼
cookieを使用すればよいのですね。 一度調べてみたいと思います。 どうもありがとうございました。
- yambejp
- ベストアンサー率51% (3827/7415)
PHPの記述がみられますが、処理はPHPでやってよいのですか？
お礼
はい、phpを使用することは可能です。 ということはphpを使えば出来そうと言うことですか? てっきりJavaScriptで行うものと思っておりました。 一度調べてみたいと思います。 どうもありがとうございました。
お礼
ありがとうございます。 こちらでもセッションを使用し、値を保持しようとしたのですが、うまくいかず手詰まりとなっておりました。 一通り動作確認確認した所、下記の一点のみ仕様と異なりました。 【手順1】 1. 最初にアクセス時・・・どこにもチェックは付いておりません(○)。 2. aをクリックし、再読み込み・・・aにチェックが付いています(○)。 3. 再度aをクリックし、再読み込み・・・aにチェックが付いています(×)。 ※ページの再読み込み前の状態に復旧したい為、3の場合は、どこにもチェックが付いてほしくないです(なおその際のメッセージは「何もチェックされていません。」と表示されるので、この部分は正常な動作となります)。 こちらでもソースを読みし、どの部分で問題が発生しているか特定してみようと思います。 以上、よろしくお願いします。
補足
いつもお世話になっております。 「この回答へのお礼」欄に記載させていただいた内容ですが、「この回答へのお礼」の手順の場合のみ $_REQUEST["s"] の中にひとつ前にクリックした値が入るのが原因みたいです(普通はクリックした値が入っていました)。 その為、hoge.jsの alert("何もチェックされていません。"); の下に下記を追記した所、その部分に関しては動作するようになりました(単にセッションを破棄していてhoge.phpのif(is_array($ses_s)){(略)}の中に入らないようにしただけですが・・・)。 <?php $_SESSION = array(); ?> もっとも変わりにメッセージが表示されなくなってしまいました・・・。 以上、よろしくお願いします。