こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

初めまして、
お世話になります。

Javascriptで複数のフォームを連結したいと考えています。
やっと2つのテキストエリアを連結させるところまで出来るようになりました。
やりたいことは、出力させるときに下記のようにしたいのですが、
どのようにすれば良いかご教授いただけば幸いです。

テキストエリア:text01とtext02を連結させて出力させる時に、
text01とtext02の間に”改行コード”を追加したいのです。
それとラジオボタンで選択をした値を取得するための、
スクリプの記述方法もご教授頂けないでしょうか?
また、可能であればテキストエリア:outputに出力するときうに、
下記のように出来ると希望通りの操作が出来助かります。

HTMLを勉強し始めたばかりの初心者ですが、
どうぞ何卒よろしくお願い申し上げます。

出力結果:
-----------------------------------------------------------------------
【入力欄1】改行コード
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>

投稿日時 - 2012-03-30 00:25:48

QNo.7391687

困ってます

質問者が選んだベストアンサー

こんにちは。

以下のような感じでしょうか。

==== js
function textoutput() {
// フォームを変数に
var formObj = document.form01;
// text01.valueを取得
var text01 = formObj.text01.value;
// text02.valueを取得
var text02 = formObj.text02.value;
// radioを取得
var radio = formObj.A01;
// textを結合用の変数として準備
var text = '【入力欄1】' + '\n';
text += text01 + '\n';
text += '【入力欄2】' + '\n';
text += text02 + '\n';
// A01の中から選択されているものを取得
for ( var i = 0; i < radio.length; i ++ ) {
if ( radio[i].checked === true ) {
text += radio[i].value;
}
}
// output.valueにtextを反映(最後に改行コード)
formObj.output.value = text + '\n';
}


==== 動作サンプル
http://hppg.moe.hm/okwave/qa/q7391687/

投稿日時 - 2012-03-30 08:26:47

お礼

ご教授ありがとうございました。
動作サンプルまでご用意頂きたいへん助かりました。
説明がとても分かりやすく仕組みを理解することができました。
まだ、htmlもjavascriptも初心者ですが、
これからいろいろと勉強していきたいと思います。

投稿日時 - 2012-03-30 13:34:55

このQ&Aは役に立ちましたか?

3人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問