javascriptのsubmitを使ってデータをpost送信する方法
- aaa.phpというファイルに複数のチェックボックスがあり、リンクをクリックしたときにチェックされた値のみをbbb.phpへ引き渡したいです。
- チェックボックスの数は固定ではなく変動があり、値も実際はランダムです。
- デザインの都合上どうしてもaタグでしか記述が出来ません。
- ベストアンサー
javascriptのsubmitを使ってデータをpost送信したい。
javascriptのsubmitを使ってデータをpost送信したい。 aaa.phpというファイルに複数のチェックボックスがあり、リンクをクリックしたときに チェックされた値のみをbbb.phpへ引き渡したいです。 自分なりに書いてみましたが、bbb.phpへは遷移するものの、データが表示されません。 document.form1.method部分をGETにすると、データは表示されますが、POSTにすると うまく引渡しができません。 的外れな書き方をしているかもしれませんが、どなたかご教授いただけませんでしょうか? よろしくお願いいたします。 【追記】 チェックボックスの数は固定ではなく変動があり、値も実際はランダムです。 デザインの都合上どうしてもaタグでしか記述が出来ません。 ------------------------------------------------------------------------------ 【aaa.php】 <script language="JavaScript"> <!-- function mailform() { var i = 0; var chkvalue = ""; var count = 0; var chk = document.getElementsByName('no'); for(i=0; i<chk.length; i++) { if (chk[i].checked == true) { chkvalue += chk[i].value; count++; } } if(count == 0) { alert("チェックされていません。"); return false; } else { document.form1.action = "./bbb.php"; document.form1.method="post"; document.form1.submit(); } } //--> </script> <a href="#" onClick="send()">bbb.phpへ遷移する</a> <form name="form1"> <input type="checkbox" name="no" value="1"><br /> <input type="checkbox" name="no" value="2"><br /> <input type="checkbox" name="no" value="3"><br /> <input type="checkbox" name="no" value="4"><br /> </form> 【bbb.php】 var_dump($_POST["no"]);
- laundry77
- お礼率72% (29/40)
- JavaScript
- 回答数3
- ありがとう数6
- みんなの回答 (3)
- 専門家の回答
質問者が選んだベストアンサー
onClick="send()"と定義されていますが、関数はmailformしか定義されていません。 (きっとどちらかが正しいのでしょう) 1.checkboxのnameを全て配列化する。 name="no" → name="no[]" 2.checkboxのエレメント取得処理を変更する。 var chk = document.getElementsByName('no[]'); または、 var chk = document.form1.elements; 3.onClick="send()"をonClick="mailform()"とする。 (これは、どちらが正しいかによりますね。)
その他の回答 (2)
- think49
- ベストアンサー率59% (285/482)
これでどうでしょうか? 全てのcheckboxにチェックが入っていたら、submit() する - jsdo.it http://jsdo.it/think49/kZcL > デザインの都合上どうしてもaタグでしか記述が出来ません。 デザインはCSSで管理してください。 input要素をa要素のデザインに出来ます。
お礼
ご回答ありがとうございます。 御礼が遅くなり申し訳ございませんでした。 教えていただいたURLをみてみました。 私がやりたいことは、チェックが入ったチェックボックスの値だけをPOSTしたかったので 少し違いましたが、リンク先のソースを参考にさせていただき、無事解決できました。 aタグでの記述もできました。 ご回答、本当にありがとうございました。
- yyr446
- ベストアンサー率65% (870/1330)
下記のような事がしたいのですか? <script type="text/javascript"> function send() { var i = 0; var chkvalue = ""; var count = 0; var chk = document.querySelectorAll('form[name="form1"] input[type="checkbox"]'); for(i=0; i<chk.length; i++) { if (chk[i].checked == true) { chkvalue += chk[i].value; count++; } } if(count == 0) { alert("チェックされていません。"); return false; } else { document.form1.action = "./bbb.php"; document.form1.method="post"; document.form1.submit(); } } </script> </head> <body> <a href="#" onClick="send()">bbb.phpへ遷移する</a> <form name="form1"> <input type="checkbox" name="no[1]" value="1"><br /> <input type="checkbox" name="no[2]" value="2"><br /> <input type="checkbox" name="no[3]" value="3"><br /> <input type="checkbox" name="no[4]" value="4"><br /> </form> </body>
お礼
早速ご回答頂き、ありがとうございます。 「document.querySelectorAll」がどのようなものなのか調べましたがわからず とりあえずそのままコピーして使わせていただきましたが 「オブジェクトでサポートされていないプロパティまたはメソッドです」とエラーがでてbbb.phpへ遷移しなくなってしまいました。
関連するQ&A
- javascriptでチェックボックスの選択状況をチェックする方法につ
javascriptでチェックボックスの選択状況をチェックする方法について質問です。 チェックボックスを <input type="checkbox" name="chk[]" value="1"> <input type="checkbox" name="chk[]" value="2"> のようにした場合、チェックボックスが1か所以上選択されているかどうかは、 var count = 0; for (var i=0;i<document.myform.elements['chk[]'].length;i++){ if(document.myform.elements['chk[]'][i].checked){ count++; } } if(count==0){ window.alert("チェックしてください!"); } のようにすればチェック可能ですが、inputタグで <input type="checkbox" name="chk1[]" value="1"> <input type="checkbox" name="chk1[]" value="2"> <input type="checkbox" name="chk2[]" value="A"> <input type="checkbox" name="chk2[]" value="B"> のように「name」の配列名が変化する場合はどのようにすればチェック可能でしょうか?
- 締切済み
- JavaScript
- 2つのボタンによるSubmitについて
javascript初心者です。 <form name="sample01" action="aaa.html" method="POST" > <input type="checkbox" name="chk[]" value="1"> <input type="checkbox" name="chk[]" value="2"> <input type="checkbox" name="chk[]" value="3"> </form> このチェックボックスの値を、submitで渡したいのですが、 AボタンとBボタンの2つ設けて、それぞれクリックすると別ファイルに遷移させたいのです。 Aボタンは、「sample01」のaction属性にあるaaa.html Bボタンは、bbb.html こういったことはできるのでしょうか?
- ベストアンサー
- JavaScript
- JavaScriptにて動的に配列を作成して、POSTで渡したい
独学でJavaScriptの勉強をしているものです。 勉強用に作っているサイトにて、どうしてもやり方がわからないことがあるので、教えて下さい。 以下のようなフォームがあったとします。 <form name="testForm1"> <input type="hidden" name="id" value="1" /> <input type="checkbox" name="check" /> </form> このフォームは動的に複数作成され、idのvalueはフォームごとに別の値が入ります。 それで行いたいことは、複数あるtestForm1から、チェックボックスにチェックが付いているidだけを取得して、別のページにPOSTで渡したいんです。 以下のようなスクリプトを書いたのですが、思うように動作してくれませんでした。 <form action="hoge" name="testForm2" method="post"> <input type="hidden" name="id" /> </form> function func() { var idArray = new Array(); for ( count = 0; count < document.testForm1.length; count++ ) { if ( document.testForm1.check.checked == true ) { idArray.push( document.testForm.id.value ); } } document.testForm2.id.value=idArray; document.testForm2.submit(); } JavaScriptに関しては独学で必要に応じて勉強している感じで、あまり基礎がわかっておらず、もしかしたらかなり的外れな質問になってしまっているかもしれませんが、どうか宜しくお願い致します。
- ベストアンサー
- JavaScript
- javascriptについて
<script type="text/javascript"> <!-- function df(){ var scr=100; if(document.ad.y.checked){ var sty=document.ad.a; for(var i=0;i<3;i++){ if(sty[i].checked){ scr+=20+10*i; break; } } } document.ad.ad1.value=scr; } --> </script> </head> <body> <form action="#" method="POST" name="ad"> <h4>毎日歯を磨きますか?</h4> <p><input type="checkbox" name="y" value="">はい<br> <input type="checkbox" name="n" value="">いいえ</p> <h4>何回</h4> <p>1回<input type="radio" name="a" value=""><br> 2回<input type="radio" name="a" value=""><br> 3回<input type="radio" name="a" value=""></p> <p>何<input type="text" size="20" name="ad1">点</p> <p><input type="button" value="配点" onClick="df()"> <input type="reset" value="リセット"></p> </form> </body> </html> プログラムとしては成功しているんですが 解らないところが for(var i=0;i<3;i++) のところです。ラジオボタンに添え字を使って計算をしているという プログラムなのでしょうが たとえばlengthではなくあえて数字を入れてるのは 配列ではないからでしょうか? もう一点 formをつかって button やimage などを使うと 間違いを指摘してもデーターが流れて言ってしまいます。 return falseなど工夫はしてますが データーをtextに入っている文面を消さずに修正させるいい方法はありませんか お願いします。
- ベストアンサー
- JavaScript
- JavaScriptでcheckboxの入力個数制限
以下のようなチェックボックスがあります。 3つ以上チェックできないようにしたいのですが、JavaScriptで可能でしょうか? <FORM method=POST action="aaa.cgi" name="FORM1"> <input type="checkbox" name="Q1" value="1">1<br> <input type="checkbox" name="Q2" value="1">2<br> <input type="checkbox" name="Q3" value="1">3<br> <input type="checkbox" name="Q4" value="1">4<br> <input type="checkbox" name="Q5" value="1">5<br> </form>
- ベストアンサー
- JavaScript
- javascript 要素取得
htmlでチェックボックスを作り、その値をjavascriptで取得したいと思い、 下記のようなプログラムを書きました。 セレクトボックスから複数選択できるようにしたいのですが、 表示されるのは複数選んだ際に一番初めに選択したものだけです。 例) 「あああ」と「いいい」を選ぶと「あああ」のみ表示される。 しかし、これを「あああ.いいい」としたいのです。 できれば、 「あああ いいい」 と改行できるといいです。 formの中にたくさんの項目があるため、 forのところがうまくいっていないのでしょうか? どなたかよろしくお願いします。 javascript側 function checkbox(){ var str=""; for(i=0;i<document.form1.elements.length;i++){ if(document.form1.elements[i].checked){ if(str != "") str = str + "."; str = str + document.form1.document[i].value; } } if(str == ""){ alert("入力してください"); return false; }else{ document.form1.submit(); } } HTML側 <form action="<%=遷移先ページ%>" method="post" name="form1"> <select 複数> <input 複数> <input type="checkbox" name="document" value="・あああ"/>あああ <input type="checkbox" name="document" value="・いいい"/>いいい <input type="checkbox" name="document" value="・ううう"/>ううう <input type="submit" value="Submit" onclick="return checkbox();">
- 締切済み
- JavaScript
- 【心理テスト作成】JavaScriptでページが表示されません
チェックボックスを作り、 チェックが○個で「A」のページ、 チェックが○個で「B」のページ、 といったような簡易的な心理テストを作成したいと思い、 下記の方法を教えていただいたのですが、 正常に表示がされません(泣) 「送信」のボタンを押しても何もアクションが起こらないです… 私のPCに問題があるのでしょうか?? 申し訳ありません、 初心者でよく分かりませんのでよろしくお願い致します。 ▼ココからです▼ <html> <head> <title>Sample</title> <script language="JavaScript"> <!-- function jump() { count = 0; for (var i=0;i<document.sampleform.elements["check"].length;i++){ if ((document.sampleform.elements[i].name == "check") && (document.sampleform.elements[i].checked)) { count ++; } } if (count == 0) { // 一つもチェックされていない場合 location.href("http://www.yahoo.co.jp"); } else if (count <= 3) { // チェックが3個以下の場合 location.href("http://www.google.co.jp"); } else { // チェックが4個以上の場合 location.href("http://www.msn.co.jp"); } } //--> </script> </head> <body> <form name="sampleform"> <input type="checkbox" name="check" value="A"> A<br> <input type="checkbox" name="check" value="B"> B<br> <input type="checkbox" name="check" value="C"> C<br> <input type="checkbox" name="check" value="D"> D<br> <input type="checkbox" name="check" value="E"> E<br> <input type="button" value="送信" onclick="jump();"> </form> </body> </html>
- ベストアンサー
- JavaScript
- チェックボックスの値を取り出したい
こんにちは JavaScript初心者です。 過去ログを見ながらここまでやったのですが、何も表示されません。 ?マークの所で引っかかっていると思うのですがどなたかご教授願います。 やりたい事は、チェックボックスのチェックの入った所の値を取り出して表示したいのですが... 3つチェックされていてOKをクリックした時に、ABC と出てくるのが理想です。 <html> <SCRIPT LANGUAGE="JavaScript"> <!-- function chkform() { for(i=1; i<=3; i++) { chkdata(i) = document.form0.chk(i).Value ? var aa = chkdata(i) document.write(aa) } } //--></SCRIPT> <FORM onSubmit="return chkform(this)" name = "form0"> <INPUT type="checkbox" name="chk" value="A" > <INPUT type="checkbox" name="chk" value="B" > <INPUT type="checkbox" name="chk" value="C" > <INPUT type="submit" value="OK" > </form> </html>
- ベストアンサー
- JavaScript
- 2つのsubmitボタンがあるときに
最初に書いたボタンが優先され 単にリターンキーを押したときに 最初のsubmitボタンが反応します。 後のsubmitボタンが反応するようにするにはどうしたらいいのでしょうか? つまり下記のPHPをブラウザに表示させているときにリターンキーを押したときには submit2 is pushed. と表示させるにはどうしたらいいのでしょうか? <form method="post" action="<?=$PHP_SELF?>"> <input type="text"/><br/> <input type="checkbox"/><br/> <input type="radio" name="radio"/><br/> <input type="submit" name="submit" value="submit1" tabindex=-1/><br/> <input type="submit" name="submit" value="submit2" tabindex=1/><br/> </form> <?php if(isset($_POST['submit'])) { echo$_POST['submit'].' is pushed.'; } ?>
- ベストアンサー
- PHP
- submitではなくbuttonで送信
事情があり、submitではなくbuttonでフォームのデータを送信したいのですが、以下のように書くとbuttonでは4567が送信されません。 <form action="test.cgi" method="post"> <INPUT type="hidden" name="aaa" value="1234"> <INPUT type="submit" name="bbb" value="4567"> </form> ↓ <form action="test.cgi" method="post"> <INPUT type="hidden" name="aaa" value="1234"> <INPUT type="button" name="bbb" value="4567" onclick="submit();" > </form> submitと同じように、bbbのデータ4567も送信するにはどのように書けばよいのでしょうか? 宜しくお願いします。
- ベストアンサー
- JavaScript
お礼
ご回答いただきありがとうございます。 お礼が遅れ申し訳ありません。 mailform()をsend()とよくみたらすぐに分かる部分を間違えており、恥ずかしい限りです。 mailform()が正しいのでonClick="mailform()"と修正し、 >1.checkboxのnameを全て配列化する。 >2.checkboxのエレメント取得処理を変更する。 の部分も直しました。 それと別に、チェックが1つだけの時にうまくいかなかったので その処理を追記したところ、うまく動くようになりました。 とても丁寧にアドバイスいただきありがとうございました。