- ベストアンサー
ページを再読み込み後、再読み込み前の状態に復元する方法が分からず困っております。
(多分)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で行うものと思っておりました。 一度調べてみたいと思います。 どうもありがとうございました。
関連するQ&A
- javascriptでログインページの作成
JSPを作成しているのですが、javascirpt構文の方が 多いため、こちらで質問をさせて頂きます。 javascript, html で ログインページを作成しています。 <%@ page contentType="text/html;charset=Shift_JIS" %> <script type="text/javascript" language="javascript"><!-- function Submit(name,pass,f){ if(name == null){ document.getElementBy(f).action="http://www.yahoo.co.jp"; document.getElementById(f).submit(); }else{ document.getElementById(f).action="http://www.google.co.jp"; document.getElementById(f).submit(); } } //--></script> <form action="login.jsp" method="post" NAME="f1"> <table border="1" width="30%"> <tr> <td>ユーザーID:</td> <td><input type="text" name="admin" size="25" value=""></td> </tr> <tr> <td>パスワード:</td> <td><input type="password" password="password" value=""></td> </tr> </table> <%--- これが悪いのかも!? --- %> <% String name = request.getParameter("name"); String password= request.getParameter("password"); %> <input type="submit" value="ログイン" onClick="Submit('name','password','f1');"> </form> </body> </html> ログインボタンをクリックして、name,password,f1(formの名前）を function のSubmitに値を渡したいのですが、nullが渡されてしまいます。 テキストボックスで入力された値を渡したいのですが、 javascript,htmlの知識が乏しいため、どこがおかしいのかわかりません。 もしわかる方が居ましたら、よろしくお願いたします。
- ベストアンサー
- JavaScript
- <input type="file"/>
に文字列をセットするために <form> <input type="file" id="x"/> </form> <input type="button" onclick="f()" value="push"/> <script> function f() { var e=document.getElementById("x"); e.value="x.txt"; } </script> としてもセットできません <form> <input type="text" id="x"/> </form> <input type="button" onclick="f()" value="push"/> <script> function f() { var e=document.getElementById("x"); e.value="x.txt"; } </script> であればセットできるのです どうしたらセットできるでしょうか？
- ベストアンサー
- JavaScript
- 【心理テスト作成】JavaScriptでページが表示されません
チェックボックスを作り、 チェックが○個で「A」のページ、 チェックが○個で「B」のページ、 といったような簡易的な心理テストを作成したいと思い、 下記の方法を教えていただいたのですが、 正常に表示がされません（泣） 「送信」のボタンを押しても何もアクションが起こらないです… 私のPCに問題があるのでしょうか？？ 申し訳ありません、 初心者でよく分かりませんのでよろしくお願い致します。 ▼ココからです▼ <html> <head> <title>Sample</title> <script language="JavaScript"> <!-- function jump() { count = 0; for (var i=0;i<document.sampleform.elements["check"].length;i++){ if ((document.sampleform.elements[i].name == "check") && (document.sampleform.elements[i].checked)) { count ++; } } if (count == 0) { // 一つもチェックされていない場合 location.href("http://www.yahoo.co.jp"); } else if (count <= 3) { // チェックが3個以下の場合 location.href("http://www.google.co.jp"); } else { // チェックが4個以上の場合 location.href("http://www.msn.co.jp"); } } //--> </script> </head> <body> <form name="sampleform"> <input type="checkbox" name="check" value="A"> A<br> <input type="checkbox" name="check" value="B"> B<br> <input type="checkbox" name="check" value="C"> C<br> <input type="checkbox" name="check" value="D"> D<br> <input type="checkbox" name="check" value="E"> E<br> <input type="button" value="送信" onclick="jump();"> </form> </body> </html>
- ベストアンサー
- JavaScript
- 現在javascriptでチェックボックスで選択した項目のvalueを
現在javascriptでチェックボックスで選択した項目のvalueを次ページに渡すものを作成しています。 １つだけ選択すると正常に値が動くのですが、複数選択すると後に選択したほうの値だけが入ってしまいます。 複数選択した場合に選択した全てのvalueが入るようにするにはどうしたらいいでしょうか？ 【1ページ目ソース】 <html> <head> <title>1page</title> </head> <body> <form name="F1" onsubmit="window.open('2page.html','_blank','');return false;"> A<input type="text" id="tanka1"> B<input type="checkbox" name="che1" id="check1" value="1">1 <input type="checkbox" name="che1" id="check1" value="2">2 <input type="checkbox" name="che1" id="check1" value="3">3 <input type="submit" value="送信" onclick=check();></form> </body> </html> 【2ページ目ソース】 <html> <head> <title>2page</title> <script> window.onload=function (){ document.F2.tanka1.value=window.opener.document.F1.tanka1.value; if (window.opener.document.F1.che1[0].checked)document.F2.check1.value=1; if (window.opener.document.F1.che1[1].checked)document.F2.check1.value=2; if (window.opener.document.F1.che1[2].checked)document.F2.check1.value=3; } </script> </head> <body> <form name="F2"> A<input type="text" id="tanka1"> B<input type="text" id="check1"> <br><br> </body> </html>
- 締切済み
- JavaScript
- 二つのform分について
<form action="./test.cgi" method="POST"> <div>テスト:<input type="text" size="70" name="keyword" value=""></div> <input type="submit" value="OK"> </form> <FORM method="post" action="#"> 外側だけですが、遊んでくださいね１６進数で!!!! <INPUT tabindex="10" accesskey="x" value="" name=BGC size=7> <INPUT tabindex="20" accesskey="x" onclick="document.bgColor='#' + document.forms[0].BGC.value" onkeypress="document.bgColor='#' + document.forms[0].BGC.value" type=button value="色変更"> </FORM> どちらも一つずつだと正常に動作します。 何か同じものが二つあるのでしょうか 何かが重複しているので 最初のformは動くけど、 2番目のformが動かないのでしょうね。 どうすれば二つとも動くでしょうか。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- ページにHTMLデータを出力の方法につきまして
いつもお世話になっております。 現在、javascriptを使って5択の問題が出題できるコンテンツを作成しております。五択を選択し、ボタンを押すと、選択した番号や正解不正解をを同じフォーム上の下に表示させたいと思っております。 サイトを参照(http://www.openspc2.org/reibun/JavaScript_technique/sample/06_DOM/007/index.html)して、test01.html内では同じフォーム上に結果を出すことまではできたのですが、テストの種類を増やしたくて、test02.htmlを作りました。test01で使用したプログラムをコピーして、必要そうなID名などだけを変えてみたのですが、test02.htmlでは動いてくれず、行き詰まっていましました。 js側 window.onload = function() { document.getElementById("check").onclick = function() { //すべての解答を入れる変数の定義 var anserbox = "" //問1 var checkList = ["q1_01","q1_02","q1_03","q1_04","q1_05"]; for(var i=0; i<checkList.length; i++) { var chkObj = document.getElementById(checkList[i]); if (chkObj.checked) { anserbox += "問1は"+ chkObj.value + "を選択しました<br>"; if (chkObj.value == 1){ anserbox += "正解<br>"; } //if (chkObj.value == 1){ point += 5; } else anserbox += "不正解<br>正解は1です<br />"; } } //anserboxに格納された値をウィンドウに表示する document.getElementById("result").innerHTML = anserbox; } document.getElementById("check2").onclick = function() { //すべての解答を入れる変数の定義 var anserbox = "" //問1 var checkList = ["q1_01","q1_02","q1_03","q1_04","q1_05"]; for(var i=0; i<checkList.length; i++) { var chkObj = document.getElementById(checkList[i]); if (chkObj.checked) { anserbox += "問1は"+ chkObj.value + "を選択しました<br>"; if (chkObj.value == 1){ anserbox += "正解<br>"; } //if (chkObj.value == 1){ point += 5; } else anserbox += "不正解<br>正解は1です<br />"; } } document.getElementById("result2").innerHTML = anserbox; } } test01.html側 <form action="./enq.cgi" method="get"> <label><input type="radio" id="q1_01" name="q1" value="1">1</label><br> <label><input type="radio" id="q1_02" name="q1" value="2">2</label><br> <label><input type="radio" id="q1_03" name="q1" value="3">3</label><br> <label><input type="radio" id="q1_04" name="q1" value="4">4</label><br> <label><input type="radio" id="q1_05" name="q1" value="5">5</label><br> <input type="button" id="check" value="チェック" > </form> <div id="result">結果：</div> test02.html側 <form action="./enq.cgi" method="get"> <label><input type="radio" id="q1_01" name="q1" value="1">1</label><br> <label><input type="radio" id="q1_02" name="q1" value="2">2</label><br> <label><input type="radio" id="q1_03" name="q1" value="3">3</label><br> <label><input type="radio" id="q1_04" name="q1" value="4">4</label><br> <label><input type="radio" id="q1_05" name="q1" value="5">5</label><br> <input type="button" id="check2" value="チェック" > </form> <div id="result2">結果：</div> js側の3行目のdocument.getElementById("check").onclick = function()は実行されるのですがtest01.htmlはokなのですが、 中段にありますdocument.getElementById("check2").onclick = function()はボタンを押しても無反応です。(test02.html) どちらも単体では実行可能でしたので、使い方に間違いがあるのかも知れません。今日一日でわからなかったら質問しようと思っていましたので、投稿致します。 どうかご教授宜しくお願い致します。
- ベストアンサー
- JavaScript
- ラジオボタンの入力制御について（表示した時のみ制御を行う）
yesの場合はid=ABを表示し、noの場合はid=ABを非表示にする制御を行っています。 両方yesの場合は表示。両方noの場合は非表示。 片方がnullの場合は、yesで表示しnoで非表示としています。 ここまでの動作は、問題ないのですが id=ABを表示した場合、hoge3が入力必須となり id=ABを表示しない場合、hoge3は入力必須ではないように制御を行いたいと思っています。 他書き込みを参考にしたのと、自身で書いたものが混じって非常に汚くなっていますが ご教授願えませんでしょうか。 <script type="text/JavaScript"> <!-- function test1(){ if(document.getElementById("id01").checked) { document.getElementById('AB').style.display = ""; }else if(document.getElementById("id02").checked) { document.getElementById('AB').style.display = ""; for(i = 0; i <= 1; i ++){ document.form1.hoge3[i].checked = false; } }else{ document.getElementById('AB').style.display = "none"; for(i = 0; i <= 1; i ++){ document.form1.hoge3[i].checked = false; } } } //以下はhttp://oshiete1.goo.ne.jp/qa2119460.htmlを参考にしました function test2(f){ for (var i=0;i<f.length;i++){ if(f[i].type=="radio" && f[i].name=="hoge3" && f[i].checked==true) return true; } alert("AかBを選んでください"); return false; } //--> </script> <form name="form1" onload="test1()"onsubmit="return test2(this)"> <br> <input type="radio" name="hoge1" value="1" id="id01" onClick="test1();">yes<br> <input type="radio" name="hoge1" value="0" onClick="test1();">no<br> <br> <input type="radio" name="hoge2" value="1" id="id02" onClick="test1();">yes<br> <input type="radio" name="hoge2" value="0" onClick="test1();">no<br> <br> <p id="AB" style="display:none;"> <input type="radio" name="hoge3" value="1">Aへ進む<br> <input type="radio" name="hoge3" value="2">Bへ進む<br> </p> <br> <input type="submit" value="次へ"> </form>
- ベストアンサー
- JavaScript
- テキストボックス未記入時のアラート表示 JS
【出来ていること】 下記のように電話番号の未入をチェックしアラートを出すことができました。 <script> function check3() { tel3check = document.form3.tel3.value; data13 = tel3check; if(!data13) { alert("電話番号が未入力です13"); return; } else { document.form3.submit(); } } </script> <form method="POST" action="in.php" name = "form3"> <input type="text" name="tel3" value="" /> <input type="button" value="確認" name="sub1" onclick="check3();"> </form> 【躓いていること】 電話番号の未入だけでなく、FAXの未入もチェックしそれぞれでアラートを出そうとしましたが動きません。ご指導いただけますでしょうか? よろしくお願いいたします。 <script> function check3() { tel3check = document.form3.tel3.value; fax3check = document.form3.fax3.value; data13 = tel3check; data133 = fax3check; if(!data13) { alert("電話番号が未入力です13"); return; } elseif(!data133) { alert("FAX番号が未入力です133"); return; } else { document.form3.submit(); } } </script> <form method="POST" action="in.php" name = "form3"> <input type="text" name="tel3" value="" /> <input type="text" name="fax3" value="" /> <input type="button" value="確認" name="sub1" onclick="check3();"> </form>
- ベストアンサー
- JavaScript
- ページ遷移後のcssプロパティ保持
チェックボックスがチェックされているか否かで ディスプレイプロパティの表示/非表示を切り替えるスクリプトを作成しました。 しかしながら、submitでページ遷移した後、ブラウザの戻るボタンで戻ると 非表示の状態になってしまいます。 ページ遷移後もディスプレイプロパティを保持する良い方法はありますでしょうか。 ●javascript <script type="text/javascript"><!-- function chkdisp( obj) { if( obj.checked ){ document.getElementById('ans1').style.display = "block"; } else { document.getElementById('ans1').style.display = "none"; } } // --></script> ●html <form method="post" action="temp2.html" enctype="multipart/form-data"> <input type="checkbox" id="chk1" onclick="chkdisp(this)" /><label for="chk1">これクリックで「クリック１」</label><br /> <p id="ans1" style="display:none;">クリック１</p> <input type="submit"> </form>
- ベストアンサー
- JavaScript
- Javascriptを短くしたい
初歩的なことですみません。 Javascriptで表示／非表示を切り替えるものを作ろうと思うのですが、 以下のサンプル文のような形では、項目数が増えるとその分だけ どんどんJavascriptも長くなっていってしまいます。 Javascript文を簡潔にするには、どのように記述すればよいのでしょうか。 よろしくお願いします。 <script type="text/javascript"> <!-- function Hyo1(num) { if (num == 0) { document.getElementById("cont1").style.display="block"; } else { document.getElementById("cont1").style.display="none"; } } function Hyo2(num) { if (num == 0) { document.getElementById("cont2").style.display="block"; } else { document.getElementById("cont2").style.display="none"; } } // --> </script> <div id="cont1">ああああああ</div> <form> <input type="button" value="表示" onclick="Hyo1(0)"> <input type="button" value="非表示" onclick="Hyo1(1)"> </form> <form> <div id="cont2">いいいいいい</div> <input type="button" value="表示" onclick="Hyo2(0)"> <input type="button" value="非表示" onclick="Hyo2(1)"> </form>
- ベストアンサー
- 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(); ?> もっとも変わりにメッセージが表示されなくなってしまいました・・・。 以上、よろしくお願いします。