Get a value from an input textbox

Question

Okay. So I have this code

<input id="suspect" value="" type="text">
<input id="reason" value="" type="text">
<textarea></textarea>
var suspect = $('input#suspect').text();
var reason = $('input#reason').text();
$('textarea').val('' + suspect + ' and ' + reason + '')

Then I put something in both of those 2 inputs and then the textarea recieves no value from the inputs. How to fix that problem ?

David Thomas · Accepted Answer · 2012-04-22 05:30:47Z

2

Because when you set the variables there's no text inside the elements from which you're trying to recover the entered-text (incidentally, for inputs you're looking for .val()). If you bind to the focus event:

$('textarea').focus(
    function(){
        var suspect = $('#suspect').val(),
            reason = $('#reason').val();
        $(this).val('' + suspect + ' and ' + reason + '');
    });

JS Fiddle demo.

Also, in this case (since you've placed the JavaScript after the elements in the DOM, albeit you've omitted the <script></script> tags) you might be okay not using the $(document).ready() event handler, but I'd normally suggest wrapping jQuery in such, just to be sure that events are being bound after the elements to which they're being bound exist in the DOM.

References:

focus().
val().

answered Apr 22, 2012 at 5:30

David Thomas

254k53 gold badges382 silver badges421 bronze badges

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

1 Comment

David Thomas Over a year ago

Awesome; you're very welcome, and I'm glad to have been of help! =)

Derek 朕會功夫 · Accepted Answer · 2012-04-22 05:31:57Z

1

.text() -- Gets the text inside the elements
.val() -- Gets the value of the elements

Since the text is stored inside the value, therefore you should use .val() instead of .text().

var suspect = $('input#suspect').val(),
    reason = $('input#reason').val();
$("textarea").val(suspect+" and "+reason);

answered Apr 22, 2012 at 5:31

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

Comments

Tina CG Hoehr · Accepted Answer · 2012-04-22 05:34:40Z

1

If you want instant change try the keyboard events

$(window).keyup(function() {
var suspect = $('input#suspect').val();
var reason = $('input#reason').val();
$('textarea').val('' + suspect + ' and ' + reason + '');
});

see here: http://jsfiddle.net/TtAVS/

answered Apr 22, 2012 at 5:34

Tina CG Hoehr

6,7666 gold badges46 silver badges57 bronze badges

Comments

Cameron · Accepted Answer · 2012-04-22 05:28:43Z

0

You probably want to use val() here instead of text(), and there also needs to be some kind of event (like a click) that causes the data to be extracted from the inputs and put into the textarea.

It also might be worth noting that since id's are unique,

var suspect = $('#suspect').val();
var reason = $('#reason').val();

are sufficient as selectors and (I find) easier to read.

answered Apr 22, 2012 at 5:28

Cameron

1,71511 silver badges12 bronze badges

Comments

epascarello · Accepted Answer · 2012-04-22 13:34:27Z

0

should use .val() to get value from the input box

edited Apr 22, 2012 at 13:34

epascarello

208k20 gold badges206 silver badges246 bronze badges

answered Apr 22, 2012 at 5:28

ipohfly

2,0296 gold badges31 silver badges62 bronze badges

Collectives™ on Stack Overflow

Get a value from an input textbox

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related