javascript - Jquery: Combine multiple user inputs into one text area? - Stack Overflow

admin管理员组

文章数量:1287511

I'm trying to put together multiple user inputs and then bine 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/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

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

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


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

Jquery

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

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

Update for sir Arun P Johny

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

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

I'm trying to put together multiple user inputs and then bine 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./ajax/libs/jquery/1.10.2/jquery.min.js"></script>

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

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


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

Jquery

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

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

Update for sir Arun P Johny

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

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

• javascript
• jquery
• html

Share Improve this question Follow edited Jan 20, 2014 at 11:26 Mr. Fox asked Jan 20, 2014 at 10:56 Mr. FoxMr. Fox 32811 gold badge77 silver badges2828 bronze badges

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 4

Try

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

Demo: Fiddle

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

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

Expanded:

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

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

Here is one way to do this:

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

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 = [];

        $('.bine').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 bine 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 bined values are set each time.

$(document).ready(function(){ 
  $('#setVal').on('click',function(){
    var val='';
    $('.bine').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()

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 bine, meaning that the $('.bine').each() call will include this element. The oute 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

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

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

本文标签： javascriptJquery Combine multiple user inputs into one text areaStack Overflow