dポイントプレゼントキャンペーン実施中！

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

解決済

  • 質問者：welle_well
  • 質問日時：
  • 回答数：2件

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

通報する

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

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： fujillin
  • 回答日時：

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


「左のテーブル」がどんなので、どのように「吐き出しエリア」があるのかわからないので、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">
<!--
function check(frm){
　var i, source = frm.elements;
　var dest = document.getElementById("out").elements;
　for (i=0; i<dest.length;) dest[i++].value = "";
　for (i=0; i<source.length; i++) copy(source[i]);

function copy(node){
　switch(node.nodeName){
　　case "INPUT":
　　　switch(node.type){
　　　　case "text":
　　　　　set(node);
　　　　　break;　　
　　　　case "radio":
　　　　　if(node.checked) set(node);
　　　}
　}
}

function set(node){
　var d = dest[node.name];
　if(d) d.value = node.value;
}

}
//-->
</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の内容が反映）
連絡先：（ここに連絡先の右側に入力した内容が反映）
その他：（ここにその他特記事項の右側に入力した内容が反映）

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

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

補足日時：2011/02/11 14:50
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： LancerVII
  • 回答日時：

こんにちは。



JavaScriptのみで実装でしょうか。
サーバ側で集計したりはしませんか。

補足願います。

この回答への補足

サーバーでは集計しません。

反映後、その文言を別のツールに張り付け処理をする、という作業が発生するため、
単なるアンケートではないですね。
説明不足ですみません。

補足日時：2011/02/11 14:52
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報