JavaScript, как добавить значения текстовых полей и заголовки в текстовое поле

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 заполнить текстовое поле заголовками и значениями входов, выбрав некоторые из них и нажав кнопку?Например: «текст1 - значение1, текст2 - значение2» и т. д.

---

спасибо за материал.ммм ... Феликс Кинг, в ваших примерах кнопка обновляет форму.и если мне нужно поставить одно тестовое поле 1, затем вручную поместить текст в textarea, а затем снова текстовое поле 2 и так далее?Я имею в виду, без обновления текстовой области?

Answer 1

Я предлагаю вам прочитать о JavaScript и формах .

Если у вас есть этот 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.

Answer 2

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>