Question

我有这个HTML：

<input type="radio" name="r1" value="v1"><input name="asd1" title="text1" id="asd1"><br>
<input type="radio" name="r2" value="v2"><input name="asd2" title="text1" id="asd2"><br>
<input type="button" name="but1">

<textarea rows=6 cols=80 name="conclus" id="idConclus">
</textarea><br><br>

js是否有办法通过选择其中一些并点击一个按钮来填充textarea的标题和输入值？例如：“text1 - value1，text2 - value2”等。

感谢材料。嗯... Felix King，在你的例子中按钮更新了表格。如果我需要放一个testfield 1，然后手动将一些文本放在textarea中，然后再将textfield 2放入，依此类推？我的意思是，没有更新textarea？

Answer 1

getElementById是你的朋友： - ）

 <script>
 getValues = new function() {
    var myTextArea = document.getElementById('idConclus');
    var radio1 = document.getElementById('asd1');
    var radio2 = document.getElementById('asd2');

    myTextArea.value = radio1.title + ' - ' + radio1.value + ' ,'
                  + radio2.title + ' - ' + radio2.value;
  }
  </script>
 <input type="radio" name="r1" value="v1">
 <input type="text"  name="asd1" title="text1" id="asd1"><br>
 <input type="radio" name="r2" value="v2">
 <input type="text"  name="asd2" title="text1" id="asd2"><br>
 <input type="button" name="but1" handler = getValues>

Answer 2

我建议您阅读JavaScript and forms。

假设你有这个HTML：

<form name="data">
    <input name="asd1" title="text1" id="asd1"><br>
    <input name="asd2" title="text2" id="asd2"><br>
    <input type="button" name="but1" value="update">

    <textarea rows=6 cols=80 name="conclus" id="idConclus"></textarea>
</form>

你可以这样做：

var inputs = ['asd1', 'asd2'];
var form = document.data;
var button = form.but1;
var textarea = form.conclus;
button.addEventListener('click', function() {
    var text = Array();
    for(var i = 0, length = inputs.length; i < length; i++) {
        var input = form[inputs[i]];
        text.push(input.title + " - " + input.value);
    }
    textarea.value = text.join(' ');
}, false);

在此处查看实时示例：http://jsfiddle.net/6kbtH/

<强>更新

如果你想控制哪些值放入文本框，我会使用复选框，给它们相同的名称和输入的名称作为值，如下所示：

<input type="checkbox" name="take" value="asd1"><input name="asd1" title="text1" id="asd1">
<input type="checkbox" name="take" value="asd2"><input name="asd2" title="text2" id="asd2">

然后你可以在这些值上使用几乎相同的代码循环：

var form = document.data;
var inputs = form.take;
var button = form.but1;
var textarea = form.conclus;
button.addEventListener('click', function() {
    var text = Array();
    for(var i = 0, length = inputs.length; i < length; i++) {
        if(inputs[i].checked) {
           var input = form[inputs[i].value];
           text.push(input.title + " - " + input.value);
        }
    }
    textarea.value = text.join(' ');
}, false);

实例：http://jsfiddle.net/sJdqb/

注意：如果您不使用JavaScript库，则必须自行处理有关附加事件侦听器的跨浏览器问题。我给出的示例将在Firefox和基于WebKit的浏览器中使用。

javascript如何将文本框的值和标题添加到textarea

2 个答案: