• 締切済み

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

アンケート結果を入力するツールを作成したいと思っています。 ラジオボタン・チェックボックス・テキストエリアに必要項目を入力し、 「作成」ボタンをクリックする事で、テキストエリアに情報を取得（吐きだし）したいのですが、 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>

みんなの回答

  • marutone
  • ベストアンサー率40% (70/174)
回答No.2

No.1です。 私の環境では文字化けしません。 HTMLのヘッダ部分に、 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> が指定されていると文字化けしないはずです。 なお、charsetはご自分の環境に合わせてください。

  • marutone
  • ベストアンサー率40% (70/174)
回答No.1

以下のソースをご参照ください。 <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>

welle_well
質問者

お礼

ありがとうございます！ まさにこれです！ A・B等アルファベット以外の部分が全て文字化けして表示されるのですが、 何か対策はありますでしょうか？

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

関連するQ&A

  • フォームに入力したデータの受け渡しについて

    左右に分かれたフレームを使用したページ作成を検討しています。 左フレーム内のフォームへ入力したテキストやチェックボックスのデータを、 右フレームに設置した1つのテキストエリアへコピーボタンで受け渡しを行う方法を探しています。 テキストボックス1行だけの受け渡しはできるのですが、 複数のテキストエリアやチェックボックスを使用した場合の受け渡し方法をご教示いただきたけますでしょうか？ 左フレームとしては↓のような内容を想定しています。 <html> <form> テキスト：</br> <input type="text" name="aaa" /></br> ラジオ：</br> <input type="radio" name="bbb" value="radio1" checked="checked" /> ラジオ1 <input type="radio" name="bbb" value="radio2" /> ラジオ2</br> チェック：</br> <input type="checkbox" name="ccc" value="check1" /> チェック1 <input type="checkbox" name="ccc" value="check2" /> チェック2</br> 選択項目：</br> <select name="ddd"> <option>Ａ</option> <option>Ｂ</option> </select></br> テキストエリア</br> <textarea name="eee" rows="2" cols="15">テキストエリア1</textarea> </br> <input type="submit" value="送信" />　 <input type="reset" value="リセット" /> </form> </html> よろしくお願いいたします。

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

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

  • ボタンをクリックして文字を置換する

    <textarea name="areaA" rows="4" cols="40"></textarea><br> <input type="button" onclick="..."> <textarea name="areaB" rows="4" cols="40"></textarea><br> という風な２つのテキストエリアとボタンを使い、 テキストエリアに文字を書いてもらい、 ボタンを押すと任意の行を置換したいです。 たとえば ------------------ #あああああ いいいいい #ううううう えええええ ------------------ というものを、ボタンを押すと先頭に#がついた行だけ置換して ------------------ ＜部品１＞あああああ＜部品２＞ いいいいい ＜部品１＞ううううう＜部品２＞ えええええ ------------------ という風なscriptを組みたいのですが、正規表現等が苦手でまったくうまくいきません。 ご教授いただけないでしょうか？

  • Javascriptで複数のフォームを連結したい

    初めまして、 お世話になります。 Javascriptで複数のフォームを連結したいと考えています。 やっと２つのテキストエリアを連結させるところまで出来るようになりました。 やりたいことは、出力させるときに下記のようにしたいのですが、 どのようにすれば良いかご教授いただけば幸いです。 テキストエリア：text01とtext02を連結させて出力させる時に、 text01とtext02の間に”改行コード”を追加したいのです。 それとラジオボタンで選択をした値を取得するための、 スクリプの記述方法もご教授頂けないでしょうか？ また、可能であればテキストエリア：outputに出力するときうに、 下記のように出来ると希望通りの操作が出来助かります。 HTMLを勉強し始めたばかりの初心者ですが、 どうぞ何卒よろしくお願い申し上げます。 出力結果： ----------------------------------------------------------------------- 【入力欄１】改行コード text01 改行コード 【入力欄2】改行コード text02 改行コード 【ラジオボタン】 A01 改行コード ソース： ----------------------------------------------------------------------- <html> <head> <script language="JavaScript"> <!-- function textoutput() { var text01 = (document. form01. text01.value); var text02 = (document. form01. text02.value); document. form01. output.value = text01 + text02; } //--> </script> </head> <body> <form name="form01"> <!--入力欄1// --> 入力欄1<br> <textarea name="text01" cols="60" rows="10"></textarea><br> <!--入力欄2// --> 入力欄2<br> <textarea name="text02" cols="60" rows="10"></textarea><br> <!--ラジオボタン// --> <strong>・　OS確認</strong><br /> <input type="radio" name="A01" value="・OS　⇒　XP" id="radio1-1" > <label for="radio1-1">XP</label> <input type="radio" name="A01" value="・OS　⇒　Vista" id="radio1-2"> <label for="radio1-2">Vista</label> <input type="radio" name="A01" value="・OS　⇒　Win7" id="radio1-3"> <label for="radio1-3">Win7</label> <input type="radio" name="A01" value="・OS　⇒　Mac" id="radio1-4"> <label for="radio1-4">Mac</label> <input type="radio" name="A01" value="・OS　⇒　" id="radio1-5"> <label for="radio1-5">その他</label> <br /> <!--ログ出力// --> ログ出力<br> <input type="button" value="ログ出力" onClick="textoutput();"><br> <textarea name="output" cols="60" rows="10"></textarea><br> </form> </body> </html>

  • チェックボックス　とラジオボタンの値取得について

    チェックボックス　とラジオボタンの値取得について こんにちは チェックボックスの中にラジオボタンがある場合に チェックボックスの値に続けてラジオボタンの値を表示したいのですが、 うまくいかず悩んでいます。 【やりたいこと】 □そのた２をチェクして男性を選択した場合　「そのた２ 男性」と表示したい。 例 そのた１ そのた２ 男性 そのた４ そのた５ 女性 サンプルのチェックボックスのlabelタグをはずすと $(vals[i]).next($("input[name='radio']:checked").val()); で値を取得できたのですが、 labelタグを付けたまま値を取得することは可能でしょうか？ labelタグをつけたまま、 $(vals[i]).find($("input[name='radio']:checked").val()); でやってみたのですが、undefindがでてしまいました。 サンプルではチェックボックスの数は１個ですが、 □が３０個以上　のチェックボックスが５０個くらいあるので、 １回の記述で済ませたいのですが、 ラジオボタンが隣にあったら値を取得する　のようにできるのでしょうか？ 何かよい方法があれば教えて頂けないでしょうか。 よろしくお願い致します。 ■サンプルソース <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script type="text/javascript" language="JavaScript"></script> <script language="javascript"> <!-- function textb(){ var str=""; var vals = document.forms['f'].elements['q1']; for(i=0; i<vals.length; i++){ if(vals[i].checked){ str=str + vals[i].value + '\n'; } } document.f.log.value=str; } --> </script> <title></title> </head> <body> <form name="f"> <div>アンケート<br> <label for="1"><input type="checkbox" name="q1" class="chex" id="1" value="その1"> その1</label><br> <label for="2"><input type="checkbox" name="q1" class="chex" id="2" value="その2"> その2</label> <input type="radio" name="radio1" value="可">男性 <input type="radio" name="radio1" value="否">女性 <br> <label for="3"><input type="checkbox" name="q1" class="chex" id="3" value="その3"> その3</label><br> <label for="4"><input type="checkbox" name="q1" class="chex" id="4" value="その4"> その4</label><br> <label for="5"><input type="checkbox" name="q1" class="chex" id="5" value="その5"> その5</label> <input type="radio" name="radio2" value="可">男性 <input type="radio" name="radio2" value="否">女性 <br> </div> <input type="button" value="確認" onclick="textb()"> <input type="reset" value="クリア"> <br> <textarea name="log" rows="4" cols="50"></textarea></form> </body> </html>

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

    以前こちらで、アンケートツールを作成したいと書き込み、以下のような返答を頂きました。 理想としていた吐き出し方法で、まさにこれ！といった感じだったのですが、 職場の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を外部ファイル化したい。

    以下の内容のhtmlファイルを作成しました。 この中から、JavaScriptを外部ファイル化したいのですが、 どの部分をどう切り離せばいいのか、 html側・JS側にはどういう風に記載すればいいのかが分かりません。 どなたかご教示ください。 また、以下のテキストエリアの下に、「コピー」と「クリア」のボタンを付け、 クリックでテキストエリアの内容コピー・選択全クリアができるようにしたいのですが、 その点についても方法をご存知の方がいらっしゃいましたらご教示ください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <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> </form> <script type="text/javascript"> //@cc_on document./*@if (1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/ 　/*@if (@_jscript) 'focusout' @else@*/ 'blur' /*@end@*/, function (evt) { 　　 　　var d = ''; 　　d += getValue('hoge0').join('\n') + '\n'; 　　d += getValue('hoge1').join('\n') + '\n'; 　　d += getValue('hoge2').join('\n') + '\n'; 　　d += getValue('hoge3').join('\n') + '\n'; 　　document.getElementsByName('hoge4')[0].value = d.replace(/^\n/gm, ''); 　　 　　function getValue(name) { 　　　var o, c = 0, r = [], objs = document.getElementsByName(name); 　　　while (o = objs[c++]) { 　　　　switch(o.type){ 　　　　　case 'text': case 'select-one': case 'textarea': r.push(o.value); break; 　　　　　case 'checkbox': case 'radio': if(o.checked) r.push(o.value); break; 　　　　　default: 　　　　} 　　　} 　　　return r; 　　} 　}, false); </script>

  • フォームの制御について

    下記２つのJavaScriptについて正しい記述方法について、 どうすれば良いかを模索しています。 アドバイスを頂ければ幸いです。 どうぞ何卒よろしくお願い致します。 1.チェックボックスの値とテキストフォームの値を結合する方法 <!-- C02の中から選択されているものを取得// --> for ( var i = 0; i < checkbox02.length; i ++ ) { if ( checkbox02[i].checked === true ) { text += checkbox02[i] + text01. value; text += '\n';}} 2.テキストエリアの値がNullの時に値が出力されないようにする方法 <!-- textarea01の中から選択されているものを取得// --> text += '回答3：' +　textarea01 + '\n'; ソース： ----------------------------------------------------------------------------------------- <head> <title>アンケートフォーム</title> <script type="text/javascript"> 　<!-- 値の加工用// --> function textoutput() { <!-- フォームを変数に// --> var formObj = document.form01; <!-- checkbox01を取得// --> var checkbox01 = formObj.C01; <!-- checkbox02を取得// --> var checkbox02 = formObj.C02; <!-- text01.valueを取得// --> var text01 = formObj.text01.value; <!-- textarea01.valueを取得// --> var textarea01 = formObj.textarea01.value; <!-- textを結合用の変数として準備// --> <!-- チェックボックスの中から選択されているものを取得// --> var text = 'アンケート結果' + '\n'; <!-- C01の中から選択されているものを取得// --> for ( var i = 0; i < checkbox01.length; i ++ ) { if ( checkbox01[i].checked === true ) { text += checkbox01[i]. value; text += '\n';}} <!-- C02の中から選択されているものを取得// --> for ( var i = 0; i < checkbox02.length; i ++ ) { if ( checkbox02[i].checked === true ) { text += checkbox02[i] + text01. value; text += '\n';}} <!-- textarea01の中から選択されているものを取得// --> text += '回答3：' +　textarea01 + '\n'; <!-- output.valueにtextを反映(最後に改行コード)// formObj.output.value = text + '\n'; } </script> </head> <body> <strong>アンケートフォーム</strong><br /><br /> <form name="form01"> <!--チェックボックスC01// --> <strong>・回答結果</strong><br /> <table border="0" > <td colspan="2" valign="middle"width="560"> <input type="checkbox" name="C01" value="　→回答1" id="checkbox 1-1" > <label for="checkbox 1-1">回答1</label> <input type="checkbox" name="C01" value="　→回答2" id="checkbox 1-2" > <label for="checkbox 1-2">回答2</label> </td> <tr> <!--チェックボックスC02// --> <td width="86" valign="middle"> <input type="checkbox" name="C02" value="　→その他：" id="checkbox 1-1" > <label for="checkbox 1-1">その他：</label> </td> <td valign="middle"> <input type="text "name="text01" size="60" /><br> </td> </table> <strong>・回答3：</strong><br /> <textarea name="textarea01" cols="60" rows="1" " tabindex="1"　STYLE="ime-mode:active"></textarea><br> <!--結果出力// --> 結果出力<br> <input type="button" value="ログ出力" onClick="textoutput();"> <input type="reset" value="リセット" onclick="return confirm('リセットボタンがクリックされました。本当に入力内容を削除してもよろしいですか？');" /><br> <input type="button" name="Copy" value="クリップボードにコピー" onClick="CopyText('output');"><br> <textarea name="output" id="output" cols="60" rows="10"></textarea><br> </form> </body> </html>

  • チェックボックスの値取得後の加工について

    下記のJavaScriptをどうように修正をすれば良いか、 ご教授いただければと思い投稿させて頂きました。 どうぞよろしくお願い申し上げます。 出力ボタンをクリックすると現状では下記のようになります。 【現状】 ------------------------------------------------------ アンケート結果 　→回答1 　→回答2 希望としては取得した値を下記のように加工をして出力したいと思います。 【希望】 ------------------------------------------------------ アンケート結果 　→回答1、回答2 【ソース】 ------------------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN Frameset" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <script> function textoutput(formObj) { var checkbox01 = formObj.elements["C01"]; var text = 'アンケート結果' + '\n'; for ( var i = 0; i < checkbox01.length; i ++ ) { if ( checkbox01[i].checked === true ) { text += checkbox01[i].value; text += '\n'; } } formObj.elements["output"].value=text; } </script> </head> <body> <form name="form01"> <strong>・回答結果</strong><br> <table border="0"> <td colspan="2" valign="middle" width="560"> <input type="checkbox" name="C01" value="　→回答1" id="checkbox1-1"> <label for="checkbox1-1">回答1</label> <input type="checkbox" name="C01" value="　→回答2" id="checkbox1-2"> <label for="checkbox1-2">回答2</label> </td> <table> 結果出力<br> <input type="button" value="ログ出力" onClick="textoutput(this.form);"><br> <textarea name="output" id="output" cols="60" rows="10"></textarea><br> </form> </body> </html>

  • ホームページ作成・フォームの送信について

    ＨＰ作成で多分初歩的なことだと思うのですが… 入力されたフォームの内容を送信する際、メールアドレスを使おうと思っています。 <form action="mailto:メールアドレスを入力"method="post"><br> お名前<p> <input type="text"name="name"><br><br> メッセージ<p> <textarea rows=8 cols=40 wrap="hard" name="メッセージ"></textarea><br><br> サイト評価<p> <input type="radio"name"goodorbad"value="良い">良い <input type="radio"name"goodorbad"value="普通">普通 <input type="radio"name"goodorbad"value="良くない">良くない <input type="reset"value="リセットします"> <input type="submit"value="投函する"><br><br><br> </form> だと送信ボタンをクリックした時にメールの新規作成画面に飛んでしまいます。 これはどこかおかしいのでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する