フォームPOST後「戻る」時のチェック値の取得

このQ&Aのポイント
  • フォームでPOSTした後、戻るボタンで戻った時に、チェックされているラジオボタンの値を取得する方法はありますか。
  • 選択したラジオボタンの値は、戻る後も保持されません。
  • 選択したラジオボタンの値を取得する方法について教えてください。
回答を見る
  • ベストアンサー

フォームPOST後「戻る」時のチェック値の取得

フォームでPOSTをしたあと、history.backや戻るボタンで戻ったときに、POST時に選択したラジオボタンのcheckedもfalseになってしまうのですが、チェックされているものを取得することはできるのでしょうか。 ■form部分 <form name="form1" method="post" action="..."> <input type="radio" name="radio1" value="1">1<br /> <input type="radio" name="radio1" value="2">2<br /> <input type="radio" name="radio1" value="3">3<br /> </form> ■JavaScript部分 var radio1 = document.form1.radio; for(var i=0;i<radio1.length;i++) { if (radio1[i].checked) { alert(i); } } このようなコードで、選択してPOST後、「戻る」で入力ページ表示時にJavaScriptを実行しても、 radio1[i].checkedは全てfalseになってしまいます。 また選択→POST→戻る→そのままPOSTとすると、選択したvalue値は正しくサーバーに送られます。 「戻る」でのページ表示時に選択したものを取得する方法があれば教示いただけますか。

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

  • ベストアンサー
  • tracer
  • ベストアンサー率41% (255/621)
回答No.1

どのブラウザのどのバージョンで確認されているのでしょうか。 記憶では、質問の挙動は、ブラウザによって異なると思いますよ。 仮に、質問の挙動に限定するならば、初回の送信時に、cookieやLocal Storageに保存すれば参照できます。 また、複数回の送信をされたくない場合は、明示的にJSで値をリセットするか、あるいは、ajaxで通信すれば、そもそも履歴に残らないので、「戻る」では送信前のページには戻りません。

Goody-goody
質問者

お礼

ありがとうございます。 ブラウザはそれぞれ現在の最新 IE11、FF30、Chrome35で同じ挙動です。 JavaScriptでフォームを整形(1階層目の選択で2階層目を絞り込み)しているのですが、入力値をCookieに持たせたくないのでセッションを使った方が無難ですね。

その他の回答 (1)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

>「戻る」でのページ表示時に選択したものを取得する方法 onsubmit時にクッキーにチェック状態を保存しておき onload時にクッキーの状態をみてチェックを設定する というのが妥当 むしろ「戻る」をさせないようにすれば、そんなことを悩む必要もなくなります ただしその場合セッション的な処理になるのでjavascriptだけでは厳しいかも

Goody-goody
質問者

お礼

ありがとうございます。 仕様という感じのようなので諦めます。 入力値をCookieに持たせたくないのでセッションを使った方が無難ですね。

関連するQ&A

  • チェックボックスの表示・非表示 動作

    はじめまして。 初めて掲示板を利用させていただきます。javascriptを勉強しまだ日が浅いのでご存知の方がいらっしゃれば教えてください。 今、チェックボックスを選択し選択した項目がアクティブになるようにしたいのですが、選択項目が重複すると以下のようになってしまいました。 A+AB=AB A+AB+E=ABE 個々までは問題なし。 既に全てのチェックが付いた上体で、ABCE-A=BCE となってしまい、 ABのチェックが入っていても、Aが消えてしまいます。 以下に現在のコードを張ります。 <script type='text/javascript'> <!-- function fchk2(obj, name) { var frm=obj.form; if(obj.checked==true) { /* チェックボックスが選択されている場合は、   テキストボックスを有効化(false)*/ for(var i=1; i<=3; i++){ frm.elements[name+i].disabled=false; } } else { for(var i=1; i<=3; i++){ /* 無効化する前に、入力値をクリア */ if(name=='t'){ /* テキストボックスの場合 */ frm.elements[name+i].value=''; }else{ /* チェックボックスの場合 */ frm.elements[name+i].checked=false; } /* 無効化(true) */ frm.elements[name+i].disabled=true; } } } //--> </script> <form name='form2' action='#'> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t")' checked>A<br> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t");fchk2(this,"b");' checked>AとB<br> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t");fchk2(this,"e");' checked>AとE<br> <input type='checkbox' name='chk2' value='1' onclick='fchk2(this,"c");fchk2(this,"e");' checked>CとE<br> <br> A<input type='text' name='t1' value='テキストA'><br> A<input type='text' name='t2' value='テキストB'><br> A<input type='text' name='t3' value='テキストC'><br> <br> B<input type='text' name='b1' value='テキストA'><br> B<input type='text' name='b2' value='テキストB'><br> B<input type='text' name='b3' value='テキストC'><br> <br> <input type='checkbox' name='c1' value='1'> 選択肢C<br> <input type='checkbox' name='c2' value='1'> 選択肢C<br> <input type='checkbox' name='c3' value='1'> 選択肢C<br> <br> <input type='checkbox' name='e1' value='1'> 選択肢E<br> <input type='checkbox' name='e2' value='1'> 選択肢E<br> <input type='checkbox' name='e3' value='1'> 選択肢E </form> よろしくお願いいたします。

  • チェックボックス とラジオボタンの値取得について

    チェックボックス とラジオボタンの値取得について こんにちは チェックボックスの中にラジオボタンがある場合に チェックボックスの値に続けてラジオボタンの値を表示したいのですが、 うまくいかず悩んでいます。 【やりたいこと】 □そのた2をチェクして男性を選択した場合 「そのた2 男性」と表示したい。 例 そのた1 そのた2 男性 そのた4 そのた5 女性 サンプルのチェックボックスのlabelタグをはずすと $(vals[i]).next($("input[name='radio']:checked").val()); で値を取得できたのですが、 labelタグを付けたまま値を取得することは可能でしょうか? labelタグをつけたまま、 $(vals[i]).find($("input[name='radio']:checked").val()); でやってみたのですが、undefindがでてしまいました。 サンプルではチェックボックスの数は1個ですが、 □が30個以上 のチェックボックスが50個くらいあるので、 1回の記述で済ませたいのですが、 ラジオボタンが隣にあったら値を取得する のようにできるのでしょうか? 何かよい方法があれば教えて頂けないでしょうか。 よろしくお願い致します。 ■サンプルソース <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script type="text/javascript" language="JavaScript"></script> <script language="javascript"> <!-- function textb(){ var str=""; var vals = document.forms['f'].elements['q1']; for(i=0; i<vals.length; i++){ if(vals[i].checked){ str=str + vals[i].value + '\n'; } } document.f.log.value=str; } --> </script> <title></title> </head> <body> <form name="f"> <div>アンケート<br> <label for="1"><input type="checkbox" name="q1" class="chex" id="1" value="その1"> その1</label><br> <label for="2"><input type="checkbox" name="q1" class="chex" id="2" value="その2"> その2</label> <input type="radio" name="radio1" value="可">男性 <input type="radio" name="radio1" value="否">女性 <br> <label for="3"><input type="checkbox" name="q1" class="chex" id="3" value="その3"> その3</label><br> <label for="4"><input type="checkbox" name="q1" class="chex" id="4" value="その4"> その4</label><br> <label for="5"><input type="checkbox" name="q1" class="chex" id="5" value="その5"> その5</label> <input type="radio" name="radio2" value="可">男性 <input type="radio" name="radio2" value="否">女性 <br> </div> <input type="button" value="確認" onclick="textb()"> <input type="reset" value="クリア"> <br> <textarea name="log" rows="4" cols="50"></textarea></form> </body> </html>

  • チェックボックスのjavascriptについて

    javascript初心者です! お力をお借りしたいと思い質問いたしました。 宜しくお願い致します。 ●やりたい事 ・チェックボックスがチェックされてない時に「商品を選択して下さい」のアラートを表示させ、1つでもチェックされていた場合は「送信」できる設定を行いたいです。 「name= 」 部分を同じ名前にすると可能ですが、異なる名前にすると動作いたしません。 どうかご教授お願い致します。 ■javascript部分 <script language="JavaScript" type="text/javascript"> function CheckForm(theform) { var FormOK = false; if (!theform.category1[0].checked && !theform.category2[1].checked && !theform.category3[2].checked && !theform.category4[3].checked && !theform.category5[4].checked) { alert("商品を選択してください。"); }else{ FormOK = true; } return FormOK; } function FieldControl(element, message) { alert(message); } </script> ■HTML部分 <form name="theform" onsubmit="return CheckForm(this);" action="" method="post"> <input value="category1" name="category1" type="checkbox">category1<br> <input value="category2" name="category2" type="checkbox">category2<br> <input value="category3" name="category3" type="checkbox">category3<br> <input value="category4" name="category4" type="checkbox">category4<br> <input value="category5" name="category5" type="checkbox">category5<br><br> <br> <br> <input value="送信" name="submit" type="submit"></form> 宜しくお願い致します。

  • フォームからデータを取得してテキストファイルに保存して表示する際の質問

    CGIかなりの初心者です。 infoseek iswebでcgi-lib.plを使って、フォームからデータを取得してテキストファイルに保存してまたそのファイルから読み込んで表示するだけのプログラムを作っているのですが、アクセスするたびにテキストファイルが空になってしまいます。以下のソースなのですが、間違いを指摘していただけないでしょうか? 尚、ひとまず、フォームの項目は3つあり、そのうちの最後だけが0か1か選択でき、他は0しか選択できないようにしています。 #!/usr/bin/perl require "cgi-lib.pl"; print "Content-type: text/html;\n\n"; # 値をテキストファイルから読み込む open (IN,"test.txt"); $aaa = <IN>; close (IN); $h = substr($aaa,0,1); $i = substr($aaa,1,1); $k = substr($aaa,2,1); print " <html> <head> <title>テスト</title> </head> <body> $h$i$k <br> <form method=\"post\" action=\"test.cgi\"> データ1<br><input type=\"radio\" name=\"h\" value=\"0\" checked=\"checked\">0<br> データ2<br><input type=\"radio\" name=\"i\" value=\"0\" checked=\"checked\">0<br> データ3<br><input type=\"radio\" name=\"k\" value=\"0\" checked=\"checked\">0<br> <input type=\"radio\" name=\"k\" value=\"1\">1<br> <input type=\"submit\" value=\"送信\"> </form> "; &ReadParse(*form); # フォームの値を取得 $fh = $form{"h"}; $fi = $form{"i"}; $fk = $form{"k"}; # 値をテキストファイルに書き出す @faaa = ("$fh","$fi","$fk"); open (OUT,"> test.txt"); print OUT @faaa; close (OUT); print " </body> </html> ";

    • 締切済み
    • CGI
  • javascriptでラジオボタンをチェックさせて、それによってリンク

    javascriptでラジオボタンをチェックさせて、それによってリンクを飛ばしたいと考えています。 自分なりに調べて、作成したのですが、 フレームを利用しており、ページ全体を移動(top)したいのですが、フレーム内でしか表示されません。 <HTML> <HEAD> <TITLE>らじお</TITLE> <SCRIPT LANGUAGE="JavaScript"> function jump(){ var flag = 0; for(i=0; i<document.forms[0].url.length; i++){ if(document.forms[0].url[i].checked){ flag = 1; window.location.href = document.forms[0].url[i].value; } } if(flag == 0){ alert('ラジオボタンが選択されていません。'); } } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="radio" NAME="url" VALUE="表示したいURL.htm" checked>選択肢1<br> <INPUT TYPE="radio" NAME="url" VALUE="表示したいURL.htm">選択肢2<br> <INPUT TYPE="radio" NAME="url" VALUE="表示したいURL.htm">選択肢3ド<br> <INPUT TYPE="button" onClick="jump();" VALUE="移動"> </FORM> </BODY> </HTML> 上記状態で、あちらこちらに"_top"を挿入してみたのですが、うまくいきません。 どなたかお知恵を拝借出来ませんでしょうか?

  • アンケートフォームの作り方

    アンケートフォームを作りたいのですが、以下のプログラムにおいてのoutput.php の作り方がわかりません。最終的には、アンケート結果を出力(最後の質問の見る回数に関しては、これまでの平均をだす)をしたいとおもっています。http://www.standpower.com/php_form.htmlを参考にしてつくってみたもののうまくいきません。というのも、そのページに書かれている質問は1つしかないので、今回のように3つ質問があるとどうすればいいのかわからないからです。どなたか教えていただけないでしょうか? <html> <body> <b>あなたの年齢を教えてください</b> <form method = "post" action = "output.php"><br> <input type = "radio" name = "toshi" value = "1" checked>10代<br> <input type = "radio" name = "toshi" value = "2" >20代<br> <input type = "radio" name = "toshi" value = "3" >30代<br> <input type = "radio" name = "toshi" value = "4" >40代<br> <input type = "radio" name = "toshi" value = "5" >50代<br> <input type = "radio" name = "toshi" value = "6" >60代<br> <input type = "radio" name = "toshi" value = "7" >70歳以上<br><br> <b>お昼によくみる番組は?</b><br> <input type = "radio" name = "type" value = "8" checked>ピンポ<br> <input type = "radio" name = "type" value = "9" >スクランブル<br> <input type = "radio" name = "type" value = "10" >笑っていいとも<br> <input type = "radio" name = "type" value = "11" >おもいっきりいいTV<br><br> <b>週に何回見ますか?</b><br> <input type = "text", name = "test_about_other" maxlength="100"><br><br> <INPUT TYPE="submit" VALUE="送信"> <INPUT TYPE="reset" VALUE="やり直し"<BR><BR> </form> </body> </html>

    • ベストアンサー
    • PHP
  • ラジオボタンとチェックボックスの計算について

    ラジオボタンとチェックボックスで選択して、その合計を表示させたいのですが、合計の最高は50になる用に作ったのですが、9点にしかなりません。 私が考えるに、<script language="JavaScript">~</script>の間が間違っていると思うのですがどうでしょうか? 皆様ご教授の程お願いします。 <script language="JavaScript"> <!-- // 項目の合計を計算 function ttlValue() { chn = 10; // ラジオボタンとチェックボックスの総数 ttl = 0; for(i=0; i<chn; i++) { if(document.nForm.elements[i].checked) { ttl += eval(document.nForm.elements[i].value); } } document.nForm.result.value = ttl; } //--> </script> </head> <body alink="#000000" bgcolor="#f0f8ff" link="#00ffff" text="#000000" vlink="#ff0000"> <br> それぞれの項目で該当する回答を1つずつ選択して下さい。 <form name="nForm">項目1<br> <input name="ch1" value="3" checked="checked" type="radio">a<br> <input name="ch1" value="2" type="radio">b<br> <input name="ch1" value="1" type="radio">c<br> <input name="ch1" value="0" type="radio">d<br> <br> 項目2<br> <input name="ch2" value="3" checked="checked" type="radio">a<br> <input name="ch2" value="2" type="radio">b<br> <input name="ch2" value="1" type="radio">c<br> <input name="ch2" value="0" type="radio">d<br> <br> 項目3<br> <input name="ch3" value="3" checked="checked" type="radio">a<br> <input name="ch3" value="2" type="radio">b<br> <input name="ch3" value="1" type="radio">c<br> <input name="ch3" value="0" type="radio">d<br> <br> 項目4<br> <input name="ch4" value="1" checked="checked" type="radio">a<br> <input name="ch4" value="0" type="radio">b<br> <br> 項目5<br> <input name="ch5" value="1" checked="checked" type="radio">a<br> <input name="ch5" value="0" type="radio">b<br> <br> オプションがあれば選択して下さい。(複数選択可)<br> <input name="bx1" value="1" type="checkbox">1<br> <input name="bx1" value="1" type="checkbox">2<br> <input name="bx1" value="1" type="checkbox">3<br> <input name="bx1" value="1" type="checkbox">4<br> <input name="bx1" value="1" type="checkbox">5<br> <input name="bx1" value="1" type="checkbox">6<br> <input name="bx1" value="1" type="checkbox">7<br> <input name="bx1" value="1" type="checkbox">8<br> <input name="bx1" value="1" type="checkbox">9<br> <input name="bx1" value="1" type="checkbox">10<br> <input name="bx1" value="1" type="checkbox">11<br> <input name="bx1" value="1" type="checkbox">12<br> <input name="bx1" value="1" type="checkbox">13<br> <input name="bx1" value="1" type="checkbox">14<br> <input name="bx1" value="1" type="checkbox">15<br> <input name="bx1" value="1" type="checkbox">16<br> <input name="bx1" value="1" type="checkbox">17<br> <input name="bx1" value="1" type="checkbox">18<br> <input name="bx1" value="1" type="checkbox">19<br> <input name="bx1" value="1" type="checkbox">20<br> <input name="bx1" value="1" type="checkbox">21<br> <input name="bx1" value="1" type="checkbox">22<br> <input name="bx1" value="1" type="checkbox">23<br> <input name="bx1" value="1" type="checkbox">24<br> あなたの獲得したメダルは何色?<br> <select name="ch2"> <option value="0" selected="selected">なし</option> <option value="5">金メダル</option> <option value="3">銀メダル</option> <option value="1">銅メダル</option> </select> <br> <br> メダル獲得まで何年かかりましたか?<br> 項目6<br> <input name="ch6" value="10" checked="checked" type="radio">20年以上<br> <input name="ch6" value="5" type="radio">19年~10年<br> <input name="ch6" value="3" type="radio">9年~5年<br> <input name="ch6" value="1" type="radio">4年~3年<br> <input name="ch6" value="0" type="radio">2年未満<br> <br> <input value="合計金額を計算" onclick="ttlValue()" type="button"><br> <br> 合計<input name="result" size="10" type="text"> </form> <br>

  • java script フォームのチェックボックス入力制限について

    java script フォームのチェックボックス入力制限について どなたかお教えください。 以下のコードを書き換えて、現状では1つのチェックボックスを複数にし(かつ、複数選択可にし)、チェックボックスをチェックした場合のみ「選択肢」ラジオボタンがアクティブになる仕様にしたいと考えております。 サイト上で見つけたサンプルコードをいじっているのですが、何分素人なのでうまく行きません。どなたか助けていただけると助かります。 よろしくお願いします。 <script type="text/javascript"> function fchk3(obj){ var frm=obj.form; var len=frm.elements.length; if(obj.checked==true){ for(var i=0; i<len; i++){ if(frm.elements[i].type=="radio"){ frm.elements[i].disabled=false; } } }else{ for(var i=0; i<len; i++){ if(frm.elements[i].type=="radio"){ frm.elements[i].checked=false; frm.elements[i].disabled=true; } } } } </script> <form name="form3" action="#"> <label for="chk3"><input type="checkbox" id="chk3" name="chk3" onclick="fchk3(this)" checked="checked" />このボタンのチェックを外すとラジオボタンが無効化</label><br /> <label for="chk3_r1"><input type="radio" id="chk3_r1" name="r1" />選択肢</label> </form>

  • チェックボックスの無効化、有効化

    あるサイトを参考にチェックボックスの無効化、有効化を実装したいと考えています。 ソースは以下の通りなのですが、この場合、name属性にそれぞれ異なる番号(t1、t2、t3やc1、c2、c3)が振られている必要がありますが、 これを同じnameに統一して動作させるには、どのように記述したらよいのか教えて頂けませんでしょうか? nameのtとcを統一したいのではなく、t1、t2、t3を番号抜きのtに統一、c1、c2、c3を番号抜きのcに統一したいと思っています。 <script type="text/javascript"> function fchk2(obj, name) { var frm=obj.form; if(obj.checked==true) { /* チェックボックスが選択されている場合は、 テキストボックスを有効化(false) */ for(var i=1; i<=3; i++){ frm.elements[name+i].disabled=false; } } else { for(var i=1; i<=3; i++){ /* 無効化する前に、入力値をクリア */ if(name=='t'){ /* テキストボックスの場合 */ frm.elements[name+i].value=""; }else{ /* チェックボックスの場合 */ frm.elements[name+i].checked=false; } /* 無効化(true) */ frm.elements[name+i].disabled=true; } } } </script> <form name="form2" action="#"> <label for="chk1"><input type="checkbox" id="chk1" name="chk1" value="1" onclick="fchk2(this,'t')" checked="checked" />テキストボックスの無効化・有効化を切替(チェックを外すと無効化)</label><br /> <input type="text" name="t1" value="テキストA" size="20" /> <input type="text" name="t2" value="テキストB" size="20" /> <input type="text" name="t3" value="テキストC" size="20" /> <hr /> <label for="chk2"><input type="checkbox" id="chk2" name="chk2" value="1" onclick="fchk2(this,'c')" checked="checked" />チェックボックスの無効化・有効化を切替(チェックを外すと無効化)</label><br /> <input type="checkbox" name="c1" value="1" />選択肢A<br /> <input type="checkbox" name="c2" value="1" />選択肢B<br /> <input type="checkbox" name="c3" value="1" />選択肢C </form>

  • javascriptのsubmitを使ってデータをpost送信したい。

    javascriptのsubmitを使ってデータをpost送信したい。 aaa.phpというファイルに複数のチェックボックスがあり、リンクをクリックしたときに チェックされた値のみをbbb.phpへ引き渡したいです。 自分なりに書いてみましたが、bbb.phpへは遷移するものの、データが表示されません。 document.form1.method部分をGETにすると、データは表示されますが、POSTにすると うまく引渡しができません。 的外れな書き方をしているかもしれませんが、どなたかご教授いただけませんでしょうか? よろしくお願いいたします。 【追記】 チェックボックスの数は固定ではなく変動があり、値も実際はランダムです。 デザインの都合上どうしてもaタグでしか記述が出来ません。 ------------------------------------------------------------------------------ 【aaa.php】 <script language="JavaScript"> <!-- function mailform() {  var i = 0;  var chkvalue = "";  var count = 0;  var chk = document.getElementsByName('no');  for(i=0; i<chk.length; i++) {   if (chk[i].checked == true) {    chkvalue += chk[i].value;    count++;   }  }  if(count == 0) {   alert("チェックされていません。");   return false;  } else {   document.form1.action = "./bbb.php";   document.form1.method="post";   document.form1.submit();  } } //--> </script> <a href="#" onClick="send()">bbb.phpへ遷移する</a> <form name="form1">  <input type="checkbox" name="no" value="1"><br />  <input type="checkbox" name="no" value="2"><br />  <input type="checkbox" name="no" value="3"><br />  <input type="checkbox" name="no" value="4"><br /> </form> 【bbb.php】 var_dump($_POST["no"]);