htmlとJavaScriptで、アンケートのようなものを作成しています。ラジオボタン・チェックボックス・テキストエリア等で回答を選んで（書き込んで）もらい、それぞれの結果を、吐きだしエリアへ表示させたいです。 ※イメージとして…左のテーブルに質問内容があり、選択後「決定」ボタンを押すと、右側テーブル内にあるスペースにチェックされた項目が吐きだされる。といった感じです。左側の質問項目の作成は終わっており（女）のように作成しました）、後はJS！と思ったのですが… 仕事で何年も前に触ったきりの為、まったく分からなくなってしまいました。。「submitかな？」と思い、HP等も色々と検索してみたのですが、求めているものが見つからず…。何か参考になるようなHPや、そのままコピーして使えるようなサンプルは御座いませんでしょうか。宜しくお願い致します。

チェックされた項目を、指定された場所に表示したい

解決済

質問者：welle_well
質問日時：2011/02/10 02:54
回答数：2件

htmlとJavaScriptで、アンケートのようなものを作成しています。
ラジオボタン・チェックボックス・テキストエリア等で回答を選んで（書き込んで）もらい、
それぞれの結果を、吐きだしエリアへ表示させたいです。
※イメージとして…左のテーブルに質問内容があり、選択後「決定」ボタンを押すと、右側テーブル内にあるスペースにチェックされた項目が吐きだされる。といった感じです。
左側の質問項目の作成は終わっており（<input type="radio" name="seibetu" value="女">女）のように作成しました）、後はJS！と思ったのですが…
仕事で何年も前に触ったきりの為、まったく分からなくなってしまいました。。
「submitかな？」と思い、HP等も色々と検索してみたのですが、求めているものが見つからず…。
何か参考になるようなHPや、そのままコピーして使えるようなサンプルは御座いませんでしょうか。
宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2011/02/10 19:08

内容がよくわからないので、要領のみのごく簡単なサンプルを…

「左のテーブル」がどんなので、どのように「吐き出しエリア」があるのかわからないので、formからreadonlyの別のformへコピーするような形で作成しています。

質問では「ボタンを押したら」になっていましたが、onchangeで同時に反映するようにしています。実は、IEではonchangeイベントがバブルしないようなのでこのままだとIEでは使えません。
（まぁ、とりあえずのサンプルなので…ボタンクリックにすればこのようなことはありませんね）

* 例ではinputのtype=radioとtextしか使っていないので、その分だけです。
* swithでの分岐に付け加えれば、他の要素でも対応可能でしょう。
（全角空白は半角に）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
#out input { border: 0; }
</style>

<script type="text/javascript">

</script>
</head>
<body>

<form name="form1" action="" method="" onchange="check(this)">
氏名：<input type="text" name="simei" value="">
<br>
性別：<input type="radio" name="seibetu" value="女">女
<input type="radio" name="seibetu" value="男">男
<br>
年齢：<input type="radio" name="age" value="10">10代
<input type="radio" name="age" value="20">20代
<input type="radio" name="age" value="30">30代
<input type="radio" name="age" value="40">40代
<input type="radio" name="age" value="50～">50代～
</form>

<hr style="margin:30px;">

<form id="out">
氏名：<input type="text" name="simei" value="" readonly>
<br>
性別：<input type="text" name="seibetu" value="" readonly>
<br>
年齢：<input type="text" name="age" value="" readonly>
</form>

</body>
</html>

この回答への補足

回答ありがとうございます！
確かに、内容について説明不足ですね・・・
左側のイメージは、こんな感じです↓
（セルの大きさがグチャグチャですが。。汗）
アンケートというより、テンプレート作成といった感じですね。
お客様の情報を入力し、テンプレートを作成。
それをまた別のツールにコピーし登録作業を行う。といったイメージです。

<Table Border="4" Width="600">
<Tr>
<Td ColSpan="4" Align="Center">
<B>希望日</B>
</Td>
</Tr>
<Tr>
<Td Valign="top" Width="25%" Height="10">
<input type="radio" name="kibou" value="１日">１日
<Br>
</Td><Td Valign="top" Width="25%" Height="10">
<input type="radio" name="kibou" value="２日">２日
<Br>
</Td>
<Td Valign="top" Width="25%" Height="10">
<input type="radio" name="irai" value="kibou">３日
<Br>
</Td>
<Td Valign="top" Width="20%">
<input type="radio" name="irai" value="kibou">その他
</Td>
</Tr>
<Br>

<Table Border>
<Tr>
<Td>連絡先</Td><Td><TEXTAREA cols="30" rows="1"></TEXTAREA></Td></Table>
<Table Border>
<Tr>
<Td>その他特記事項</Td><Td><TEXTAREA cols="30" rows="5"></TEXTAREA></Td></Table>

※この下に、「右側へ反映」のようなボタンを作り、それを押すと、内容が吐きだされるようにしたいです。
そのボタンの作り方もまだ調べきれていませんが、、

右側のイメージは、空白の吐きだしエリアです。
「右側へ反映」を押すと、以下のような内容で作成されるようにしたいです。

希望日：（ここにkibouの内容が反映）
連絡先：（ここに連絡先の右側に入力した内容が反映）
その他：（ここにその他特記事項の右側に入力した内容が反映）

といったイメージです。
よく考えてみると、左側も不備だらけですね…。

ご教示頂けると幸いです。