Jquery: Combine multiple user inputs into one text area?

Question

I'm trying to put together multiple user inputs and then combine them into one textarea after button click.

For example: User1:Hey, I just met you
User2:And this is crazy
User3:But Here's my number so call me maybe

Combined Result:
Hey, I just met you, And this is crazy, But Here's my number so call me maybe

Here's my code the button click is currently not working but when I tried it before it did work so I was thinking I have some problem w/ my Jquery that triggers this unusual result:

HTML and Imports:

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

      <input class="combine" id="input1" disabled="true"></input>
      <input class="combine" id="input2" disabled="true"></input>
      <input class="combine" id="input3" disabled="true"></input>
      <input class="combine" id="input4" disabled="true"></input>
      <input class="combine" id="input5" disabled="true"></input>
      <input class="combine" id="input6" disabled="true"></input>

      <input class="combine" id="Voltes5" disabled="true" size="45"></input>


      <button id="setVal">Set</button>

Jquery

$(document).ready(function(){ 
  $('#setVal').on('click',function(){

        jQuery(function(){
    var form = $('.combine');
    form.each(function(){
    $('.Voltes5').append($(this).text()+ ' ');
    });
    });
        });
        });

Update for sir Arun P Johny

User1: If theres a (no comma when combined)
User2: will
User3: there's a way

Combined Result: If theres a will, there's a way

Answer 1

Try

$(document).ready(function () {
    $('#setVal').on('click', function () {
        var form = $('.combine').not('#Voltes5');
        var vals = form.map(function () {
            var value = $.trim(this.value)
            return value ? value : undefined;
        }).get();
        $('#Voltes5').val(vals.join(', '))
    });
});

Demo: Fiddle

Answer 2

$(document).ready(function(){ 
  $('#setVal').on('click',function(){
    var val='';
    $('.combine').not('#Voltes5').each(function(){
        val+=$(this).val();
    });
    $('#Voltes5').val(val);
  });
});

.text() will give text of the element ,for input val u have to use .val()

Answer 3

Here is one way to do this:

$('#setVal').on('click', function () {
    $(".combine[id^=input]").each(function () {
        if(this.value) {
            $("#Voltes5")[0].value += ' ' + this.value;
        }
    });
});

Answer 4

There are several different ways to do this..

I'd do it this way using an array:

$(document).ready(function () {
    $('#setVal').on('click', function () {
        //create an array for the values
        var inpAry = [];

        $('.combine').each(function () {
            //add each value to the array
            inpAry.push($(this).val+' ');
        });
        //set the final input val 
        $('#Voltes5').val(inpAry);
    });
});

but you would need to remove the combine class from #setVal because that would be included in the .each.

This way it would also be possible to have the final box updated on keyup as I'm not just appending the values, the combined values are set each time.

Answer 5

Here's a one-liner for non-readability ;)

$('#setVal').click(function(){$('#Voltes5').val($('.combine').not('#Voltes5').map(function(){return $(this).val();}).get().join(''))});

Expanded:

$('#setVal').click(function(){
$('#Voltes5').val(
  $('.combine')
  .not('#Voltes5')
  .map(
    function(){
      return $(this).val();
    })
  .get()
  .join('')
);
});

Get fiddly with it: http://jsfiddle.net/ArtBIT/u57Zp/

Answer 6

So there's immediate big problem in the code, which is that you're referring to your Voltes5 element as a class, not an ID. The jQuery selector you want is:

#Voltes5

instead of:

.Voltes5

There are a few other things to think about too, though, for the sake of functionality and best practices. Firstly, the Voltes5 element also has class combine, meaning that the $('.combine').each() call will include this element. The outcome of this is that it will also append its current text to itself when the code is run (or, when the code is run with the above correction).

When grabbing the current entered text of an input element, a jQuery .val() call is what you want, not .text() - see this answer for some more discussion.

Another thing that could be noted is that you should really explicitly specify what sort of input these elements are; <input type="text"> is hugely preferable to <input>.

Finally, input is a void element (reading), meaning it shouldn't have any content between opening and closing tags. Ideally, you wouldn't even give a closing tag; either have just the opening tag, or self-close it:

<input>
<input />

HTH

Answer 7

replace $('.Voltes5').append($(this).text()+ ' ');
with

$('#Voltes5').append($(this).text()+ ' ');