解決済みの質問
もしかするとカテゴリ違いかもしれませんが、質問させていただきます。
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>
投稿日時 - 2008-09-08 08:28:27
IEの場合戻った場合window.onloadが実行されるので、
そこに適切な処理をいれておけばよいでしょう
(1)selectにidを振る
<select onchange='fchk2(this)' id="s0">
(2)window.onloadに処理を書き入れる
window.onload = function(){
disableAllGr();
fchk2(document.getElementById("s0")); //←追加
}
投稿日時 - 2008-09-08 09:29:59
補足
いつも誠にありがとうございます。
便乗して質問するようで恐縮ですが、
下記のような場合は、どのような処理をするのが適切でしょうか?
お答えいただければ有り難いです。
<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>
投稿日時 - 2008-09-08 10:42:51
1人が「このQ&Aが役に立った」と投票しています
ベストアンサー以外の回答(1件中 1~1件目)