• ベストアンサー

チェックボックスの制限の仕方について

JavaScriptを使ってチェックボックスのチェック制限をしたいのですが、「二つまでチェック」というところに二つ以上チェックした時点で（「送信」等を押す前に）警告が返ってくるようにしたいのですが、分かりません。こういった制限をかけたい質問が同一ページに複数並べようと思います。お願いします。

  • kajita
  • お礼率75% (130/172)

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

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

>Internal Server Error CGIが正しく実行できなかったということですよね。 以前は、動いていたのだから、 やはり、追加した所が実行できなかったということですね。 ＃６のコードが、特別バグがあるようには思えないのですが、 こう言う時は、 少しずつ、変更しては、 動作のアヤしい変数なんかをprintしてみるしかないですね。 がんばって下さい／~~

その他の回答 (6)

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

>以下の３箇所の「check1」にはチェックボックスのname属性を入れるんですよね。 名前を合わせるのは、paramの所です。 @check1は、名前を合わせているだけで、本来任意です。 >value が何も表示されません。 なぜでしょうね？ $query= new CGI; @check1 = $query->param('check1'); にしてみるとか。 $FORMでは取り出せます？ if ($ENV{'REQUEST_METHOD'} eq "POST") { read(STDIN, $buf, $ENV{'CONTENT_LENGTH'}); } else { $buf = $ENV{'QUERY_STRING'}; } とかしたら$bufはどうなりますか？ 力にはなれないかも…

kajita
質問者

お礼

いろいろとありがとうございました。結局、教えて頂いたのに私が初心者のあまり上手く動かせない状態です。 前回教えていただいた @check1=param("check1"); $result1=join(',',@check1); の所に $query= new CGI; @check1 = $query->param('check1'); を入れて print "<td width=300><font size=2>$result1</font>&nbsp;</td>\n"; と書き出したら 「Internal Server Error」になりました。（属性は755） 同じく以下の方も「Internal Server Error」になりました。 if ($ENV{'REQUEST_METHOD'} eq "POST") { read(STDIN, $buf, $ENV{'CONTENT_LENGTH'}); } else { $buf = $ENV{'QUERY_STRING'}; } を入れて print "<td width=300><font size=2>$rbuf</font>&nbsp;</td>\n"; と書き出す。

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

＃４>多分、Perlなんですかね～ 例えば、 ＃２の様なnameが同じものが複数ある場合（チェックボックスの場合はこちらのが普通ですね） use CGI qw(:standard); @check1=param("check1"); @check2=param("check2"); の様に（やり方は色々あると思いますが）配列で取り出す必要があります。 配列で取り出せば、 $result1=join(',',@check1); $result2=join(',',@check2); のように、指定した文字で連結できます。 こうした連結した文字列で print "<td width=300><font size=2>$result1</font>&nbsp;</td>\n"; の様に書き出しすればいいでしょう。

kajita
質問者

お礼

初心者の質問でスイマセン。あれこれ試したのですが上手くいかず、また駆け込んだ次第です。教えて頂いた use CGI qw(:standard); @check1=param("check1"); @check2=param("check2"); は $result1=join(',',@check1); $result2=join(',',@check2); と一緒にCGIに併記したらよろしいのでしょうか？ また書き出しは print "<td width=300><font size=2>$result1、$result2</font>&nbsp;</td>\n"; のようにすればよろしいですか？

kajita
質問者

補足

今朝の質問はナシにして下さい。私が勘違いしていたみたいで。スミマセン。それで症状の状況が変わりました。少し前進しました。でも教えていただいた配列で記述しましたら、確認画面でのcheck1とcheck2の項目がチェックしたにも関わらず、CGIの確認画面には「value」が何も表示されません。 ちなみに以下の３箇所の「check1」にはチェックボックスのname属性を入れるんですよね。 @check1=param("check1"); $result1=join(',',@check1);

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

#2,3の <input type="submit" action="send.cgi" method="POST" value="送信"> は、間違いです。すみませんm(_ _)m <form name="FORM"action="send.cgi" method="POST"> <input type="submit" value="送信"> <form name="SEND"action="send.cgi" method="POST"> <input type="submit" value="送信"> にそれぞれ直して下さい。

kajita
質問者

お礼

毎回、助けて頂いてとても感謝しております。本当にたびたびで申し訳ありませんが、最終段階まできて困っています。教えていただいた通りの記述でなにもかも上手くいきました。あと一息というところで止まってます。CGIのことになりますがお聞きしてもいいでしょうか？詳しく申し上げますと、アンケートに回答後「確認」ボタンを押すとCGIで作った「確認画面」というものに進みます。ここではHTMLで記述された「name」を拾ってきて表示させていますが、 【その1】以下の場合チェックが複数あった時は最後に答えた「value」しか表示されないようです。 print "<td width=300><font size=2>$FORM{'check1'}</font>&nbsp;</td>\n"; 【その2】さらに、以下のように「name」を一つずつ変えて置いてみましたが、“、”で区切った場合回答されなかった「value」の所が空白になって「、、Ｃ」となってしまいます。 print "<td width=300><font size=2>$FORM{'check1'}、{'check2'}、{'check3'}</font>&nbsp;</td>\n"; 理想は３つチェックされれば「Ａ、Ｂ、Ｃ」２つなら「Ｂ、Ｃ」のようにチェックがあった「value」のみを拾ってきて、しかも間を“、”で区切りたいのですが。よろしくお願いいたします。

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

あくまで＃１のやり方にこだわるやり方。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <script type="text/javascript"> <!-- function limitation(f,limit){ var c=0; var setValue=""; for(var i=0;i<f.length;i++){ if(f.elements[i].checked){ c++;//現在のチェックされている数を数える setValue+=f.elements[i].name + "=" + f.elements[i].value + ";"; } } if(c>limit){ alert("チェックできる数を超えています!"); return false; //制限数を超えていたら無かったことにする } else { document.forms["SEND"].elements[f.name].value=setValue; return true; } } //--> </script> <title>チェックボックスのチェック数の制限</title> </head> <body> <form name="form1"> ２つまでチェックできます。<br> A<INPUT type="checkbox" name="check1" value="A" onclick="return limitation(this.form,2)"><br> B<INPUT type="checkbox" name="check2" value="B" onclick="return limitation(this.form,2)"><br> C<INPUT type="checkbox" name="check3" value="C" onclick="return limitation(this.form,2)"><br> D<INPUT type="checkbox" name="check4" value="D" onclick="return limitation(this.form,2)"><br> </form> <form name="form2"> ３つまでチェックできます。<br> A<INPUT type="checkbox" name="check1" value="A" onclick="return limitation(this.form,3)"><br> B<INPUT type="checkbox" name="check2" value="B" onclick="return limitation(this.form,3)"><br> C<INPUT type="checkbox" name="check3" value="C" onclick="return limitation(this.form,3)"><br> D<INPUT type="checkbox" name="check4" value="D" onclick="return limitation(this.form,3)"><br> E<INPUT type="checkbox" name="check5" value="E" onclick="return limitation(this.form,3)"><br> </form> <form name="SEND"> <input type="submit" action="send.cgi" method="POST" value="送信"> <input type="hidden" name="form1" value=""> <input type="hidden" name="form2" value=""> </form> </body> </html>

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

＃１＞formは入れ子にできません。 そうですね。＃１は、送信するということをあんまり考えていませんでした。 以下 フォームを１つ（単純）にして送信できるようにしたバージョン <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <script type="text/javascript"> <!-- function limitation(f,limit){ var c=0; for(var i=0;i<FORM.elements[f.name].length;i++){ if(FORM.elements[f.name][i].checked){ c++;//現在のチェックされている数を数える } } if(c>limit){ alert("チェックできる数を超えています!"); return false; //制限数を超えていたら無かったことにする } else { return true; } } //--> </script> <title>チェックボックスのチェック数の制限</title> </head> <body> <form name="FORM"> ２つまでチェックできます。<br> A<INPUT type="checkbox" name="check1" value="A" onclick="return limitation(this,2)"><br> B<INPUT type="checkbox" name="check1" value="B" onclick="return limitation(this,2)"><br> C<INPUT type="checkbox" name="check1" value="C" onclick="return limitation(this,2)"><br> D<INPUT type="checkbox" name="check1" value="D" onclick="return limitation(this,2)"><br> ３つまでチェックできます。<br> A<INPUT type="checkbox" name="check2" value="A" onclick="return limitation(this,3)"><br> B<INPUT type="checkbox" name="check2" value="B" onclick="return limitation(this,3)"><br> C<INPUT type="checkbox" name="check2" value="C" onclick="return limitation(this,3)"><br> D<INPUT type="checkbox" name="check2" value="D" onclick="return limitation(this,3)"><br> E<INPUT type="checkbox" name="check2" value="E" onclick="return limitation(this,3)"><br> <input type="submit" action="send.cgi" method="POST" value="送信"> </form> </body> </html>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <script type="text/javascript"> <!-- function limitation(f,limit){ var c=0; for(var i=0;i<f.length;i++){ if(f.elements[i].checked) c++;//現在のチェックされている数を数える } if(c>limit){ alert("チェックできる数を超えています!"); return false; //制限数を超えていたら無かったことにする } else return true; } //--> </script> <title>チェックボックスのチェック数の制限</title> </head> <body> <form name="form1"> ２つまでチェックできます。<br> A<INPUT type="checkbox" name="check1" value="A" onclick="return limitation(this.form,2)"><br> B<INPUT type="checkbox" name="check2" value="B" onclick="return limitation(this.form,2)"><br> C<INPUT type="checkbox" name="check3" value="C" onclick="return limitation(this.form,2)"><br> D<INPUT type="checkbox" name="check4" value="D" onclick="return limitation(this.form,2)"><br> </form> <form name="form2"> ３つまでチェックできます。<br> A<INPUT type="checkbox" name="check1" value="A" onclick="return limitation(this.form,3)"><br> B<INPUT type="checkbox" name="check2" value="B" onclick="return limitation(this.form,3)"><br> C<INPUT type="checkbox" name="check3" value="C" onclick="return limitation(this.form,3)"><br> D<INPUT type="checkbox" name="check4" value="D" onclick="return limitation(this.form,3)"><br> E<INPUT type="checkbox" name="check5" value="E" onclick="return limitation(this.form,3)"><br> </form> </body> </html>

kajita
質問者

お礼

教えていただいた通りの記述でうまくいきました。ありがとうございます。それで、次の段階のことをおたずねしてもいいでしょうか？投稿者に「以下の内容で間違いなければ"送信"を押してください。」というような確認画面を出して、そこで"送信"が押されると担当者へその内容がメールで送信されるという風にしたいのですが、<form method=post action="***.cgi">～</form>はどこに置けばいいか分かりません。このタグで質問項目全てをくくって、この中に教えていただいた<form　name="form1">～</form>を各質問ごとに設置するのでしょうか？<form>タグは入れ子に出来ますか？

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

関連するQ&A

  • 複数チェックボックスの入力制限について

    現在PHP5.05+Mysql4.0.25にて、プログラムを作成しておりますが、 例えば10個のチェックボックスに対して、入力を２個まで とするのに、Javascriptで出来るのを見つけましたが、 それはformタグ内で、数えている為に、 複数のチェックボックスのグループがあると 一度に送信出来なくなってしまいます。 一度に、複数のチェックボックスのグループの データを送信するのに、何かよい方法はありますでしょうか、 よろしくお願いいたします。

    • ベストアンサー
    • PHP
  • チェックボックスのチェック

    チェックボックスのチェックして送信した後のページから送信前のページに戻るとチェックボックスがチェックされた状態でブラウザで表示されます 1 2ここにチェックを入れて削除すると 3 1 3戻るを押した時にここにチェックが入ってしまいます javascriptで戻るボタンをつくっていますが他にチェックが残らずにに戻る方法はありますか？ <input type=button value="戻る" onClick="history.back()"> よろしくお願いします

    • ベストアンサー
    • HTML
  • ラジオボタンの選択によってチェックボックスのチェックできる個数を制限し

    ラジオボタンの選択によってチェックボックスのチェックできる個数を制限したい。 他の方の質問を見たのですがマッチする質問がなかったのでご質問させていただきます。 現在申し込みフォームを作成しているのですが、要件としては、 ラジオボタンの選択によってチェックボックスのチェックできる個数を制限したい。 と思っています。javascriptで実現できると思うのですがなかなかできずに困っております。 ＜ラジオボタン＞ ○りんご　○みかん　○めろん　○すいか ＜チェックボックス＞ □青森産　□愛媛産　□千葉産　□神奈川産 りんごを選んだ人は、チェックボックスで１つしか選択できないようにしたい。 みかんを選んだ人は、チェックボックスで２つしか選択できないようにしたい。 めろんを選んだ人は、チェックボックスで３つしか選択できないようにしたい。 すいかを選んだ人は、チェックボックスで４つ選択できるようにしたい。 可能であれば制限を超えた場合はアラートを上げたいと思います。 ２つまでしか選べませんというように。 大変申し訳ありませんが、参考になるページやソースなどを教えていただければと 思います。よろしくお願い致します。

  • チェックボックスのチェックを次のページへ引き継ぐ

    分かり難いかと思いますが、説明させていただきます。 仮に、Ａ.html Ｂ.htmlの二つページがあるとします Ａ.html □あああ □いいい □ううう □えええ □おおおお このＡ.htmlページでチェックをつけたボタンのチェックをＢ.htmlの同じフォーマットのチェックボックスに反映させたいのです。 チェックボックスは複数選択可能となっています CGIなどは使わないようにJavaScriptで処理したいのです。

  • フォームのチェックボックスのチェックされた数によって・・・。

    チェックボックスが数種類あり最後に送信ボタンを押して、リンクを飛ばしたいと思っています。 どのチェックボックスがチェックされたかによって、（複数チェックのケースありです）その条件によって飛ぶようにしたいのですが、onsubmitをしてfor文を通して、if～else文で条件定義してそれぞれ飛ばしたらいいぐらいはわかるのですが、それ以降が・・・。 本やネットのjavascriptについて書かれているところも読んでみましたがもひとつ具体的にどこをどうすれば良いのかわかりません。 どなたか助けてもらえないでしょうか？

  • チェックボックスについて

    こんばんは。いつもお世話になっておりますが、こちら（JavaScript）では、初めての投函です。 よくヤフーやホットメールなどのwebmailの受信ボックスなどに、削除するためのチェックボックスが備わっておりますが、全てのチェックを入れるために、最初の一行目のチェックボックスにチェックを入れることで全てにチェック。チェックを外す事で全てを外す。という動作が行われていると思います。 私、PHPの方ではよく質問させていただく事もあり、お恥ずかしいながら、上記質問をPHPで・・と思っていたら、これら動作はJavaScriptであることをお教え頂きました。 これまでJavaScriptには無縁であったこともあり、色々なサイトにお邪魔しているものの、設定ボタン、解除ボタンによる設定・解除の説明はあるものの、チェックボックスによる、これらの動作の説明がなく、改めてこちらにて質問させて頂くに至りました。 色々と試してはいるものの、チェックボックスにチェックを入れると全てにチェックが入るが、解除するまでに至っておりません。 お忙しい中恐縮ですが、ご指導のほど宜しくお願い申し上げます。

  • チェックボックスのチェックをつけたら

    まだJavaScriptかじりたてで,未熟ですみません。 出来るかどうかも分からないのですが, HPから小ウィンドウを開き、その小ウィンドウ内にチェックボックスと名前があります。 「チェックボックス」にチェックをつけた人の名前を、ボタンもなにも押さずに閉じるで、小ウィンドウを閉じたらもとのHPの指定した場所に名前を表示する事ってできるのでしょうか？ ちなみに人は複数選択する可能性もあります. もしできたら、実践してみたいのですが、教えていただけないでしょうか？すみません。よろしくおねがいします。

  • チェックボックスにチェックを入れると飛ぶ

    お世話になります。 フォームとかでチェックボックスを入れると その時点でリンク先のページに飛ばすことってできますか？ その方法を教えていただければと思います。

    • ベストアンサー
    • HTML
  • フォームの入力チェック方法

    現在、アンケートフォームを作成しています。 チェックボックス、ラジオボタン、プルダウンを複数設定していますが 必須としている設問に関して未選択のまま送信ボタンを押した場合、警告ダイアログボックスを表示させるにはどのようなJavaScriptを設定すればいいでしょうか？ JavaScriptについては全く素人の為、どなたか助けてください。 お願いします。

  • チェックボックスの自動チェックについて

    イベントが起こるとチェックボックスに自動でチェックを入れたいのですが教えて下さい。 コンボボックスとチェックボックスが下のようにあります。 コンボボックス 　　　　　チェックボックス 　　　-------------　　　　　　　-- 　　　|　　　　　　|　　　　　　　|　| 　　　-------------　　　　　　　-- 　　　-------------　　　　　　　-- 　　　|　　　　　　|　　　　　　　|　| 　　　-------------　　　　　　　-- 複数のコンボ,チェックボックスには"コンボ001"、"チェック001","コンボ002"・・・ というように名前がついていて、その時々で、コンボ、チェックボックス の数は変わってきます。 そこで、コンボ001の値が変化したらチェック001にチェック、コンボ002の値が変化したら チェック002にチェックするという風にしたいと考えています。 コンボが onChange したら用意しておいたファンクションを起動させると言うのはわかるのですが、肝心のJavaScriptの部分がわかりません。 皆様宜しくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する