※ ChatGPTを利用し、要約された質問です(原文:フォームの戻るボタンについて)
フォームの戻るボタンについて
このQ&Aのポイント
JavaScriptでユーザがボタンのアクティブ・非アクティブの制御ができるフォームを作成し、サーバサイドで処理し、確認画面を表示している際に、戻るボタンを押した時にユーザが設定した状態をキープしたまま表示させたい。
サーバサイドでの処理を試みたが、うまくいかない。良い解決方法があるかどうか知りたい。
例えば下記のようなページから確認画面を経由して戻るような場合に問題が発生している。
もしかするとカテゴリ違いかもしれませんが、質問させていただきます。
JavaScriptでユーザがボタンのアクティブ・非アクティブの制御ができるフォームを作成し、サーバサイドで処理し(Perl使用)、確認画面を表示しているのですが、その際、 onClick="history.back()"で元のページに戻る遷移を考えていたのですが、元のページに戻った際にアクティブ・非アクティブの制御が初期状態に戻ってしまいます(IE6or7)。
確認画面から元のページに戻った時にユーザが設定した状態をキープしたまま表示させたいと思っています。
サーバサイドで処理しようともしましたが、どうもうまくいきません。
どなたか良い方法をご存知の方がいらっしゃいましたらご教授願えないでしょうか?
(例えば下記のようなページから確認画面を経由して戻るような場合です。)
<html>
<head>
<script type="text/javascript">
window.onload = function(){
disableAllGr();
}
function disableAllGr(){
var inputList = document.getElementsByTagName('p');
for(var i=0;i<inputList.length;i++){
var obj=inputList[i];
if(obj.id.match(/^gr_/)){
var n=obj.firstChild;
while(n){
if(n.nodeName=="INPUT" && n.type=="radio") n.disabled=true;
if(n.nodeName=="INPUT" && n.type=="checkbox") n.disabled=true;
if(n.nodeName=="INPUT" && n.type=="text") n.disabled=true;
if(n.nodeName=="SELECT") n.disabled=true;
n=n.nextSibling;
}
}
}
}
function fchk2(obj) {
disableAllGr();
var nameList = obj.value.split(/,/);
for( var i in nameList){
if(!document.getElementById('gr_'+nameList[i])) return false;
var n=document.getElementById('gr_'+nameList[i]).firstChild;
while(n){
if(n.nodeName=="INPUT" && n.type=="radio") n.disabled=false;
if(n.nodeName=="INPUT" && n.type=="checkbox") n.disabled=false;
if(n.nodeName=="INPUT" && n.type=="text") n.disabled=false;
if(n.nodeName=="SELECT") n.disabled=false;
n=n.nextSibling;
}
}
}
</script>
</head>
<body>
<form>
<p id="ctr_FLAG">
<select onchange='fchk2(this)'>
<option selected="selected" value="">選んでください</option>
<option value="A,A2">Aをアクティブ</option>
<option value="A,A2,B,B2">AとBをアクティブ</option>
</select>
</p>
<p>A---------------------</p>
<p id="gr_A">
<select>
<option>A</option>
<option>AA</option>
</select>
</p>
<p id="gr_A2">
<input type="radio" value="2mm" />
テストA
<input type="radio" value="3mm" />
テストAA
</p>
<p>B-----------------------</p>
<p id="gr_B">
<select>
<option>B</option>
<option>BB</option>
</select>
</p>
<p id="gr_B2">
<input type="radio" value="2mm" />
テストB
<input type="radio" value="3mm" />
テストBB </p>
<p>-----------------------</p>
<p><input type="submit"></p>
</form>
</body>
</html>
補足
いつも誠にありがとうございます。 便乗して質問するようで恐縮ですが、 下記のような場合は、どのような処理をするのが適切でしょうか? お答えいただければ有り難いです。 <html> <head> <script language="javascript"> function checkPosi(kind, PosiForm) { ueLists = document.forms("Form1").elements("ue"); shitaLists = document.forms("Form1").elements("shita"); switch (kind) { case "ue": if (PosiForm.checked == true) { //上チェック可能に if (ueLists && ueLists.length) { for (i = 0; i < ueLists.length; i++) { ueLists[i].disabled = false; } } else if (ueLists) { ueLists.disabled = false; } else { } } else { //上チェック不可能に if (ueLists && ueLists.length) { for (i = 0; i < ueLists.length; i++) { ueLists[i].disabled = true; } } else if (ueLists) { ueLists.disabled = true; } else { } } break; case "shita": if (PosiForm.checked == true) { //下チェック可能に if (shitaLists && shitaLists.length > 1) { for (i = 0; i < shitaLists.length; i++) { shitaLists[i].disabled = false; } } else if (shitaLists) { shitaLists.disabled = false; } else { } } else { //下チェック不可能に if (shitaLists && shitaLists.length > 1) { for (i = 0; i < shitaLists.length; i++) { shitaLists[i].disabled = true; } } else if (shitaLists) { shitaLists.disabled = true; } else { } } break; default: } } </script> </head> <body> <form id="Form1"> <p><input type="checkbox" onClick="checkPosi('ue', this)" id="y1" /> 上をアクティブ <input type="checkbox" onClick="checkPosi('shita', this)" id="y2" /> 下をアクティブ</p> <p>上-------------------</p> <p><input type="radio" id="ue" disabled />上1 <input type="radio" id="ue" disabled />上2</p> <p>下-------------------</p> <p><input type="radio" id="shita" disabled /> 下1 <input type="radio" id="shita" disabled /> 下2</p> <p>-------------------</p> <p><input type="submit"></p> </form> </body> </html>