Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery: Combine multiple user inputs into one text area?

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

like image 479
Mr. Fox Avatar asked Mar 20 '23 21:03

Mr. Fox


2 Answers

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

like image 166
Arun P Johny Avatar answered Mar 23 '23 10:03

Arun P Johny


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/

like image 41
ArtBIT Avatar answered Mar 23 '23 10:03

ArtBIT