- 締切済み
複数行を独立してテキストエリアに表示させたい
皆さんの回答にはいつもお世話になっている、javascript初心者です。 普段はネット上から必要なソースをコピー・改変して利用していますが、 今回はその内容を拡張する必要があったため、その方法が分からず質問させて頂きます。 まず、以下のソースを作成しました。 <html> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis" /> <script> function update(form) { form.hoge4.value = form.hoge0.value + '\ '; if(form.hoge1[0].checked) { form.hoge4.value += form.hoge1[0].value + '\ '; } else if (form.hoge1[1].checked) { form.hoge4.value += form.hoge1[1].value + '\ '; } else if (form.hoge1[2].checked) { form.hoge4.value += form.hoge1[2].value + '\ '; } else if (form.hoge1[3].checked) { form.hoge4.value += form.hoge1[3].value + '\ '; } if(form.hoge2[0].checked) { form.hoge4.value += form.hoge2[0].value + '\n'; } else { form.hoge4.value += form.hoge2[1].value + '\n'; } } </script> </head> <body> <form action=""> 名前：<input type="text" name="hoge0" value=""> 趣味 <input type="checkbox" name="hoge1" value="ゲーム">ゲーム <input type="checkbox" name="hoge1" value="PC">PC <input type="checkbox" name="hoge1" value="釣り">釣り <input type="checkbox" name="hoge1" value="車">車 配偶者 <input type="radio" name="hoge2" value="あり">あり <input type="radio" name="hoge2" value="なし">なし <br> <br> <textarea name="hoge4" value="" rows="5" cols="40"></textarea> <br> <button type="button" onclick="update(this.form);">内容反映</button> <input type="reset" value="リセット"> </form> </body> </html> この内容は、テキストボックスとチェックボックスとラジオボタンの組み合わせを ボタン押下で下部のテキストエリアに反映させるというものです。 現状では、 1,テキストボックスが1つ 2.チェックボックスは複数あるうち1つを選択した場合しか反映されない 3.名前～なしまでが回答項目だが、1行(1人分)しかない という内容ですが、これをテキストボックスとチェックボックスとラジオボタン の配置順は変えず、以下のように変更する事を希望しています。 1,テキストボックスが2つ 2.チェックボックスは複数あるうち単数/複数どちらを選択した場合でも全て反映される 3.名前～なしまでの回答項目を、複数行(30人分を想定しています)作成し、反映結果は 田中 ゲーム 車 あり 鈴木 ゲーム 釣り あり 伊藤 釣り 車 なし … … のようにそれぞれの項目は半角スペースを空けて、ラジオボタンの回答項目のところで 改行する、というものにする。 私は1つのまとまり（今回はテキストボックスとチェックボックスとラジオボタン）を テキストエリアに反映させる仕組みは分かったと思うのですが、この「まとまり」が 複数になったときに応用がきかず困っています。 不勉強の私ですが、皆さんのお力添えをどうぞ宜しくお願い致します。
- 1878237564
- お礼率35% (6/17)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
ご質問の意味がよくわかってませんが、回答がないみたいなので… 頭からinputタグを見ていって1セット（7個）ごとに改行を入れるというのでは？ 対象はtype="text"、"checkbox"、"radio"に限定して、入力が無いものは無視。 （改行は入るので、1行全部入力なしだと空行になります） 質問を理解していないので、ご参考にでもなればという程度です。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <script type="text/javascript"> <!-- function update(form){ var set_number = 7; // 1セットの設問数 var result = [], e, typ, val, tmp = [], i=0, cnt=0; var inp = form.getElementsByTagName("input"); while(e = inp[i++]){ typ = e.type, val = e.value; if(typ == "text"){ cnt++; if(val) tmp.push(val); } else if(typ=="checkbox" || typ=="radio"){ cnt++; if(e.checked) tmp.push(val); } if(cnt>=set_number){ result.push(tmp.join(" ")); tmp = [], cnt = 0; } } if(tmp.length) result.push(tmp.join(" ")); form.elements["hoge4"].value = result.join("\n"); } //--> </script> <body> <form> 名前：<input type="text" name="hoge0" value=""> 趣味 <input type="checkbox" name="hoge1" value="ゲーム">ゲーム <input type="checkbox" name="hoge1" value="PC">PC <input type="checkbox" name="hoge1" value="釣り">釣り <input type="checkbox" name="hoge1" value="車">車 配偶者 <input type="radio" name="hoge2" value="あり">あり <input type="radio" name="hoge2" value="なし">なし <br> 名前：<input type="text" name="hoge10" value=""> 趣味 <input type="checkbox" name="hoge11" value="ゲーム">ゲーム <input type="checkbox" name="hoge11" value="PC">PC <input type="checkbox" name="hoge11" value="釣り">釣り <input type="checkbox" name="hoge11" value="車">車 配偶者 <input type="radio" name="hoge12" value="あり">あり <input type="radio" name="hoge12" value="なし">なし <p> <textarea name="hoge4" value="" rows="5" cols="40"></textarea><br> <button type="button" onclick="update(this.form);">内容反映</button> <input type="reset" value="リセット"> </p> </form> </body> </html>
