• ベストアンサー

ボタンの無効化

Java、JSPを使用しております。 ラジオボタンが複数あり、 どれか一つでもチェックされたらsubmitを無効化させたいと考えています。 ですので、※チェックがされていない状態ではsubmitは表示して欲しい※のです。 どなたかご教授お願いいたします。 サーブレット 中略・・・ if(al1 != null && al1.size() >= 1) { out.println("<script type=\"text/javascript\" src=\"../Script/util.js\" charset=\"UTF-8\"></script>"); out.println("<meta http-equiv=\"Content-Script-Type\" content=\"text/javascript;\">"); out.println("<form action=\"WorkManagement.ProjectManagement\" method=\"post\" name=\"form1\">"); out.println(" <table border=\"1\">"); 中略・・・ for (ProjectManagementBean pm : al1) { out.println(" <tr>"); out.println(" <td>"); out.println(" <input type=\"radio\" name=\"radio\" value=\"" + pm.getProjectID() + "\" onClick=\"rendou(this)\" />"); out.println(" </td>"); 中略・・・ JSP------------------------------------------------------ 中略・・・ <input type="submit" name="register" value="登録" onClick="return proRegister()" /> 中略・・・ .

回答 全件
ベストアンサー
＞コメント <script> try{ document.a…
サーブレットの部分は切り分けましょう。 今回の件はユーザーのアクショ…
全体像が不明ですが、こんな感じ？ submitボタンはformの…

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

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

＞コメント <script> try{ document.addEventListener('click',function(e){func(e)},true); //オブジェクトにクリック時の処理をつける }catch(e){ document.attachEvent('onclick',function(e){func(e)}); //IE用（IEは思想が違うため） } window.onload=function(){ //初期値設定をする。window.onloadで処理するというのは文書が 読み込まれてから処理するということ check(document.getElementById("f")); //form：fにたいしてチェック処理をしている } function func(e){ var t　= (e.srcElement || e.target); //イベントハンドラからオブジェクトを確定 if(t.nodeName=="INPUT") check(t.form); //INPUTタグに対して（この場合クリックされたら）checkを発動 } function check(f){ var flg=false; var r=new Object(); for(var i=0;i<f.length;i++){ if(f[i].type=="radio") r[f[i].name]=(r[f[i].name] || f[i].checked); //同じ名前のラジオボタンを探して、チェックがはいっているかどうかしらべる（1つでもチェックが入っていればtrue） } for(var i in r){ if(!r[i]){ flg=true; break; } //ラジオボタンの内容をチェックする、一個でもチェックがないものがあればdisabledのflgをtrueにする } for(var i=0;i<f.length;i++){ if(f[i].type=="submit") f[i].disabled=flg; //サブミットボタンをしらべてdisabledを設定 } return flg; //おまじない、今回はつかっていない } </script>

a6mi15
質問者

お礼

yambejp様 お礼が遅くなってしまって申し訳ございません。 ありがとうございました。 ぜひ参考にさせていただきたいと思います。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (3)

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

サーブレットの部分は切り分けましょう。 今回の件はユーザーのアクションによる属性の変更ですから あくまでもクライアントサイドのjavascriptです 以下のような感じでわかりますか？ <script> try{ document.addEventListener('click',function(e){func(e)},true); }catch(e){ document.attachEvent('onclick',function(e){func(e)}); } window.onload=function(){ check(document.getElementById("f")); } function func(e){ var t　= (e.srcElement || e.target); if(t.nodeName=="INPUT") check(t.form); } function check(f){ var flg=false; var r=new Object(); for(var i=0;i<f.length;i++){ if(f[i].type=="radio") r[f[i].name]=(r[f[i].name] || f[i].checked); } for(var i in r){ if(!r[i]){ flg=true; break; } } for(var i=0;i<f.length;i++){ if(f[i].type=="submit") f[i].disabled=flg; } return flg; } </script> <form id="f"> <input type="radio" name="r1" value="1">r1-1 <input type="radio" name="r1" value="2">r1-2 <input type="radio" name="r1" value="3">r1-3 <input type="radio" name="r2" value="1">r2-1 <input type="radio" name="r2" value="2">r2-2 <input type="radio" name="r2" value="3">r2-3 <input type="submit" value="send1"> <input type="submit" value="send2"> <input type="submit" value="send3"> </form>

a6mi15
質問者

補足

yambejp様 ご回答ありがとうございました。 もしお時間がございましたら、コメントといいますか、言葉で説明をいただけるととてもありがたいです。 不明な点がございますので、お聞きしてもよろしいでしょうか？ onClick="～"はいらないのでしょうか？ window.onload=function()　これでイベントハンドラのような役割ですか？ 調べてみたのですが、 コードが実行されているときには まだ記述されている部分がロードされていない可能性があり、 その場合エラーとなるため。 と記載してあったので、また別物なのかなと考えたのですが・・・。 ご指導よろしくおねがいします。

全文を見る
すると、全ての回答が全文表示されます。
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

全体像が不明ですが、こんな感じ？ submitボタンはformの一番最後にあるものと仮定。また、name="radio"は該当のラジオボタン以外には使用されていないと仮定しています。 （resetボタンがある場合は、操作時にdesabledをfalseにする必要あり。） <html> <head><title>test</title> <script type="text/javascript"> function rendou(evt, f) { var e = f.elements, t = evt.target || evt.srcElement; if (t.name=='radio') e[e.length-1].disabled = true; } </script> </head> <body> <form action="#" method="post" onclick="rendou(event, this)"> <input type="radio" name="radio" value="a" >a <input type="radio" name="radio" value="b" >b <input type="radio" name="radio" value="c" >c 　・・・・・・・・・ <input type="submit" name="register" value="登録"> </form> </body> </html>

a6mi15
質問者

補足

fujillin様 説明不足なところが多々ありまして、申し訳ございません。 質問にも記載しておりますが、登録のsubmitはサーブレット上ではなく、※jsp上※に配置しております。 ★JSP★ 名前 : <input type="text" name="name" value="" /> TEL　:　<input type="text" name="tel" value="" /> <input type="submit" name="register" value="登録" onClick="return proRegister()" /> <input type="submit" name="change" value="変更" onClick="return Change()" /> <input type="submit" name="delete" value="削除"　onClick="return Delete()" /> 中略・・・ <h2>◆検索結果◆</h2> <!-- 全件出力 --> <jsp:include page="/servlet/Out.outProject" flush="true" /> ------------------------------------------------------ このOut.outProjectが、質問に記載したサーブレットです。 また、 rendou()は、jsp上に登録submit以外に、変更・削除submitがあるので、その際に予め設定されているIDをgetParameterするために使っております。 ラジオボタンにどれか一つチェックをすると、 そのIDを取得し、登録された名前やTELがテキストボックスに反映されるようになっております。 このような説明で大丈夫でしょうか・・・ 説明が下手ですみません。 何卒よろしくおねがいします。

全文を見る
すると、全ての回答が全文表示されます。
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

submitボタンをdisabledにしたいのか、submitを押した際に バリデートしてエラーチャックをしたいのかによって対応が異なります。

a6mi15
質問者

補足

disabledのような機能にしたいと考えています。 ですが、disabledについて調べてみると、 『ラジオボタン等をチェックすると、submitを有効する。』 というものばかりで、私がやりたいことと逆なのです。 私は、『ラジオボタンをチェックすると、submitを無効にしたい。』ですので・・・。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 選択したたラジオボタンの値をSUBMITボタンに

    選択したたラジオボタンの値をSUBMITボタンの名前として自動的に替えたいのですが、助言をいただけますか。 イメージは下記です。★の部分に、クリックごとにradioの値を入れたいのです。 <script Language="JavaScript"><!-- function set() { n = document.myFORM.Radio.value; } // --> </script> <FORM ACTION="add.cgi" METHOD="POST" name="myFORM"> <INPUT TYPE="RADIO" NAME="Radio" VALUE="東京" onclick="set()" CHECKED> <INPUT TYPE="RADIO" NAME="Radio" VALUE="大阪"> <INPUT TYPE="SUBMIT" NAME="Submit" VALUE="★"></form>

  • 複数のラジオボタン選択肢によりsubmitを押せなくする

    初めて質問させていただきます。 ラジオボタンが下記の選択状態の時だけ「送信（submit）」ボタンを enable で表示させたいです。 １：●　２：○ １：●　２：○ それ以外の選択肢では「送信（submit）」ボタンを disabl で押せないようにしたいです。 調べて、近い動作にはなりましたが、javascriptに関して 殆ど知識がないため、これから先がさっぱりわかりません。 ぜひ教えを乞いたく参りました。お知恵をお貸しください<(__)> どうぞ宜しくお願い致します。 <HTML> <HEAD> <script type="text/javascript"><!-- function unlock1(el){el.form.send.disabled=false;} function unlock2(el){el.form.send.disabled=true;} //--> </script> <form> 1:<input type="radio" name="radio1" value="1" onClick="unlock1(this)"> 2:<input type="radio" name="radio1" value="2" onClick="unlock2(this)"><br> 1:<input type="radio" name="radio2" value="1" onClick="unlock1(this)"><br> 2:<input type="radio" name="radio2" value="2" onClick="unlock2(this)"><br> <input name="send" type="submit" value="送信" disabled > </form> </BODY> </HTML>

  • 送信データの受け取りについて

    ご教授願います。 ページ１からMETHOD="get"で値をSubmitして ページ２で受信したいのですが、 ページのURLバーのアドレスの最後に「?ACT=3」と 記載されているにもかかわらず、 ページ２内での$_get['ACT']で 値を拾えませんし、$ACTも確認できません。 どの様な原因が考えられるのでしょうか。 ＜環境＞ IE 7.0.5730.13 PHP 5.2.6 ＜プログラム＞ *ページ１ <html> <head> <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"> <script type="text/javascript"><!-- function Cli_Submit(){ ListForm.action = "Test_submit2.php"; ListForm.submit(); } // --></script> </head> <BODY> <FORM NAME="ListForm" METHOD="get"> <TD><INPUT TYPE="text" NAME="ACT"></TD> <TD><INPUT TYPE="button" VALUE="Submit" onClick="Cli_Submit()"> </FORM></BODY></HTML> *ページ２ <html> <head> <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"> <script type="text/javascript"><!-- // --></script> </head> <BODY> <FORM NAME="ListForm" METHOD="post"> <TD><INPUT TYPE="text" NAME="ACT" VALUE="<?php print $_get['ACT'] ?>"></TD> <TD><INPUT TYPE="button" VALUE="Submit" onClick="Cli_Submit()"> </FORM></BODY></HTML>

    • 締切済み
    • PHP
  • JavaScript＋PHPでのボタンの値について

    お世話になります。現在下記のようなコードです。 ＃Html側 <script language="JavaScript"><!-- function send1() { document.Form1.submit(); } function send2() { document.Form2.submit(); } // --></script> <form name="Form1" action="tesuto1.php" > 中略 </form> <form name="Form2" action="tesuto2.php" > 中略 </form> <form> <input type="button" name="botan" value="送信" onClick="send1()"> </form> <form> <input type="button" name="botan" value="取消" onClick="send2()"> </form> <form> <input type="button" name="botan" value="確認" onClick="send1()"> </form> #PHP側 tesuto1.php echo "値は".@$_POST["botan"]."です"; という感じで、どのボタンがクリックされたか判別するために、 ボタンの値を取得したいのですが。 よろしくお願いします。

  • jQuery　変数の使い方について

    jQuery　変数の使い方について 【やりたいこと】 ラジオボタンが複数ある為現在のアクションをまとめたい。 ■ $("input:radio[name='radio01']:checked").val(); の'radio01'の部分に変数を使いたい。 ■document.forms["MON"].hradio02.value の"MON"のフォーム名と、「hradio02」name部分に変数を使いたい。 http://kaicoo.blogspot.jp/2012/03/query_30.html 等を参考に元のソースから JSをまとめてみましたが、うまくいきません。 jQuery内の変数の記述方法を 教えていただけませんでしょうか？ よろしくお願いいたします。 ★JSをまとめたサンプルソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script src="jquery.js"></script> <script type="text/javascript" language="JavaScript"> <!-- function setVal(obj) { var formname = obj.form.name; var radioname = obj.getAttribute('name'); alert(formname); alert(radioname); //選択したラジオのvalueをhiddenに格納する document.forms[formname].h '+ radioname +' .value = $("input:radio[name='+ radioname +']:checked").val(); alert(document.forms[formname].h '+ radioname +'.value); } //--> </script> </head> <body> <table border="1"> <FORM name="MON"> <tr> <td> 結果: </td> <td> <input type="radio" name="radio01" value="良好" onClick="setVal(this);" >良好 <input type="radio" name="radio01" value="不良" onClick="setVal(this);"> 不良 <input type="hidden" name="hradio01" value="未入力です。"> </td> </tr> <tr> <td> 結果2: </td> <td> <input type="radio" name="radio02" value="良好" onClick="setVal(this);" >良好 <input type="radio" name="radio02" value="不良" onClick="setVal(this);"> 不良 <input type="hidden" name="hradio02" value="未入力です。"> </td> </tr> </table> </Form> </body> </html> ★元のソースのサンプル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script src="jquery.js"></script> <script type="text/javascript" language="JavaScript"> <!-- function setVal_01(obj) { document.forms["MON"].hradio01.value = $("input:radio[name='radio01']:checked").val(); alert(document.forms["MON"].hradio01.value); } //--> </script> <script type="text/javascript" language="JavaScript"> <!-- function setVal_02(obj) { document.forms["MON"].hradio02.value = $("input:radio[name='radio02']:checked").val(); alert(document.forms["MON"].hradio02.value); } //--> </script> </head> <body> <table border="1"> <FORM name="MON"> <tr><td> 結果: </td> <td><input type="radio" name="radio01" value="良好" onClick="setVal_01(this);" >良好 <input type="radio" name="radio01" value="不良" onClick="setVal_01(this);"> 不良 <input type="hidden" name="hradio01" value="未入力です。"> </td> </tr> <tr> <td> 結果2: </td> <td> <input type="radio" name="radio02" value="良好" onClick="setVal_02(this);" >良好 <input type="radio" name="radio02" value="不良" onClick="setVal_02(this);"> 不良 <input type="hidden" name="hradio02" value="未入力です。"> </td> </tr> </table> </Form> </body> </html>

  • ラジオボタンのNullチェック

    ラジオボタンがひとつもチェックが入ってない時にエラーを出したいのですがうまくいきません。 <script language="JavaScript1.2"> function chk_Riyu(){ for(idRadio=0; idRadio<frmEntry.optRiyu.length; idRadio++){ if(frmEntry.optRiyu[idRadio].checked) { return true; break; } alert("チェックされてません"); return false; } } </script> <form name="frmEntry" action="aaa.htm" method="post"> <input type="submit" value="理由" onclick="return chk_Riyu()"> <input type="Radio" name="optRiyu" value="1">あああ</td> <input type="Radio" name="optRiyu" value="2">いいい</td> <input type="Radio" name="optRiyu" value="3">ううう</td> このソースだと、一度目はチェックにひっかかるのですが、再度ラジオボタンにチェックを入れて理由ボタンを押してもエラーになってしまいます。 どこかおかしいところがありましたら教えていただけないでしょうか。 すみませんが宜しくお願いいたします。

  • ラジオボタンを一括で操作する方法を教えてください。javascript

    下記のようにフォームがあります。 チェックボックスをクリックして始めて、 同列のラジオボタンが選択できるようにしたいと考えております。 現在は、質問1のみですが質問の数がその下に増えていくと考えた場合、（例えば質問10まであると仮定して考えてください。）どのようにスクリプトを書いていけば、スマートになるかお知恵を貸していただけませんでしょうか？ よろしくお願いいたします。 <form name="form1"> <table><tr> <th><input type="checkbox" name="q1_1" value="" onClick="quetion()">質問1</th> <td><input type="radio" name="q1_1a" value="a" disabled ></td> <td><input type="radio" name="q1_1a" value="b" disabled ></td> <td><input type="radio" name="q1_1a" value="c" disabled ></td> </table></form>

  • 選択によってsubmitボタンの色を変える

    先程関連質問の回答をいただいた者なのですが、ラジオボタンの内容によってsubmitボタンの色を変えるところまで実現したいのですが、東京ならsubmitボタンはピンク、大阪ならsubmitボタンはブルーにしたいと思います。この場合は、submitボタンのところでIF文で分岐させればいいものでしょうか。 <html> <head> <script Language="JavaScript"> <!-- function set( n ) { document.myFORM.Submit.value = document.myFORM.elements[n].value; } // --> </script> </head> <body onLoad="set(0);"> <FORM ACTION="add.cgi" METHOD="POST" name="myFORM"> <INPUT TYPE="RADIO" NAME="Radio" VALUE="東京" onClick="set(0);" STYLE="background-color:pink" checked> <INPUT TYPE="RADIO" NAME="Radio" VALUE="大阪" onClick="set(1);" STYLE="background-color:blue"> <INPUT TYPE="SUBMIT" NAME="Submit" VALUE="★" STYLE="background-color:pink"> </form> </body> </html>

  • セレクトボックスを無効に出来なくて困っています

    このサイトで拝見したソースを参考に、ラジオボタンで選択した項目以外のテキストボックスなどが無効になる仕組みの、以下のようなフォームを作りました。 <form method="POST" name="form01"> <script language="javascript" type="text/javascript"> <!-- function swDis() { fObj = document.form01; fObj.sentaku01.disabled = (fObj.namae[0].checked) ? false : true ; fObj.sentaku02.disabled = (fObj.namae[1].checked) ? false : true ; fObj.sentaku03.disabled = (fObj.namae[2].checked) ? false : true ; } //--> </script> <p> <input type=radio name="namae" value="AAA" onclick="swDis()" checked /> sentaku01 <select name="sentaku01" id="sentaku01"> <option>選択肢１</option> <option>選択肢２</option> <option>選択肢３</option> </select> <br /> <input type=radio name="namae" value="BBB" onclick="swDis()" /> sentaku01 <input type=text name="sentaku02" disabled /> <br /> <input type=radio name="namae" value="CCC" onclick="swDis()" /> sentaku01 <input type=text name="sentaku03" disabled /> <br /> <input type=radio name="namae" value="sentaku04" onclick="swDis()" /> sentaku04<br /> <input name="" type="submit" value="送信する" /> </p> </form> しかし、この方法ですと、最初にフォームが表示された段階ではセレクトボックスが生きてしまい、他のいずれかのラジオボタンをクリックしないとセレクトボックスがグレーアウトしてくれません。 フォームが表示された時点ですぐにセレクトボックスをグレーアウトさせる方法はないでしょうか？ 対策をご存じの方がいらっしゃいましたらどうかよろしくお願い致します。

  • 親フレームの変数にアクセス(JavaScript）

    [index.html] <script src="script.js"></script> <frameset rows="50%,*" frameborder="1"> <frame src="content1.html"name="cont1"> <frame src="content2.html" name="cont2"> </frameset> [script.js] var test_text="てすと"; [content1.html] <form> <input type="text" name="in"> <input type="button" onClick="window.parent.test_text = document.forms[0].in.value;" value="IN"> </form> [content2.html] <form> <input type="text" name="out"> <input type="button" onClick="document.forms[0].out.value =　window.parent.test_text;"　value="OUT"> </form> のようになっています。 「index.html」の「script.js」の変数に、「content.1html」と「content2.html」からアクセスしたいです。 ですが、フレームになっているため、思うような動作をしてくれません。 よろしくお願いします。

EP-879AW インクカートリッジが認識できない
このQ&Aのポイント
  • EP-879AW インクカートリッジの認識エラーについて解決方法を教えてください
  • EP-879AW インクカートリッジの黒色のみがメンテナンスエラーを起こしています
  • 購入店舗で黒色の単品交換を試しましたが、問題は解決していません
回答を見る

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する