クリアボタンの動作について-その２
- 画面上で入力された項目を消去するためにクリアボタンを設置しており、通常のテキストボックスの内容を消去し、disabledのテキストボックスの内容は消去せずにそのまま、チェックボックスはchecked=falseにするという動作ができます。
- しかし、プルダウンメニューの初期値にリセットする機能が欠けています。
- 解決方法を教えていただけると助かります。
- ベストアンサー
クリアボタンの動作について その２
ご存知の方、ご教授くださいm(__)m クリアボタンの動作について、の続きです。 １点忘れていました。 現在、画面上で入力された項目を消去するためにクリアボタンを設置しており、 フォーム中の、 ・通常のテキストボックスの内容：消去 ・disabledのテキストボックスの内容：消去せずそのまま ・チェックボックスはchecked=falseにする までは回答者様のおかげで解決できたのですが、 もう１点、 ・プルダウンメニューも初期値にリセットする という点を忘れていました。 対象となるHTMLは以下のようなものです。 <select name="lineCode"> <option value=""></option> <option value="PAA" >PAA</option> <option value="PAB" >PAB</option> <option value="PAC" >PAC</option> </select> 現状のjavascript： $(function () { $('.buttons :button[name=clear]').click(function() { $('input[type="text"]').not('[disabled="disabled"]').val(''); $('input[type="select"]').val(''); $('input[type="checkbox"]').removeAttr ( 'checked' ); return false; }); .... こちらも解決方法を教えていただけると助かります。 よろしくお願いいたします。
- mano31
- お礼率33% (4/12)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 先ほどの回答に $('select[name="lineCode"]').val ( '' ); を追加すればOKです。 http://okwave.jp/qa/q7954963.html http://hppg.moe.hm/okwave/qa/q7954963/ にも追加して動作確認しました。 ＊前の質問が解決したならクローズしてくださいね。
関連するQ&A
- クリアボタンの動作について
ご存知の方、ご教授くださいm(__)m 現在、画面上で入力された項目を消去するためにクリアボタンを設置しています。 フォーム中の、 ・通常のテキストボックスの内容：消去 ・disabledのテキストボックスの内容：消去せずそのまま ・チェックボックスはchecked=falseにする としたいと考えているのですが、javascriptでうまく動かせていません。今書いているコードは下記のようなものです。 $(document).ready(function () { $('.buttons :button[name=clear]').click(function() { $('.inputs :input:visible').val(''); return false; }); これを改良してうまく動くようにすることは可能でしょうか。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- クリアボタンの動作について その３
ご存知の方、ご教授くださいm(__)m クリアボタンの動作についてその２、の続きです。 現在、画面上で表示された表項目を消去するために表データクリアボタンを設置しており、 画面中の、表データを削除したいと考えています。 現状のHTMLは以下のようなものです。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $().ready ( function() { $('.buttons :button[name=clear]').click ( function() { alert('come!'); $('input[type="text"]').not('[disabled="disabled"]').val ( '' ); $('input[type="checkbox"]').removeAttr ( 'checked' ); }); $('.buttons :button[name=clear_table]').click ( function() { alert('come2!'); //<tbody>の中身を消すコード }); }); </script> <style type="text/css"> </style> </head> <body id="main"> <form> <input type="text" name="n1"> <input type="text" name="n2"> <input type="text" name="n1" value="3" disabled> <hr> <input type="checkbox" value="2"> <input type="checkbox" value="2"> <hr> <button type="button" name="clear">クリア</button> <button type="button" name="table_clear">表クリア</button> </form> <div class="data_area"> <table id="schedule_head_table" class="data_table" border=1> <thead> <tr> <th width="60">No.</th> <th width="100">品名コード</th> </tr> </thead> <tbody id=tbody> <tr> <td><div class=right-align>1</div></td> <td>item_code</td> </tr> </tbody> </table> </div> </body> </html> 解決方法を教えていただけると助かります。 もし可能であれば、クリアボタン自体が動作しない理由も教えていただれば、今後の参考にさせていただきます。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- リセットボタンでクリアできない（初期の状態に戻らない）のですが・・・
宜しくお願いします。 フォームの入力チェックで、「ある項目(ラジオボタン)を選択した場合、次のテキストボックスを入力不可にする」という動きをjavascriptでさせています。 しかし、フォームのリセットボタンをクリックした際に、選択したラジオボタンはクリアできるのですが、テキストボックスの状態をクリアすることが出来ません。 ちなみに、動きの詳細は以下の通りです。 1.ラジオボタン「ケースA」を選択すると… 2.テキストボックスが入力不可となり、テキストボックスの背景色がグレーになる 3.「ケースB」「ケースC」を選択すると入力可でテキストボックス背景色は赤になる 4.いずれかを選択した状態でリセットボタンをクリックすると… 5.ラジオボタンはリセットされるが、背景色は残ったまま 6.リセットボタンを再度クリックすると、テキストボックスは全てがクリアされた状態（入力可・背景色白）に戻る このような感じです。 現在のソースは以下の通りですが、どのようにしたらよいでしょうか？ （javascriptは得手では無いので、本来ならもっと簡略できるのかもしれませんが、ご了承ください。m(__)m） [JAVASCRIPTソース] function DisAble() { if(document.input.case[0].checked == true ) { document.input.text1.disabled = true; document.input.text1.style.backgroundColor='#cccccc'; return false; } else if ((document.input.case[1].checked == true ) || (document.input.case[2].checked == true )){ document.input.text1.disabled = false; document.input.text1.style.backgroundColor='#ff0000'; return false; } else { // リセットボタンを2回クリックするとようやく以下の設定になる。 document.input.text1.disabled = false; document.input.text1.style.backgroundColor='#ffffff'; return false; } } [HTMLソース] <body> <form name="form1"> <!-- ラジオボタン --> <input type="radio" name="case" value="A" onClick="DisAble()">ケースA（入力不可） <input type="radio" name="case" value="B" onClick="DisAble()">ケースB（入力可） <input type="radio" name="case" value="C" onClick="DisAble()">ケースC（入力可） <!-- テキストボックス --> <input type="text" name="text1"> <!-- 送信・リセットボタン --> <input type="submit" value="送信"> <input type="reset" value="リセット" onClick="DisAble()"> </form> </body> 以上です。分かりづらい説明で申し訳ございませんが、どなたか、どうぞお知恵をお願いいたします。
- ベストアンサー
- JavaScript
- セレクトボックスを無効に出来なくて困っています
このサイトで拝見したソースを参考に、ラジオボタンで選択した項目以外のテキストボックスなどが無効になる仕組みの、以下のようなフォームを作りました。 <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
- セレクトの内容に応じてラジオボタンを自動選択する方法
<script type="text/javascript"> function selectChange(){ var selectedNum = document.form1.Q1.selectedIndex; if(selectedNum == 0 | selectedNum == 1) { document.formGeneratorForm1.Q2[0].disabled=false; document.formGeneratorForm1.Q2[1].disabled=false; }else{ document.formGeneratorForm1.Q2[0].disabled=true; document.formGeneratorForm1.Q2[1].disabled=true; } } </script> <select name="Q1" onchange="selectChange()"> <option value="0" selected >AAA</option> <option value="1" >BBB</option> <option value="2" >CCC</option> </select> <input type="radio" name="Q2" value="0" />000 <input type="radio" name="Q2" value="1" checked/>111 上記のソースでQ1でCCCを選択した時に、Q2で000を選択していたとしても111に自動的にチェックを入れる方法をご教授下さい。よろしくお願い致します。
- ベストアンサー
- JavaScript
- jQueryで複数のラジオボタンを処理
jQueryを最近使い始めました。 以下のようなことをしたいのですが、いいやり方が分かりません。 jQueryを使ってページの読み込み後すぐに、ラジオボタンにチェックを入れたいと思っています。 以下のようにすると実際にチェックが入りました。 HTML <input type="radio" name="a" value="1" /> <input type="radio" name="a" value="2" /> jQuery if(!$("input:radio[name=a]:checked").val()){ $("input:radio[name=a]:first").attr("checked" , "checked"); } ラジオボタンが複数ある場合、上記のjQueryのnameの値を変えたものを増やしていけば対応できたのですが、ラジオボタンがたくさんある場合、同じようなスクリプトが何行も増えてしまいます。 うまく関数にする方法やその他よい対処法はないでしょうか。 <input type="radio" name="a" value="1" /> <input type="radio" name="a" value="2" /> <input type="radio" name="b" value="1" /> <input type="radio" name="b" value="2" /> <input type="radio" name="c" value="1" /> <input type="radio" name="c" value="2" /> … if(!$("input:radio[name=a]:checked").val()){ $("input:radio[name=a]:first").attr("checked" , "checked"); } if(!$("input:radio[name=b]:checked").val()){ $("input:radio[name=b]:first").attr("checked" , "checked"); } if(!$("input:radio[name=c]:checked").val()){ $("input:radio[name=c]:first").attr("checked" , "checked"); } …
- 締切済み
- JavaScript
- PHPバージョン4.3.10で動作しない
はじめのページでチェックボックスにチェックしてもらい、 次のページでそのチェックしたものを表示したいです。 しかし、下記のコードではPHPバージョン4.3.10ではうまく動作しませんでした。 PHPバージョン4.3.10で動作させるには、どうすればよいか教えていただけませんか？ <form action="mail.php" method="post"> <input name="member[]" type="checkbox" value="AAA" checked>AAA <input name="member[]" type="checkbox" value="BBB" checked>BBB <input name="member[]" type="checkbox" value="CCC" checked>CCC <input type="submit" value="send"> </form> mail.php <?PHP if(is_array($member)){ $txt ="あなたの選んだのは"; foreach ($member as $key=>$val){ if ($key==0){ $txt .=$val; }else{ $txt .="、".$val; } } $txt.="です"; }else{ $txt="あなたは誰も選んでません"; } print $txt; ?>
- ベストアンサー
- PHP
- 一つのチェックボックスでテキストフィールドとプルダウンリストを制御
現在以下のようなテキストフィールドとプルダウンがあります。 <form name="register" action="register_kakunin.php" method="post"> <input type="checkbox" name="name_check" onclick="fchk(this,1);" /> <input name="revenue" onChange="keisan()" type="text" id="revenue" size="6" readOnly="true"/> <input type="checkbox" name="chk" onclick="fchk2(this)" /> <select name="paymethod" disabled="disabled"> <option value="">Pay Method</option> <option value="cash">cash</option> <option value="card">card</option> <option value="point">point</option> <option value="coupon">coupon</option> </select> </form> これを function fchk(obj, name_check){ var frm=document.register; if(!obj.checked){ /* チェックされたら、テキストボックスを有効化 */ frm.revenue.readOnly=true; }else{ /* チェックが外されたら、テキストボックスを無効化 */ frm.revenue.readOnly=false; } } function fchk2(obj) { var frm=obj.form; var len=frm.elements.length; /* フォームの要素数 */ if(obj.checked==true){ /* チェックボックスが選択されている場合、 プルダウンを有効化（disabled=false） */ frm.elements["paymethod"].disabled=false; }else{ /* チェックボックスが選択されていない場合、 プルダウンを無効化（disabled=true） */ frm.elements["paymethod"].disabled=true; } } という2つのスクリプトで制御しているのですが、前者を操作するときには必ず後者も操作することになるため、一つのチェックボックスで2つとも制御できるようにしたいのですが、どうしたらいいのでしょうか？ 上記のjavascriptはネットから拾ってきたもので、自作ではありません。 宜しくお願いします。
- ベストアンサー
- JavaScript
- チェックボックスの表示・非表示 動作
はじめまして。 初めて掲示板を利用させていただきます。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> よろしくお願いいたします。
- ベストアンサー
- JavaScript
- ボタンを押したらラジオボタンを選択したい(サンプルソース付)
ボタンを押したら、ラジオボタンを選択するようにしたいと思っています。 なんとかチェックボックス、セレクトボックス(?)はうまくいったのですが、どうしてもラジオボタンだけがうまくいきません。どうすればよいでしょうか？ ※document.forms[0].R1[0].checked = true; のようにすると意図した通りに動作することはわかったのですが、項目が増えた時にミスの原因になりますので、できるだけ"a"や"b"とvalueを使いたいと思っています。 すみませんが、よろしくお願いします。 -- <html> <head> <SCRIPT language="JavaScript"><!-- function check() { document.forms[0].C1.checked = true; document.forms[0].S1.value = "3"; document.forms[0].R1.value = "a"; } //--></SCRIPT> <title></title> </head> <body> <form> <input type="checkbox" value="yes" name="C1"><br> <select name="S1"> <option value="0">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><br> <input type="radio" name="R1" value="a"><input type="radio" name="R1" value="b"><br> <input type="button" onclick="javascript:check()"> </form> <br> </body> </html>
- ベストアンサー
- JavaScript
補足
LancerVII様 今回も素早いご回答ありがとうございます！ いただきました内容で問題なく動作できました！ 多謝、多謝です。 ありがとうございました！