フォームの戻るボタンについて

前へ 次へ
この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>

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

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

IEの場合戻った場合window.onloadが実行されるので、 そこに適切な処理をいれておけばよいでしょう (1)selectにidを振る <select onchange='fchk2(this)' id="s0"> (2)window.onloadに処理を書き入れる window.onload = function(){ disableAllGr(); fchk2(document.getElementById("s0")); //←追加 }

btnistho
質問者

補足

いつも誠にありがとうございます。 便乗して質問するようで恐縮ですが、 下記のような場合は、どのような処理をするのが適切でしょうか？ お答えいただければ有り難いです。 <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>

その他の回答 (1)

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

スクリプトの良し悪しはともかく（じっくりよんでないので） window.onload=function(){ checkPosi('ue', document.getElementById("y1")); checkPosi('shita', document.getElementById("y2")); } とすればよいでしょう

btnistho
質問者

お礼

本当に有難うございます idが重複していたりと汚いソースでしたが、明確な回答有難うございました

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • プルダウンメニューに連動するdisableの切替で

    以前こちらで、selectメニューに連動するdisableの切替方法をお聞きして、下記のようなものを作成しました。 ここでCGIの仕様上、selectメニュー内のvalue値に日本語（1単語）を使用したいと思い、value値以外の値を取得しようとしてみましたが、うまくいきません。 何かよい方法はありますでしょうか？ <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> <option value="A,A2,B,B2,C,C2">AとBとCをアクティブ</option> </select> </p> <p>A---------------------</p> <p id="gr_A"> <input type="radio" value="2mm" />テストA <input type="radio" value="3mm" />テストAA </p> <p id="gr_A2"> <input type="checkbox" value="2mm" /> テストA <input type="checkbox" value="3mm" /> テストAA </p> <p>B-----------------------</p> <p id="gr_B"> <input type="radio" value="2mm" />テストB <input type="radio" value="3mm" />テストBB </p> <p id="gr_B2"> <input type="checkbox" value="2mm" />テストB <input type="checkbox" value="3mm" />テストBB </p> <p>C-----------------------</p> <p id="gr_C"> <input type="radio" value="2mm">テストC <input type="radio" value="3mm"/>テストCC </p> <p id="gr_C2"> <input type="checkbox" value="2mm"> テストC <input type="checkbox" value="3mm"/>テストCC </p> <p>-----------------------</p> <p><input type="submit"></p> </form> </body> </html>

  • 確認ページからフォームページに「戻る」時の入力内容の保持

    ラジオボタンと連動したチェックボックスがあります。 ラジオボタンを選択し、さらにチェックボックスに入力後、「確認」をクリックして確認ページから「戻る」の時にチェックボックスの入力内容の値が保持されておらず、困っています。 Firefoxではきちんと動作するのですが、IEなど他のブラウザでは動作しません。 入力内容を保持する方法はありますでしょうか？ <script> window.onload=function(){ var f0=document.getElementById("f0"); try{ f0.addEventListener("click",function(e){func(e)},true); }catch(e){ f0.attachEvent("onclick",function(e){func(e)}); } } function func(e){ var obj= (e.srcElement || e.target); if(obj.nodeName!="INPUT") return false; switch(obj.type){ case "radio": setRadio(obj); break; case "checkbox": setCheckbox(obj,"シルク","Kind04[]","SELECT"); break; } } function setRadio(obj){ var n=obj.parentNode.firstChild; while(n){ if(n.nodeName=="INPUT" && n.type=="checkbox"){ n.disabled=obj.value!="アリ"; n.checked=false; } if(n.nodeName=="SELECT"){ n.disabled=true; n.selectedIndex=0; } n=n.nextSibling; } } function setCheckbox(obj,v,n,nn){ if(obj.value!=v) return false; var node=obj.parentNode.firstChild; while(node){ if(node.nodeName==nn && node.name==n){ node.disabled=!obj.checked; node.selectedIndex=0; } node=node.nextSibling; } } </script> </head> <body> <form action="./postmail.cgi" name="f0" method="post" id="f0"> <fieldset> <legend>■分類</legend> <input type="radio" value="ナシ" name="print" class="print" checked>ナシ <input type="radio" value="アリ" name="print" class="print" >アリ　 （ <input type="checkbox" value="銀シールド" name="Kind04[]" class="Kind04" disabled>銀シールド <input type="checkbox" value="銀ペースト" name="Kind04[]" class="Kind04" disabled>銀ペースト <input type="checkbox" value="銅ペースト" name="Kind04[]" class="Kind04" disabled>銅ペースト <input type="checkbox" value="シルク" name="Kind04[]" class="Kind04" disabled>シルク　 色 <SELECT name="Kind04[]" class="Kind04" disabled> <OPTION SELECTED VALUE="---">--- <OPTION VALUE="白">白 <OPTION VALUE="黒">黒 <OPTION VALUE="他">他 </SELECT> ） </fieldset><br> <input type="submit" value="確認する" />　　<input type="reset" value="リセット" /> </form> </body> </html>

  • selectメニューによるチェックボックスの表示・非表示

    リストメニューで選択された項目がアクティブになるようなフォームを作成したいと考えています。 下記コードの上部チェックボックスがselectメニューになっているようなものです。 JavaScriotに関して未熟者ですので、どなたか参考になるご意見／回答を頂けませんでしょうか？宜しくお願いいたします。 <html> <head> <title></title> <script type="text/javascript"> <!-- // 制御用フラグ // 0なら対象グループは無効(disabled)、1以上なら有効 var FLAG = { 'A':0, 'B':0, 'C':0, 'E':0 }; // 初期化 window.onload = function(){ var controlList = document.getElementById('ctr_FLAG').getElementsByTagName('input'); for(var i=0;controlList[i];i++){ if(controlList[i].checked){ var nameList = controlList[i].value.split(/,/); for(var j=0;nameList[j];j++){ FLAG[ nameList[j] ]++; } } } for(var x in FLAG) { fchk2_sub(x); } } // チェックが変更されたら function fchk2(obj) { nameList = obj.value.split(/,/); for(var i=0;nameList[i];i++) { if(obj.checked) { FLAG[nameList[i]]++; } else { FLAG[nameList[i]]--; } fchk2_sub(nameList[i]); } } // disableの変更 function fchk2_sub(groupe_name,dsiabled_value){ var inputList = document.getElementById('gr_'+groupe_name).getElementsByTagName('input'); for(var i=0;inputList[i];i++) { inputList[i].disabled = FLAG[groupe_name]>0?false:true; } } //--> </script> </head> <body> <form name='form2' action='#'> <p id="ctr_FLAG"> <input type='checkbox' name='chk1' value='A' onclick='fchk2(this)' > Aをアクティブに<br> <input type='checkbox' name='chk1' value='A,B' onclick='fchk2(this);' > AとBをアクティブに<br> <input type='checkbox' name='chk1' value='A,B,C' onclick='fchk2(this);'> AとBとCをアクティブに<br> <input type='checkbox' name='chk12' value='A,B,C,E' onclick='fchk2(this);'> AとBとCとDをアクティブに</p> <p>=====================</p> <p id="gr_A"> <input type='checkbox' name='a1' value='1'> 選択肢A<br> <input type='checkbox' name='a2' value='1'> 選択肢A<br> <input type='checkbox' name='a3' value='1'> 選択肢A<br> </p> <p id="gr_B"> <input type='checkbox' name='b1' value='1'> 選択肢B<br> <input type='checkbox' name='b2' value='1'> 選択肢B<br> <input type='checkbox' name='b3' value='1'> 選択肢B<br> </p> <p id="gr_C"> <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> </p> <p id="gr_E"> <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 </p> </form> </body> </html>

  • 数によってボタンを有効化したい

    先日もこちらでお世話になりました。 例えばアメ玉の販売をするのにA,B,C,3種類があり、合計数がDと同じにならないと実行ボタンが押せないようにしたいのですが、うまくいきません。 <head> <SCRIPT TYPE="text/javascript"> <!-- function check(obj){ var f=obj.form; var valA=parseInt(f.A.value); var valB=parseInt(f.B.value); var valC=parseInt(f.C.value); var valD=parseInt(f.D.value); if (valA+valB+valC > valD || valA+valB > valD || valB+valC > valD || valA+valC > valD){ alert('A,B,Cの和は100以下に設定ください') if(obj.type=="select-one") obj.selectedIndex=0; else if(obj.type=="text") obj.value=0; obj.focus(); } } //--> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!-- function radio(valD){ if (valD.value == valA+valB+valC || valA+valB || valB+valC || valA+valC ) valD.form.submit.disabled = false; else valD.form.submit.disabled = true; } //--> </SCRIPT> </head> <body bgcolor=#ffffff> <form name="" method="post" action="shop.cgi"> <b>☆飴玉　</b> <br> <b>個数配分</b><br> A:<select name="A" onChange="check(this)" onChange="radio(this)"> <option value = '選択してください' selected>選択してください</option> <script language="javascript"> for ( var i = 0; i < 51; i++ ){ var sDat = ( "00" + i ).match( /..$/ ); document.write( "<option value = '" + sDat + "）'>" + sDat + "</option>\n" ); } </script> </select><br> B:<select name="B" onChange="check(this)" onChange="radio(this)"> <option value = '選択してください' selected>選択してください</option> <script language="javascript"> for ( var i = 0; i < 51; i++ ){ var sDat = ( "00" + i ).match( /..$/ ); document.write( "<option value = '" + sDat + "）'>" + sDat + "</option>\n" ); } </script> </select><br> C:<select name="C" onChange="check(this)" onChange="radio(this)"> <option value = '選択してください' selected>選択してください</option> <script language="javascript"> for ( var i = 0; i < 51; i++ ){ var sDat = ( "00" + i ).match( /..$/ ); document.write( "<option value = '" + sDat + "）'>" + sDat + "</option>\n" ); } </script> </select><br> D:<input type="text" name="D" readonly value="50" class="num"></br> <input type="submit" value="申し込む" name="submit" disabled> </form> </body> 詳しくわからないのですが、イベントハンドラは2つ続けて書けないのでしょうか。。。 どなたかお教え頂けたら幸いです。

  • 3つの連動したプルダウンメニューのフォームについて

    http://d.hatena.ne.jp/Mars/20071109 こちらのページを参考にしてフォームの中身を以下ようにしたいのです。 このような感じです <select id=”SEL1”> <optgroup label=”choise”> <option value=”fruit”>フルーツ</option> <option value=”vegetable”>野菜</option> </select> <select id=”SEL2”> <optgroup label=”fruits”> <option value=”x1”>みかん</option> <option value=”x1”>りんご</option> <option value=”x1”>メロン</option> </optgroup> <optgroup label=”vegetable”> <option value=”x1”>キャベツ</option> <option value=”x1”>きゅうり</option> <option value=”x1”>トマト</option> </optgroup> </select> <select id=”SEL3”> <optgroup label=”x1”> <option>1個</option> <option>2個</option> <option>3個</option> <option>4個</option> <option>5個</option> <option>6個</option> </optgroup> </select> このようにプルダウンメニューを３階層にして、3段階目に繋げる２段階目のoption valueは全て同じにしたいのですが、 そうすると、フォームで送信した結果が　select id=SEL2 のところで全てが ”x1”になってしまい各商品の名前を出すことができません。 何か方法があれば教えてください。 使っているジャバスクリプトは以下です function ConnectedSelect(selIdList){ for(var i=0;selIdList[i];i++) { var CS = new Object(); var obj = document.getElementById(selIdList[i]); if(i){ CS.node=document.createElement('select'); var GR = obj.getElementsByTagName('optgroup'); while(GR[0]) { CS.node.appendChild(GR[0].cloneNode(true)); obj.removeChild(GR[0]); } obj.disabled = true; } if(selIdList[i+1]) { CS.nextSelect = document.getElementById(selIdList[i+1]); obj.onchange = function(){ConnectedSelectEnabledSelect(this)}; } else { CS.nextSelect = false; } obj.ConnectedSelect = CS; } } function ConnectedSelectEnabledSelect(oSel){ var oVal = oSel.options[oSel.selectedIndex].value; if(oVal) { while(oSel.ConnectedSelect.nextSelect.options[1])oSel.ConnectedSelect.nextSelect.remove(1); var eF = false; for(var OG=oSel.ConnectedSelect.nextSelect.ConnectedSelect.node.firstChild;OG;OG=OG.nextSibling) { if(OG.label == oVal) { eF = true; for(var OP=OG.firstChild;OP;OP=OP.nextSibling) oSel.ConnectedSelect.nextSelect.appendChild(OP.cloneNode(true)); break; } } oSel.ConnectedSelect.nextSelect.disabled = !eF; } else { oSel.ConnectedSelect.nextSelect.selectedIndex = 0; oSel.ConnectedSelect.nextSelect.disabled = true; } if(oSel.ConnectedSelect.nextSelect.onchange)oSel.ConnectedSelect.nextSelect.onchange(); }

  • ラジオボタンとプルダウンを連動させたい

    ラジオボタンとプルダウンを連動させたい いつもお世話になっております。 ラジオボタンのvalue値に連動してプルダウンの内容が変わるということがしたいと思い、 数日前からいろいろと格闘していましたが、煮詰まったため相談に伺いました。 http://okwave.jp/qa/q2928590.htmlのANo.2の回答 -------------------------------------------------------------------- <script language="javascript"> function changeFunc(obj){ var v=obj.value; var f=obj.form; for(var i=0;i<f.length;i++){ if(f[i].type=="checkbox"){ if(f[i].className==v || v=="") f[i].disabled=false; else f[i].disabled=true; } } } </script> <form> <select name="genre" onChange="changeFunc(this)"> <option value="">食べ物</option> <option value="grain">穀物</option> <option value="fruit">果物</option> <option value="meat">生き物</option> </select> <br /> <input type="checkbox" value="お米" class="grain">お米<br /> <input type="checkbox" value="そば" class="grain">そば<br /> <input type="checkbox" value="りんご" class="fruit">りんご<br /> <input type="checkbox" value="みかん" class="fruit">みかん<br /> <input type="checkbox" value="さかな" class="meat">さかな<br /> <input type="checkbox" value="豚肉" class="meat">豚肉 </form> -------------------------------------------------------------------- を参考にいろいろと試してはみたのですが、こちらは「プルダウン→チェックボックス」で、 まったく逆でどうしたら良いのかまったくわかりませんでした。 他のウェブサイトの情報やサンプルも試したのですが、value値やname値他の問題でうまくできませんでした。 希望の仕様は ・ラジオボタンの選択肢によって、プルダウン（セレクトボックス）の内容が変わる（アイテムが消える、または選択できなくなる）。 ・ラジオボタン・プルダウン共にvalue値・name値は決まったものがある（プルダウンのvalue値は日本語） 以上です。 javascriptは素人ですので、わかりにくい質問になっているかもしれないのですが、お力を貸していただけましたら助かります。 よろしくお願いします。

  • チェックボタンの制御方法

    チェックボタンの制御方法で 下記のようなことがやりたいです。 (1)【全ての学校】選択時 【小学校】と【中学校】の全て disabledのままでチェックをセット、ボタンdisabled (2)【小学校】選択時 【中学校】disabledのままでチェックを解除、ボタンdisabled (3)【中学校】選択時 【小学校】disabledのままでチェックを解除、ボタンdisabled もうちょっとだと思うのですが... なかなかうまく出来ないのでよろしくお願いします。 <html> <head> <title></title> <script Language="JavaScript"><!-- function setRTF(f,n){ for(var i=0; i<f.length; i++){ var p=f[i].parentNode; var pid=""; while(p){ if(p.nodeName=="TD"){pid=p.id;break;} p=p.parentNode; } if(f[i].type=="checkbox" || f[i].type=="button") f[i].disabled=pid!=n; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form> <table border="1" width="303"> <tr> <td width="89"><input type="radio" name="mm" onClick="setRTF(this.form,'aa')">小学校</td> <td width="90"><input type="radio" name="mm" onClick="setRTF(this.form,'bb')">中学校</td> <td width="102"><input type="radio" name="mm" onClick="setRTF(this.form,'xx')">全ての学校</td> </tr> <tr> <td id="aa" rowspan="2" width="89"> <input type="checkbox" name="aa[]" value="1" disabled>Ａ小学校<br> <input type="checkbox" name="aa[]" value="2" disabled>Ｂ小学校<br> <input type="checkbox" name="aa[]" value="3" disabled>Ｃ小学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)"/ disabled ><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="bb" width="90"> 市立<br> <input type="checkbox" name="bb[]" value="1" disabled>Ａ中学校<br> <input type="checkbox" name="bb[]" value="2" disabled>Ｂ中学校<br> <input type="checkbox" name="bb[]" value="3" disabled>Ｃ中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="cc" rowspan="2" width="102"> </td> </tr> <tr> <td id="bb" width="90"> 私立<br> <input type="checkbox" name="cc[]" value="1" disabled>Ａ中学校<br> <input type="checkbox" name="cc[]" value="2" disabled>Ｂ中学校<br> <input type="checkbox" name="cc[]" value="3" disabled>Ｃ中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> </tr> </table> </form> </body> </html>

  • 複数フォームに同じnameがある場合の入力チェック

    うまく入力チェックが動作せず、行き詰まっており困っております。 アドバイスを頂ければ助かります。ソースは以下です。 function chkform(frm){ var mst=Array("dep","plan"); var mst_nm = Array("出発地","プラン"); var len=mst.length; for(i=0; i<len; i++){ var obj=frm.elements[mst[i]]; if(obj.type=="text" || obj.type=="textarea"){ if(obj.value==""){ alert(mst_nm[i]+"は必須入力項目です"); frm.elements[mst[i]].focus(); return false; } }else{ for(var j=0, chk=0; j<obj.length; j++){ if(obj[j].checked) chk++; } if(chk==0){ alert(mst_nm[i]+"は必須入力項目です"); return false; } } } return true; } <form name="order1" onsubmit="return chkform(this)"> <input type="radio" name="dep" value="osa" />大阪　　 <input type="radio" name="dep" value="tky">東京 <br /> <select name="plan"> <option value="">▼プランを選択▼</option> <option value="biz">出張</option> <option value="tvl">旅行</option> <option value="day">日帰り</option> </select> <br /> <input type="submit" name="btn1" value="確認"> </form> <form name="order2" onsubmit="return chkform(this)"> <input type="radio" name="dep" value="osa" />大阪　　 <input type="radio" name="dep" value="tky">東京 <br /> <select name="plan"> <option value="">▼プランを選択▼</option> <option value="biz">出張</option> <option value="tvl">旅行</option> <option value="day">日帰り</option> </select> <br /> <input type="submit" name="btn2" value="確認"> </form>

  • ラジオボタンが選択によるチェックボックス・ボタンの制御方法

    お世話になります。 やりたい事 (1)ラジオボタン【小学校】：小学校のみ入力可 (2)ラジオボタン【中学校】：中学校（市立・私立）のみ入力可 (3)ラジオボタン【全ての学校】：小中すべて入力可 (1)と(2)は動作していると思います。 (3)を実現するにはどうすればいいのでしょうか？ よろしくお願いします。 <html> <head> <title>ラジオボタンが選択されたらチェックボックス・ボタンを入力可能にする</title> <script Language="JavaScript"><!-- function setRTF(f,n){ for(var i=0; i<f.length; i++){ var p=f[i].parentNode; var pid=""; while(p){ if(p.nodeName=="TD"){pid=p.id;break;} p=p.parentNode; } if(f[i].type=="checkbox" || f[i].type=="button") f[i].disabled=pid!=n; } } function allcheck(obj,flag){ var target=obj.parentNode.getElementsByTagName("input"); for(var i=0;i<target.length;i++){ if(target[i].type=="checkbox") target[i].checked=flag; } } // --></script> </head> <body> <form> <table border="1" width="303"> <tr> <td width="89"><input type="radio" name="mm" onClick="setRTF(this.form,'aa')">小学校</td> <td width="90"><input type="radio" name="mm" onClick="setRTF(this.form,'bb')">中学校</td> <td width="102"><input type="radio" name="mm" onClick="setRTF(this.form,'xx')">全ての学校</td> </tr> <tr> <td id="aa" rowspan="2" width="89"> <input type="checkbox" name="aa[]" value="1" disabled>Ａ小学校<br> <input type="checkbox" name="aa[]" value="2" disabled>Ｂ小学校<br> <input type="checkbox" name="aa[]" value="3" disabled>Ｃ小学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)"/ disabled ><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="bb" width="90"> 市立<br> <input type="checkbox" name="bb[]" value="1" disabled>Ａ中学校<br> <input type="checkbox" name="bb[]" value="2" disabled>Ｂ中学校<br> <input type="checkbox" name="bb[]" value="3" disabled>Ｃ中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> <td id="cc" rowspan="2" width="102"> </td> </tr> <tr> <td id="bb" width="90"> 私立<br> <input type="checkbox" name="cc[]" value="1" disabled>Ａ中学校<br> <input type="checkbox" name="cc[]" value="2" disabled>Ｂ中学校<br> <input type="checkbox" name="cc[]" value="3" disabled>Ｃ中学校<br> <input type="button" value="全選択" onClick="allcheck(this,true)" disabled /><br> <input type="button" value="全解除" onClick="allcheck(this,false)" disabled /> </td> </tr> </table> </form> </body> </html>

  • JavaScripsのDOMについてなんですが…

    閲覧ありがとうございます。 以前にSelectボックスで選んだ値の分だけテキストボックスの生成を行う方法を伺い、生成することが出来るようになりました。 (1)生成したテキストボックスを改行して表示がしたい。 (2)生成したテキストボックスの右隣にSelectボックスを生成し、Selectボックスで１～８の値を扱い、選んだ数値の分のテキストボックスをSelectボックスの右隣に生成するもの。 以下がSelectボックスで選んだ数値の分だけテキストボックスを生成するプログラムです。 <form name="form" action="index2.php"> <select id="factor" onchange="swicthForm(this)"> <option value="0">選んでください</option> <option value="1">1個</option> <option value="2">2個</option> <option value="3">3個</option> <option value="4">4個</option> <option value="5">5個</option> </select> </form> <br> <script type="text/javascript"> function swicthForm(obj){ var n=obj.nextSibling; while(n){ var m=n.nextSibling; if(n.nodeName=="INPUT" && n.type=="text") n.form.removeChild(n); n=m; } for(var i=0; i<parseInt(obj.value);i++){ var e=document.createElement("input"); e.setAttribute("type","text"); e.setAttribute("name","test"+(i+1).toString()); obj.form.appendChild(e); } } </script> よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する