- ベストアンサー
チェックボックスの制限の仕方について
JavaScriptを使ってチェックボックスのチェック制限をしたいのですが、「二つまでチェック」というところに二つ以上チェックした時点で（「送信」等を押す前に）警告が返ってくるようにしたいのですが、分かりません。こういった制限をかけたい質問が同一ページに複数並べようと思います。お願いします。
- kajita
- お礼率75% (130/172)
- JavaScript
- 回答数7
- ありがとう数5
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
>Internal Server Error CGIが正しく実行できなかったということですよね。 以前は、動いていたのだから、 やはり、追加した所が実行できなかったということですね。 ＃６のコードが、特別バグがあるようには思えないのですが、 こう言う時は、 少しずつ、変更しては、 動作のアヤしい変数なんかをprintしてみるしかないですね。 がんばって下さい／~~
その他の回答 (6)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
>以下の３箇所の「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はどうなりますか？ 力にはなれないかも…
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
＃４>多分、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> </td>\n"; の様に書き出しすればいいでしょう。
お礼
初心者の質問でスイマセン。あれこれ試したのですが上手くいかず、また駆け込んだ次第です。教えて頂いた 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> </td>\n"; のようにすればよろしいですか？
補足
今朝の質問はナシにして下さい。私が勘違いしていたみたいで。スミマセン。それで症状の状況が変わりました。少し前進しました。でも教えていただいた配列で記述しましたら、確認画面でのcheck1とcheck2の項目がチェックしたにも関わらず、CGIの確認画面には「value」が何も表示されません。 ちなみに以下の３箇所の「check1」にはチェックボックスのname属性を入れるんですよね。 @check1=param("check1"); $result1=join(',',@check1);
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
#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="送信"> にそれぞれ直して下さい。
お礼
毎回、助けて頂いてとても感謝しております。本当にたびたびで申し訳ありませんが、最終段階まできて困っています。教えていただいた通りの記述でなにもかも上手くいきました。あと一息というところで止まってます。CGIのことになりますがお聞きしてもいいでしょうか？詳しく申し上げますと、アンケートに回答後「確認」ボタンを押すとCGIで作った「確認画面」というものに進みます。ここではHTMLで記述された「name」を拾ってきて表示させていますが、 【その1】以下の場合チェックが複数あった時は最後に答えた「value」しか表示されないようです。 print "<td width=300><font size=2>$FORM{'check1'}</font> </td>\n"; 【その2】さらに、以下のように「name」を一つずつ変えて置いてみましたが、“、”で区切った場合回答されなかった「value」の所が空白になって「、、Ｃ」となってしまいます。 print "<td width=300><font size=2>$FORM{'check1'}、{'check2'}、{'check3'}</font> </td>\n"; 理想は３つチェックされれば「Ａ、Ｂ、Ｃ」２つなら「Ｂ、Ｃ」のようにチェックがあった「value」のみを拾ってきて、しかも間を“、”で区切りたいのですが。よろしくお願いいたします。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
あくまで＃１のやり方にこだわるやり方。 <!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)
＃１＞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)
<!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>
お礼
教えていただいた通りの記述でうまくいきました。ありがとうございます。それで、次の段階のことをおたずねしてもいいでしょうか？投稿者に「以下の内容で間違いなければ"送信"を押してください。」というような確認画面を出して、そこで"送信"が押されると担当者へその内容がメールで送信されるという風にしたいのですが、<form method=post action="***.cgi">～</form>はどこに置けばいいか分かりません。このタグで質問項目全てをくくって、この中に教えていただいた<form name="form1">～</form>を各質問ごとに設置するのでしょうか？<form>タグは入れ子に出来ますか？
お礼
いろいろとありがとうございました。結局、教えて頂いたのに私が初心者のあまり上手く動かせない状態です。 前回教えていただいた @check1=param("check1"); $result1=join(',',@check1); の所に $query= new CGI; @check1 = $query->param('check1'); を入れて print "<td width=300><font size=2>$result1</font> </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> </td>\n"; と書き出す。