Get value inside a text field - JavaScript - jQuery

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?

move the test2 assign code inside the click event

VIJAY
– VIJAY

2012-03-03 07:28:15 +00:00
Commented Mar 3, 2012 at 7:28 — VIJAY
– VIJAY, Commented Mar 3, 2012 at 7:28

Sarfraz · Accepted Answer · 2012-03-03 07:27:18Z

1

You can do this:

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

Or:

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

Working Example

answered Mar 3, 2012 at 7:27

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

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

Comments

Shivomkara Chaturvedi · Accepted Answer · 2012-03-03 07:37:32Z

1

Here is very simplest way

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

<script>
function buttonClicked(){
  alert(jQuery("input#test1").val())
}
</script>

Enjoy

answered Mar 3, 2012 at 7:37

Shivomkara Chaturvedi

1,6977 gold badges28 silver badges42 bronze badges

Comments

Jeff B · Accepted Answer · 2012-03-03 07:37:56Z

1

You are getting the value on page load, outside of the handler. You need to move it inside of the click handler, otherwise you will just get the value that was fetched when the page loaded:

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

edited Mar 3, 2012 at 7:37

answered Mar 3, 2012 at 7:27

Jeff B

30.1k7 gold badges64 silver badges91 bronze badges

Collectives™ on Stack Overflow

Get value inside a text field - JavaScript - jQuery

3 Answers 3

Working Example

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related