- 締切済み
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();">
- bsjack
- お礼率60% (6/10)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
フォームを送信してサーバーで処理したいのであれば、hiddenフィールドに入れたらどうでしょうか。 JavaScriptよりも、 HTMLの<form>の作り方、動作と、 どういう書き方、ユーザーの動作、選択などをした時にサーバーでどんなデータが受け取れるかというのを、きっちり復習することをお勧めします。 それを逆に考えて サーバーでどんなフォームデータを受け取りたいか ↓ どんなフォームを作れば良いか ↓ そのフォームを作るJavaScriptコードを記述 という流れになります。 nameが同じ物が複数あるときは、それようのJavaScriptの書き方があります。 （サーバーの処理にもそれようの書き方があるはずです。）
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
どこに（どうやって）表示したいのでしょうか？ alert(str); としてみてください。
- babu_baboo
- ベストアンサー率51% (268/525)
#1です。もしくは。 で、どうでしょう？ name="document" は、みすをさそう？ type=='checkbox' をしていないけど。 <!DOCTYPE html> <meta charset="UTF-8"> <title></title> <body> <form action="#" method="post" name="form1" onsubmit="checkbox.call (this, event);"> <input type="checkbox" name="document" value="・あああ"/>あああ <input type="checkbox" name="document" value="・いいい"/>いいい <input type="checkbox" name="document" value="・ううう"/>ううう <input type="submit" value="Submit"> <script> function checkbox (event) { var form = this; var d = form.elements['document']; var ary = []; for (var i = 0, e; e = d[i++]; ) if (e.checked) ary.push (e.value); if (ary.length) alert (ary.join ('\n')); else { alert("入力してください"); return event./*@cc_on @if (1) returnValue = false @else@*/ preventDefault() /*@end@*/; } } </script>
お礼
こちらも動きませんでした・・・。 ご回答ありがとうございました。
- babu_baboo
- ベストアンサー率51% (268/525)
ぜんかくくうはくは、かんかくにしてください。 querySelectorAll と Array.map がつかえればですけど。 <!DOCTYPE html> <meta charset="UTF-8"> <title></title> <body> <form action="#" method="post" name="form1" onsubmit="checkbox.call (this, event);"> <input type="checkbox" name="document" value="・あああ"/>あああ <input type="checkbox" name="document" value="・いいい"/>いいい <input type="checkbox" name="document" value="・ううう"/>ううう <input type="submit" value="Submit"> <script> // querySelectorAll と Array.map が使えれば。 function checkbox (event) { var form = this; var d = form.querySelectorAll ('input[type="checkbox"][name="document"]:checked'); var ary = []; if (d.length) { ary = Array.prototype.map.call (d, function (e) { return e.value; }); alert (ary.join ('\n')); } else { alert("入力してください"); return event./*@cc_on @if (1) returnValue = false @else@*/ preventDefault() /*@end@*/; } } </script>
お礼
早速のご回答ありがとうございました。 >ぜんかくくうはくは、かんかくにしてください。 全角にしていると書き忘れていました。申し訳ありません。 考えていただいたソースコードを試してみましたが、動きませんでしたので、 querySelectorAll と Array.mapが使えないようです。
お礼
補足は編集できないため、こちらに書きます。 javascript内最後のelseで document.form1.document.value = str; return true; としてみましたが、遷移先のページでは表示は変化しませんでした。 javascriptで値を格納しないといけないと思うのですが、 どのようにするか教えていただけますか？
補足
ご回答ありがとうございます。 >alert(str); を書いて「・あああ」と「・いいい」を選択したところ、 「・あああ.・いいい」 が表示されました。 表示先に問題があるようです。 表示先では String strDocument = request.getParameter("document"); で受け取り、 <%=strDocument%> で表示しています。(ここでは「・あああ」のみ表示されます。) 「javascriptでチェックボックスの選択状況をチェックする方法について」 http://oshiete.goo.ne.jp/qa/6105725.html にあるように配列を使うといいのでしょうか？