Question

I have a page portion as below;

<input name="test1" type="text" id="test1" class="test1">
<button value="hi" id="but">hi</button>

I want to get data inside text field entered by user. I tried the following;

$(document).ready(function(){
var test2 = $('#test1').val();
        $('#but').click(function() {
        alert(test2);
});
});

When user clicks button hi, the page alerts the text inside text field. But the alert is coming blank (without text) even with text inside. When I reload the page, the text inside text field remains there and when I click the button again, script works well alerting the text inside. Again when I clear the text and I give another text, and when I click button, the alert is coming with previous text.

I am using jQuery.

Here is the fiddle.

I want to get alert with text inside the text area. How can I do this?

Answer 1

You can do this:

$('#but').click(function() {
    alert($('#test1').val());
});​

Or:

$('#but').click(function() {
    var val = $('#test1').val();
    alert(val);
});​

Working Example