javascript how to add textboxs' values and titles to textarea

Question

I have this 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>

Is there a way on js to fill textarea with titles and values of inputs by selecting some of them and clicking a button? e.g.: "text1 - value1, text2 - value2" etc.

Answer 1

getElementById is your friend :-)

 <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

I suggest you read about JavaScript and forms.

Assuming you have this 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>

you can do this:

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);​

See a live example here: http://jsfiddle.net/6kbtH/

Update:

If you want to control which values are put into the textbox, I would use checkboxes, give them the same name and the name of the input as value like so:

<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">

Then you can loop with nearly the same code over those values:

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);​

Live example: http://jsfiddle.net/sJdqb/

Note: You have to take care of cross-browser issues regarding attaching the event listener yourself if you don't use a JavaScript library. The examples I gave will work in Firefox and WebKit-based browsers.

Answer 3

thanks for material. mmm... Felix King, in your examples the button updates the form. and if i need to put one testfield 1, then put some text in textarea manually, and then again textfield 2 and so on? i mean, without updating the textarea?