• 締切済み

複数行を独立してテキストエリアに表示させたい

皆さんの回答にはいつもお世話になっている、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つのまとまり（今回はテキストボックスとチェックボックスとラジオボタン）を テキストエリアに反映させる仕組みは分かったと思うのですが、この「まとまり」が 複数になったときに応用がきかず困っています。 不勉強の私ですが、皆さんのお力添えをどうぞ宜しくお願い致します。

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

ご質問の意味がよくわかってませんが、回答がないみたいなので… 頭から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>

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

関連するQ&A

  • 以下のソースの改善点を教えてください。

    以前こちらで、アンケートツールを作成したいと書き込み、以下のような返答を頂きました。 理想としていた吐き出し方法で、まさにこれ！といった感じだったのですが、 職場のPCで入力した所、エラーが出てしまい反応しませんでした。 （メールでの送信等ができないので、すべて手打ちで作成しました） エラー内容を確認し忘れてしまったのですが。。 以前他のソースで動作確認をした際も正常に作動せず、 その時は、ＩＥでは作動しにくいソースが使われていると指摘されました。 以下のソースでエラーが起きてしまう原因として、入力ミス以外に、 考えられる原因はありますでしょうか。 ブラウザはＩＥです。 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script> function update(form) { form.hoge4.value = form.hoge0.value + '\n'; if(form.hoge1[0].checked) { form.hoge4.value += form.hoge1[0].value + '\n'; } else if (form.hoge1[1].checked) { form.hoge4.value += form.hoge1[1].value + '\n'; } else if (form.hoge1[2].checked) { form.hoge4.value += form.hoge1[2].value + '\n'; } else if (form.hoge1[3].checked) { form.hoge4.value += form.hoge1[3].value + '\n'; } 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=""> <p>氏名：<input type="text" name="hoge0" value=""></p> <p> <input type="checkbox" name="hoge1" value="A型">A <input type="checkbox" name="hoge1" value="B型">B <input type="checkbox" name="hoge1" value="AB型">AB <input type="checkbox" name="hoge1" value="O型">O </p> <p> <input type="radio" name="hoge2" value="男">男 <input type="radio" name="hoge2" value="女">女 </p> <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>

  • チェックボックスとテキストボックスを連動させたい

    JavaScriptでチェックボックスにチェックが入るとテキストボックス自動で数字の1が入る仕組みを作っています。 以下のソースまではかけたのですが 列はそれほどないのですがと行数が多数存在します。 ファンクションが一つで済む方法はありませんでしょうか。 またデータを配列で送信したいのですが配列ですと動きません。 是非教えて頂けると幸いです。 <SCRIPT LANGUAGE="JavaScript"> function check1(radio) { //チェックボックスにチェックが入った場合 if(radio.checked) { form = radio.form; form.data1[1].value = radio.value; form.data1[2].value = radio.value; form.data1[3].value = radio.value; form.data1[4].value = radio.value; }else{ //チェックが外された場合 form = radio.form; form.data1[1].value = ""; form.data1[2].value = ""; form.data1[3].value = ""; form.data1[4].value = ""; } } function check2(radio) { //チェックボックスにチェックが入った場合 if(radio.checked) { form = radio.form; form.val5.value = radio.value; form.val6.value = radio.value; form.val7.value = radio.value; form.val8.value = radio.value; }else{ //チェックが外された場合 form = radio.form; form.val5.value = ""; form.val6.value = ""; form.val7.value = ""; form.val8.value = ""; } } </SCRIPT> <FORM METHOD="POST"> <INPUT TYPE="checkbox" NAME="r" VALUE="1" onclick="check1(this)">チェック1<BR> <INPUT NAME="data1[1]" SIZE="1"> <INPUT NAME="data1[2]" SIZE="1"> <INPUT NAME="data1[3]" SIZE="1"> <INPUT NAME="data1[4]" SIZE="1"><br> <INPUT TYPE="checkbox" NAME="r" VALUE="1" onclick="check2(this)">チェック2<BR> <INPUT NAME="val5" SIZE="1"> <INPUT NAME="val6" SIZE="1"> <INPUT NAME="val7" SIZE="1"> <INPUT NAME="val8" SIZE="1"> </FORM>

  • 複数のラジオボタンの中から１つを選択すると、その行の5つのチェックボッ

    複数のラジオボタンの中から１つを選択すると、その行の5つのチェックボックスが有効になる方法を教えていただけないでしょうか。 １つのラジオボタンでならなんとか出来たのですが、 複数になるとどうもうまくいきません。 検索してはみたのですが、これといったものがなく質問することにしました。 以下のソースは単発で動いた時のものです。 <html> <head> <script type="text/javascript"> function checkfunc() { for(i=0; i<5; i++) { document.myform.chk1[i].disabled = !(document.myform.yesno.checked); } } </script> </head> <body onLoad="checkfunc();"> <form name="myform"> <input type="radio" name="yesno" value="1" onClick="checkfunc();">ラジオボタン <input type="checkbox" name="chk1" value="0">チェックボックス0 <input type="checkbox" name="chk1" value="1">チェックボックス1 <input type="checkbox" name="chk1" value="2">チェックボックス2 <input type="checkbox" name="chk1" value="3">チェックボックス3 <input type="checkbox" name="chk1" value="4">チェックボックス4 </form> </body> </html> 希望のイメージとしてはこんな感じです↓ ○ラジオボタン □チェックボックス　□チェックボックス　□チェックボックス　□チェックボックス　□チェックボックス ◎ラジオボタン □チェックボックス　□チェックボックス　□チェックボックス　□チェックボックス　□チェックボックス ○ラジオボタン □チェックボックス　□チェックボックス　□チェックボックス　□チェックボックス　□チェックボックス 申し訳ないのですが、どなたか教えていただけないでしょうか。

  • チェックボックスの表示・非表示　動作

    はじめまして。 初めて掲示板を利用させていただきます。javascriptを勉強しまだ日が浅いのでご存知の方がいらっしゃれば教えてください。 今、チェックボックスを選択し選択した項目がアクティブになるようにしたいのですが、選択項目が重複すると以下のようになってしまいました。 A+AB＝AB　A+AB+E=ABE　個々までは問題なし。 既に全てのチェックが付いた上体で、ABCE－A＝BCE　となってしまい、 ABのチェックが入っていても、Aが消えてしまいます。 以下に現在のコードを張ります。 <script type='text/javascript'> <!-- function fchk2(obj, name) { var frm=obj.form; if(obj.checked==true) { /* チェックボックスが選択されている場合は、 　 テキストボックスを有効化（false）*/ for(var i=1; i<=3; i++){ frm.elements[name+i].disabled=false; } } else { for(var i=1; i<=3; i++){ /* 無効化する前に、入力値をクリア */ if(name=='t'){ /* テキストボックスの場合 */ frm.elements[name+i].value=''; }else{ /* チェックボックスの場合 */ frm.elements[name+i].checked=false; } /* 無効化（true） */ frm.elements[name+i].disabled=true; } } } //--> </script> <form name='form2' action='#'> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t")' checked>A<br> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t");fchk2(this,"b");' checked>AとB<br> <input type='checkbox' name='chk1' value='1' onclick='fchk2(this,"t");fchk2(this,"e");' checked>AとE<br> <input type='checkbox' name='chk2' value='1' onclick='fchk2(this,"c");fchk2(this,"e");' checked>CとE<br> <br> A<input type='text' name='t1' value='テキストA'><br> A<input type='text' name='t2' value='テキストB'><br> A<input type='text' name='t3' value='テキストC'><br> <br> B<input type='text' name='b1' value='テキストA'><br> B<input type='text' name='b2' value='テキストB'><br> B<input type='text' name='b3' value='テキストC'><br> <br> <input type='checkbox' name='c1' value='1'> 選択肢C<br> <input type='checkbox' name='c2' value='1'> 選択肢C<br> <input type='checkbox' name='c3' value='1'> 選択肢C<br> <br> <input type='checkbox' name='e1' value='1'> 選択肢E<br> <input type='checkbox' name='e2' value='1'> 選択肢E<br> <input type='checkbox' name='e3' value='1'> 選択肢E </form> よろしくお願いいたします。

  • 複数あるチェックボックスの入力チェックするには？

    チェックボックスの入力チェックスクリプトを探しており、下記のようなスクリプトをネット検索で見つけました。 <!-- <script type="text/javascript"> function chNull(msg,obj) { if(!obj) return true; if((obj.type || obj[0].type) == 'checkbox'){ var flag = 0; if(obj.length){ for(var i=0; i<obj.length; i++) { if(obj[i].checked) flag = 1; } } else { if(obj.checked) flag = 1; } if(flag == 0) { alert(msg + 'を選択してください。'); return false; } } return true; } --> </script> <form method="POST" action="■.cgi" onSubmit="return chNull('チェックボックス',a);"> <input type="checkbox" name="a" value="A1" />A1 <input type="checkbox" name="a" value="A2" />A2 </form> 同じnameのチェックボックス群がひとつしかないときはこれで問題ないのですが、 下記のようにnameが複数ある場合にはこのスクリプトのどの部分を変えればよいのでしょうか？ <input type="checkbox" name="a" value="A1" />A1 <input type="checkbox" name="a" value="A2" />A2 <input type="checkbox" name="b" value="B1" />B1 <input type="checkbox" name="b" value="B2" />B2 <input type="checkbox" name="c" value="C1" />C1 <input type="checkbox" name="c" value="C2" />C2 できればこのスクリプトをベースとして使用したいと思っています。どなたかお分かりの方がいらっしゃいましたらお教え下さいませ。 よろしくお願い致します。

  • チェックボックスを選択するとテキストボックスが表示

    質問失礼します。 チェックボックスが下記のようにある場合ですが、 どれかではなく複数選択で テキストボックスを表示させるにはどうしたらよいでしょうか？ <input type="checkbox" name="example" value="" />テレビ　←チェックしたらテキストボックス表示 <input type="checkbox" name="example" value="" />新聞　←チェックしたらテキストボックス表示 <input type="checkbox" name="example" value="" />CM　←チェックしたらテキストボックス表示 <input type="checkbox" name="example" value="" />その他　←チェックしたらテキストボックス表示 色々なJavaScriptを試したのですが、 どうも挙動がおかしく、クリックを続けると表示がされたりできなかったり、 という具合になります。 それぞれテキストボックスを表示させたいチェックボックスに 反映できるJavaScriptをご教示願いますでしょうか？ 宜しくお願い致します。

  • 指定された場所に、取得した値を表示したい。

    アンケート結果を入力するツールを作成したいと思っています。 ラジオボタン・チェックボックス・テキストエリアに必要項目を入力し、 「作成」ボタンをクリックする事で、テキストエリアに情報を取得（吐きだし）したいのですが、 HTML部分は完成しているのですが、JavaScript部分をどう組んでいいのか分かりません。 どなたかご教示ください。 また、色々検索し、たくさんのサイトを拝見したのですが、 イメージしているものが記載されたサイトになかなか辿りつけませんでした… 本も探してみたのですが、求めている情報が記載されておらず… 参考になるサイト・本をご存知の方いらっしゃいましたら、併せて教えてください。 HTML部分は、以下のようなイメージです。 上側に入力した内容を、下のテキストエリアに吐き出したいです。 <title></title> <form action=""> <p>氏名：<input type="text" name="hoge0" value=""></p> <p> <input type="checkbox" name="hoge1" value="A型">A <input type="checkbox" name="hoge1" value="B型">B <input type="checkbox" name="hoge1" value="AB型">AB <input type="checkbox" name="hoge1" value="O型">O </p> <p> <input type="radio" name="hoge2" value="男">男 <input type="radio" name="hoge2" value="女">女 </p> <textarea name="hoge4" value="" rows="5" cols="40"></textarea> <br> <button type="button">内容反映</button> <input type="reset" value="リセット"> <br> <br> <br> <textarea name="hoge4" value="" rows="5" cols="40"></textarea> </form>

  • チェックボックスの初期選択と選択保持

    複数のチェックボックスのうちどれかを初期選択させ、ボタン押下後は選択保持をさせたいです。 片方のみならできるのですが、どなたかご教授いただけるとうれしいです。 現在のソースはこんな感じになっていて選択したものの保持はできるのですが、初期選択ができていません。よろしくおねがいします。 <html> <body> <form name="form" method="post"> <?php test1() ?> test1 <?php test2() ?> test2 <?php test3() ?> test3<br><br> <input type="submit" name="button" value="button"> </form> <?php function test1(){ if ($_POST['test1']){ echo "<input type=\"checkbox\" name=\"test1\" checked>"; }else{ echo "<input type=\"checkbox\" name=\"test1\">"; } } function test2(){ if ($_POST['test2']){ echo "<input type=\"checkbox\" name=\"test2\" checked>"; }else{ echo "<input type=\"checkbox\" name=\"test2\">"; } } function test3(){ if ($_POST['test3']){ echo "<input type=\"checkbox\" name=\"test3\" checked>"; }else{ echo "<input type=\"checkbox\" name=\"test3\">"; } } ?> </body> </html>

    • 締切済み
    • PHP
  • ラジオボタンの選択で解答・点数を表示する

    10問のテストを作成しています。 (1)選択肢はラジオボタンで3択（正解は10点、その他0点） (2)採点をクリックすると、テキストボックスに○×の結果を出し、もう一つ別のテキストボックスに×の場合は正しし解答を表示 (3)アラートで「あなたの点数は～～点」と出す (4)FORM1.2のSCOREに点数を表示 以上のようにしたいと思い、下記のように作りました。 まだ初心者のため、長々と同じことを書くことしか分からないので、もっと簡単にまとめられる方法がありましたら、教えてください。 よろしくお願いいたします。 function dispscore() { var score=0; if (document.form1.q0[0].checked) { score += 10; document.form1.r0.value = "○"; } else{ document.form1.r0.value = "×"; document.form1.a0.value = "ナイル川"; } if (document.form1.q1[2].checked) { score += 10; document.form1.r1.value = "○"; } else{ document.form1.r1.value = "×"; document.form1.a1.value = "バチカン市国"; } alert("点数は "　+ score + "　点 です "); document.form1.score.value=score document.form2.score.value=score } ------------------------------------------------------------ <INPUT type=radio name="q1" value="10">ナイル川 <INPUT type=radio name="q1" value="0">ミシシッピー川 <INPUT type=radio name="q1 value="0">アマゾン川> <INPUT size="3" name="r1" type="text"> <INPUT size="25" name="a1" type="text"> <INPUT type=radio name="q2" value="0">バルカン市国 <INPUT type=radio name="q2" value="0">バルタン市国 <INPUT type=radio name="q2" value="10">バチカン市国 <INPUT size="3" name="r2" type="text"> <INPUT size="25" name="a2" type="text">

  • 送信後のチェックボックスの表示

    最初の画面でAにチェックされているとします。 そのあとに、AとBをチェックしたあとにSubmitで送信します。 送信したあとに、AとBにチェックした最初の画面を表示させたいときは、 どんな風にすればよいのでしょうか。 今は・・・ If Request.Form="" <input type="checkbox" name="test" value="A" checked>A <input type="checkbox" name="test" value="B">B <input type="checkbox" name="test" value="C">C Else Select Request.Form("test") Case "A" <input type="checkbox" name="test" value="A" checked>A <input type="checkbox" name="test" value="B">B <input type="checkbox" name="test" value="C">C Case "B" <input type="checkbox" name="test" value="A">A <input type="checkbox" name="test" value="B" checked>B <input type="checkbox" name="test" value="C">C Case "C" <input type="checkbox" name="test" value="A">A <input type="checkbox" name="test" value="B">B <input type="checkbox" name="test" value="C" checked>C 　　・・・ End Select End If というように、全ての場合のときに"checke"をつけて表示させています。 もっと、効率のよい書き方はないものでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する