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

Arun P Johny · Accepted Answer · 2014-01-20 11:00:06Z

4

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

answered Jan 20, 2014 at 11:00

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mr. Fox Over a year ago

sir I appreciate your answer and it did solve my problem but I just can't accept it without undestanding it, can I ask what happenened in this line return value ? value : undefined; ? again thank you

Mark Walters Over a year ago

@user3046019 ? is a ternary operator, it reads like an if else statement. that statement could also read like this - if(value) { return value } else { return undefined }; if there was a value return it else return undefined. here is a question relating to the ternary operator -> stackoverflow.com/questions/10323829/…

Arun P Johny Over a year ago

@user3046019 that is a ternary operator... if an input element is blank then we dont want to add the empty value to the vals array so we returns undefined

Mr. Fox Over a year ago

sir can I ask If I can make a condition in which the first user input does not have a comma (,) when combined and the rest will have them? I'm sorry fo this added question I was just hoping to finish it thank you

Arun P Johny Over a year ago

@user3046019 sorry can you explain the requirement again.. if possible with a sample

|

ArtBIT · Accepted Answer · 2014-01-20 11:10:37Z

1

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/

answered Jan 20, 2014 at 11:10

ArtBIT

4,03931 silver badges40 bronze badges

Comments

Salman Arshad · Accepted Answer · 2014-01-20 11:10:45Z

1

Here is one way to do this:

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

edited Jan 20, 2014 at 11:10

answered Jan 20, 2014 at 11:05

Salman Arshad

274k85 gold badges450 silver badges540 bronze badges

Comments

wf4 · Accepted Answer · 2014-01-20 11:11:32Z

1

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.

edited Jan 20, 2014 at 11:11

answered Jan 20, 2014 at 11:06

wf4

3,8372 gold badges38 silver badges47 bronze badges

3 Comments

unwitting Over a year ago

No discussion of why this is a better approach, or why OP should remove the combine class

wf4 Over a year ago

I'd hope that actually reading the commented code would be enough @unwitting you should take a look at when and why down voting should be used... I'd not say my answer meets that criteria.

unwitting Over a year ago

I don't think so - there was no comment in the code about the combine class, your edit is much more informative

Bhadra · Accepted Answer · 2014-01-20 11:13:08Z

1

$(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()

edited Jan 20, 2014 at 11:13

answered Jan 20, 2014 at 11:02

Bhadra

2,1041 gold badge13 silver badges19 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:58:44Z

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

bedane · Accepted Answer · 2014-01-20 10:59:08Z

-1

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

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

answered Jan 20, 2014 at 10:59

bedane

1,13711 silver badges13 bronze badges

1 Comment

Mr. Fox Over a year ago

I did sir but it didn't work, I'm tweaking a few things I'll update the question if get more info

Collectives™ on Stack Overflow

Jquery: Combine multiple user inputs into one text area?

7 Answers 7

6 Comments

Comments

Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

6 Comments

Comments

Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related