• ベストアンサー

チェックボックスとテキストフォームが両方空の場合はPOSTを不許可にしたい

http://oshiete1.goo.ne.jp/kotaeru.php3?q=1810910 でご教示いただいたスクリプトに若干の機能追加です。 (1) テキストフォームに 値がある場合はチェックOFF 値がない場合はチェックON (2) テキストフォームに何か値があるのにチェックされた 場合は、テキストフォームの値はクリア、 以上までは、これまで当掲示板で教わったいろいろな サンプルで何とか実現できたのですが、 チェック=OFF、テキストフォーム=空　という状態が作れてしまうため この状態にsubmitボタンを押下した際は、 alert("チェックとテキストの両方が指定されていません"); のように、POSTを許可しないようにしたいです。 よろしくお願い致します。 <html> <head> <script language="JavaScript" type="text/JavaScript"> <!-- function checktext() { if(document.n0.n2.value.length){document.n0.n1.checked=false;} else{document.n0.n1.checked=true;} } function autoClear(f,cn,fl){ for (var i=0;i<f.elements.length;i++) { if (f.elements[i].className == cn) { f.elements[i].value = ""; } } } //--> </script> </head> <body> <form name="n0" id="0" action="" method="post"> <input type="checkbox" name="n1" id="1" onClick="autoClear(this.form,'n2',this.checked);" checked> <input type="text" name="n2" id="2" class="n2" onChange="checktext()"> <input type="submit"> </form> </body> </html>

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

  • ベストアンサー
回答No.1

<input type="submit"> を <input type="submit" onClick="if((n1.checked==false)&&(n2.value=='')) return false;"> に置き換えてみてください。 というか、checkboxのonClickに手を入れれば両方とも空にならなく出来そうですが・・・。

その他の回答 (3)

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

なんか考えすぎな気がします。 このくらいにおさえておくのが現実的なんではないでしょうか？ この場合n1とn2がともに未選択はないはずです。 ちょっとへんな動きもありますが、まぁそれはご愛嬌で。 <html> <head> <script language="JavaScript"> function checktext(num,cn) { num.form.elements[cn].checked=(num.value==""); } function autoClear(num,cn){ if(num.checked){ num.form.elements[cn].value = ""; }else{ num.form.elements[cn].focus(); } } </script> </head> <body> <form name="n0"> <input type="checkbox" name="n1" onClick="autoClear(this,'n2');" checked> <input type="text" name="n2" onBlur="checktext(this,'n1')"> <input type="submit" value="send"> </form> </body> </html>

litton101
質問者

お礼

yamabejpさん、いつもありがとうございます。 お気づきかと思いますが 元質問のサンプルは、前にyamabejpさんに ご教示いただいたclassで管理するscriptです。 本題ですが、やっぱり考えすぎですかね？ 前にも、「複雑なことするのはあまりよくない」 とご指摘いただきましたが、確かに 神経質？になってるかもしれません。 ご提示いただいたものも試させていただき、 動作は良好です。 Excelのグラフ軸ダイアログと同じ作動を目指して いるのですが、yamabejpさんのものが最適かも しれません。 いずれにせよ、ありがたいことに３つ例示いただき ましたから、一番都合よさそうなものを組み込ま させていただきます。 今後ともよろしくお願い致します

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.3

function sendCheck(f){ if(!f.n1.checked && f.n2.value==""){ alert("チェックとテキストの両方が指定されていません"); return false; } else { return true; } } としといて <form name="n0" id="0" action="" method="post" onsubmit="return sendCheck(this)"> とする

litton101
質問者

お礼

BLUEPIXYさん、いつもご教示ありがとうございます。 動作の方も完璧です。＃１さんのように 違って外部ファイルにもてるのがいいですね。 （無論、＃１さんのもそうできるでしょうが） 本件、どれが最適か迷ってしまいますが、 いろいろ検討させていただきます。

回答No.2

＃１です。alert()忘れてました。 <input type="submit" onClick="if((n1.checked==false)&&(n2.value=='')){ alert('チェックとテキストの両方が指定されていません'); return false;}"> でalert()も表示されるはずです。 失礼しました。

litton101
質問者

お礼

Chronos198さん、レスありがとうございました。 御礼遅くなってすみません。 動作の方、もちろんばっちりでした。 こうして1行に収まってしまうほど シンプルに片付くとは思いませんでした(^^; ありがとうございます。

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

関連するQ&A

  • テキストフォームの未入力チェック

    お世話になります。 Javascriptでテキストフォームの入力チェックを行っております。 テキストフォームにはDBから取得した値が入っており、その値を変更して更新できるプログラムを作ろうとしています。 テキストフォームが未入力だった場合に元の値を入れてPOSTリクエストを投げたいのですが方法が分かりません。 (よく見かける未入力だったらアラートを出すというのは出来るのですが・・・） 以下ソースの抜粋になります。 function check(){ for(i=0; i<document.iform1.length;i++){ if(document.form1.elements[i].value==""){ document.iform1.elements[i].valueに元の値を入れたい。 } } <form name="form1" action="updata.php" method="POST"> <input type="button" name ="save" value="更新" onClick="check()"> </form> 以上、ご教示よろしくお願いいたします。

  • テキストフォームのチェックについて

    テキストファームの内容チェックについて教えてください。 下記コードで取得したURLをテキストフォームに表示させ「onclick」でiframeに画面を表示させています。 これを、テキストファームが書き換わった段階で、実行することは できないでしょうか？ （テキストフォーム内のURLが書き換わったら、その内容をチェック して、iframeにそのURLの画面を表示する） <html> <form name="f1"> URL:<input type="text" name="url" size="60" value="" /> <input type="button" value="このURLへ移動" onclick="target_name=***.location.href=this.form.url.value"> </form> <script type="text/javascript"> function set_latlng() { document.f1.url.value="http://***.***.****" /script> 以上、宜しくお願い致します。

  • テキストボックスに入力されたらラジオボタンにチェック

    いつもお世話になっております。 タイトル通りなのですが テキストボックスに入力された時に、チェックボックスや ラジオボタンににチェックが付くようなJavaScriptを思考しています。 test.php ---------------------------------------- <form name="form1" method="post" action="test.php"> <input type="checkbox" name="235[]" value="1"> <input name="394" type="text" style="ime-mode: active" onchange="text_check('235')" value="" /> </form> script.js ---------------------------------------- function text_check(nm) { 　obj = document.form1; 　alert(obj.elements[nm + '[]'].length);　// アラートで「undefined」と出てしまう。 　for( i=0; i<obj.elements[nm + '[]'].length; i++){ 　　obj.nm[i].checked = true; 　} } フォームのラジオボタン、テキストボックスのname属性は 数字じゃない場合は、問題なさそうなのですが 数字の場合だとうまく動作してくれません。 name属性を変更することは考えていません。 ご教示よろしくお願いいたします。

  • test_chk[1]いう名前のチェックボックスに自動でチェックをつけたいです

    下記スクリプトですとエラーになってしまいます。 フォームエレメントの名前に[]の文字を使うと 確か特殊な書き方でないとダメだったか RFC違反だった気もするのですがスクリプトで 自動チェックを行う事は可能でしょうか？ <script language="JavaScript"> document.fm.test_chk[1].checked=true; </script> <form name="fm"> <input type="checkbox" name="test_chk[1]" value="1"> </form>

  • form で、チェックボックスにまとめてチェック

    データベースから、データを持ってきて、複数のグループに分けてまとめてチェックを入れようとしています。 複数のチェックボックスがある場合はいいのですが、チェックボックスが一つしかない場合に チェックが入りません。 どの様に変更すれば、一つでもチェックが入るようになるでしょうか？ 以下の様なサンプルコードを見ながら、作成しています。 function AllChecked1(){ var check = document.form.a1.checked; for (var i=0; i<document.form.elements['aa1[]'].length; i++){ document.form.elements['aa1[]'][i].checked = check; } } <form name="form" method="POST" action="select1.php"> <input type="checkbox" name="a1" id="a1" onClick="AllChecked1();" /><label for="a1"> group1 全選択</label> <input type="checkbox" name="aa1[]" id="aa11" value="1" /><label for="aa11">名前1</label><br /> </form> よろしくお願いいたします。

  • チェックボックスで得たデータを送信する場合

    CGIでデータの受け渡しを行い、決められたアドレスへ結果を送信するアンケートをつくっています。以前、チェックボックスで複数回答可とした場合の制限のかけ方をJavaScriptを用いた方法で教えてもらいましたが、これを利用して得た値をCGIで受け取りたいのですが、どうやって設定すればいいのでしょうか。「name」がそれぞれ名前が違う所でつまずいています。また<form method=post action="***.cgi">～</form>と項目全体をくくればいいのでしょうか？参考までに以下のHTMLを付記いたします。 <html> <head> <title>５個のうち３個しかチェックできないようにする</title> <script Language="JavaScript"><!-- function check(n) { fOBJ = document.myFORM; count = 0; for (i=1; i<=5; i++) if (fOBJ["CB"+i].checked) count++; if (count > 2) { alert("３個以上チェックできません"); fOBJ["CB"+n].checked = false; } } // --></script> </head> <body> <form name="myFORM"> <input type="checkbox" name="CB1" onClick="check(1)">チェック１<br> <input type="checkbox" name="CB2" onClick="check(2)">チェック２<br> <input type="checkbox" name="CB3" onClick="check(3)">チェック３<br> <input type="checkbox" name="CB4" onClick="check(4)">チェック４<br> <input type="checkbox" name="CB5" onClick="check(5)">チェック５<br> </form> </body> </html>

    • ベストアンサー
    • CGI
  • java script フォームのチェックボックス入力制限について

    java script フォームのチェックボックス入力制限について どなたかお教えください。 以下のコードを書き換えて、現状では1つのチェックボックスを複数にし(かつ、複数選択可にし）、チェックボックスをチェックした場合のみ「選択肢」ラジオボタンがアクティブになる仕様にしたいと考えております。 サイト上で見つけたサンプルコードをいじっているのですが、何分素人なのでうまく行きません。どなたか助けていただけると助かります。 よろしくお願いします。 <script type="text/javascript"> function fchk3(obj){ var frm=obj.form; var len=frm.elements.length; if(obj.checked==true){ for(var i=0; i<len; i++){ if(frm.elements[i].type=="radio"){ frm.elements[i].disabled=false; } } }else{ for(var i=0; i<len; i++){ if(frm.elements[i].type=="radio"){ frm.elements[i].checked=false; frm.elements[i].disabled=true; } } } } </script> <form name="form3" action="#"> <label for="chk3"><input type="checkbox" id="chk3" name="chk3" onclick="fchk3(this)" checked="checked" />このボタンのチェックを外すとラジオボタンが無効化</label><br /> <label for="chk3_r1"><input type="radio" id="chk3_r1" name="r1" />選択肢</label> </form>

  • チェックボックスの無効化、有効化

    あるサイトを参考にチェックボックスの無効化、有効化を実装したいと考えています。 ソースは以下の通りなのですが、この場合、name属性にそれぞれ異なる番号（t1、t2、t3やc1、c2、c3）が振られている必要がありますが、 これを同じnameに統一して動作させるには、どのように記述したらよいのか教えて頂けませんでしょうか？ nameのtとcを統一したいのではなく、t1、t2、t3を番号抜きのtに統一、c1、c2、c3を番号抜きのcに統一したいと思っています。 <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="#"> <label for="chk1"><input type="checkbox" id="chk1" name="chk1" value="1" onclick="fchk2(this,'t')" checked="checked" />テキストボックスの無効化・有効化を切替（チェックを外すと無効化）</label><br /> <input type="text" name="t1" value="テキストA" size="20" /> <input type="text" name="t2" value="テキストB" size="20" /> <input type="text" name="t3" value="テキストC" size="20" /> <hr /> <label for="chk2"><input type="checkbox" id="chk2" name="chk2" value="1" onclick="fchk2(this,'c')" checked="checked" />チェックボックスの無効化・有効化を切替（チェックを外すと無効化）</label><br /> <input type="checkbox" name="c1" value="1" />選択肢A<br /> <input type="checkbox" name="c2" value="1" />選択肢B<br /> <input type="checkbox" name="c3" value="1" />選択肢C </form>

  • htmlフォームでチェックボックスの入力漏れを警告

    チェック必須にしたいのですが、出来ません。 以下のようにnameの所に name="kurasu[1]" と入れています。 他の処理もあるので、そのような入れ方をしています。 <input type="checkbox" name="kurasu[1]" id="kurasu1" value="1" /> <input type="checkbox" name="kurasu[5]" id="kurasu5" value="5" /> <input type="checkbox" name="kurasu[8]" id="kurasu8" value="8" /> としてあるので、以下のように if(!document.form.kurasu[1].checked　&& !document.form.kurasu[5].checked && !document.form.kurasu[8].checked){ として、アラートを出したいのですが、出来ません。 やはり　kurasu[1]　では出来ないでしょうか？ 他のものは以下で処理しています。 <script type="text/javascript"> function check(){ var flag = 0; var errorMes = new Array(); var chkCount = 0; if(!document.form.tel.checked){ // 「電話番号」の記入をチェック flag = 1; errorMes.push("「電話番号」をご記入ください。\n"); } if(flag){ var n = errorMes.length; var errorStr =""; for(i=0;i<n;i++){ errorStr+= errorMes[i]; } window.alert(errorStr); // 記入漏れがあれば警告ダイアログを表示 return false; // 送信を中止 }else{ return true; // 送信を実行 } } </script>

  • javascriptでのテキストボックス制御

    javascriptを使用して 特定のテキストボックスを動的に　enable←→disableを切り替えたく、様々なホームページを見ながら試行錯誤して、下記ソースまで辿りつきましたが、うまく動かなくて困っています。 どうかご教示ください。よろしくお願いします。 現状：チェックをいれると enable→disableになるが、外すと戻らない。 目標：同上＋チェック外すと最初disableも含めて、enableになる。 <html> <head> <script language="javascript" type="text/javascript"> function autochk(f){ for(var i=0;i<f.form.length;i++){ if (f.form.elements[i].className=="ko"){ if (f.form.elements[i].checked){　//checked チェックが入っていたら f.form.elements[i].disabled = false; // 入力不可, 無効化 }else{ f.form.elements[i].disabled = true; // 入力可能,有効化 } } } } </script> <style type="text/css"> <!-- ul li { list-style: none; } label { margin-right: 10px; width:200px; float: left; } --> </style> </head> <body> <form> <ul> <li><input type="checkbox" name="oya" value="1" onclick="autochk(this);">チェック</li> <li><label>無効→チェック→無効→有効</label><input type="text" name="ko1" class="ko" value="1" disabled></li> <li><label>有効→チェック→無効→有効</label><input type="text" name="ko2" class="ko" value="1"></li> <li><label>有効→チェック→そのまま</label><input type="text" name="other1" value="1"></li> <li><label>有効→チェック→無効→有効</label><input type="text" name="ko3" class="ko" value="1"></li> <li><label>有効→チェック→無効→有効</label><input type="text" name="ko4" class="ko" value="1"></li> <li><label>有効→チェック→そのまま</label><input type="text" name="other2" value="1"></li> </form> </ul> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する