フォームに入力した文字を挿入して出力する方法

質問

フォームに入力した文字を挿入して出力する方法

JavaScript初心者です。
複数のフォームに入力した文字をタグなどに挿入して、
テキストエリアに出力するにはどうしたらいいのでしょうか？

↓出力例
<table>
<tr><td><a href="あああ">いいい</a></td></tr>
<tr><td><a href="あああ">ううう</a></td></tr>
（改行）
<tr><td><a href="えええ">いいい+ううう</a></td></tr>
</table>

よろしくお願いいたします。

回答No.3

my-- · ベストアンサー

<script type="text/javascript">
function hoge(form) {
var str = '';
var value1 = form.form1.value;
var value2 = form.form2.value;
var value3 = form.form3.value;
var value4 = form.form4.value;
str = '<table>\n<tr><td><a href="' + value1 + '">';
str += value2 + '</a></td></tr>\n';
str += '<tr><td><a href="' + value1 + '">';
str += value3 + '</a></td></tr>\n\n';
str += '<tr><td><a href="' + value4 + '">' + value2 + value3;
str += '</a></td></tr>\n</table>';
form.kekka.value = str;
}
</script>

onclick="hoge(this.form);"

No.2補足の「例」にある通り出力してみましたが。

お礼

無事にやりたいことができました。
ありがとうございました。

回答No.2

yambejp

→form1のvalueになる「あああ」はアンカーのhrefになる？
→form2のvalueになる「いいい」はアンカーのテキストになる？
→form3のvalueになる「ううう」はアンカーのテキストになる？
→「えええ」はどこからでてきたの？
→「いいい」と「ううう」を「+」で結合してるの？
→テーブルの間に改行を入れるというのはどういうこと

回答不能・・・補足が必要

お礼

無事にやりたいことができました。
ありがとうございました。

補足

<input type="text" name="form4" value="えええ">
が抜けていました。
あああ～えええを、出力例の同じ文字の場所に入るようにです。

あああ　を１列目と２列目のアンカーのhrefに
いいい　を１列目のアンカーテキストに
ううう　を２列目のアンカーテキストに
えええ　を３列目のアンカーのhrefに
いいい+ううう　は３列目のアンカーテキストに+を抜いて繋げて表示。
改行は、そこを１行あけてテキストエリアに表示です。
挿入する場所は、アンカーだけと決まってるわけではなく、
<ts class="">など他のタグにも挿入したいです。
↓例
<table>
<tr><td><a href="あああ">いいい</a></td></tr>
<tr><td class="ううう"><a href="あああ">ううう</a></td></tr>
（改行）
<tr><td><a href="えええ">いいい+ううう</a></td></tr>
</table>
うまく説明できずすいません。

回答No.1

yambejp

>複数のフォームに入力した文字をタグなどに挿入して、
>テキストエリアに出力するにはどうしたらいいのでしょうか？

命題と例示がかけ離れすぎていて何をしたいかわかりません。
例のどこにもフォームに関する記述がないです
何をどうしたいかもう一度考えを深めてから再度ご質問なさったほうが
いいでしょう。

補足

説明不足で申し訳ありません。

<form action="">
<input type="text" name="form1" value="あああ">
<input type="text" name="form2" value="いいい">
<input type="text" name="form3" value="ううう">
<input type="button" value="出力" onClick="">

ボタンを押すとtableタグに上のフォームの文字を挿入して、
その結果を別の場所に作ったテキストエリア↓に、表示させたいです。

<textarea name="kekka" cols="20" rows="20">
<table>
<tr><td><a href="あああ">いいい</a></td></tr>
<tr><td><a href="あああ">ううう</a></td></tr>
（改行）
<tr><td><a href="えええ">いいい+ううう</a></td></tr>
</table>
</textarea>
</form>

↓のサイトが近いかもしれません。
http://www.mech.tohoku-gakuin.ac.jp/nken/e-learning/javascript/lesson8.html