Cannot get value of textbox by jquery

Question

javascript

<script>
    jQuery(function ($) {                                  
        var userName = jQuery("#userName").val();

        $('#btnsubmit').click(function () {
            alert(userName);

        });
    });
</script>

HTML

<div class="contact">
    <div class="contact-form">
        <h2>Check Out</h2>
        <div>
            <span><label>Name</label></span>
            <span><input name="userName" type="text" class="textbox" id="userName"></span>
        </div>
    </div>
    <div class="clear"></div>
</div>

I cannot get the value of the textbox. It is always empty when I click the button. Please help me to the value of the textbox to use with ajax.

+1 for at least using the combination of the shortcut jQuery DOM ready with locally scoped $. I don't see many others using it :) — iCollect.it Ltd
– iCollect.it Ltd, Commented Oct 31, 2014 at 14:50

iCollect.it Ltd · Accepted Answer · 2014-10-31 14:32:31Z

3

You are getting the username once at page load time, before you register the click handler, and then never getting it again.

You need to get the value fresh inside of the click handler.

    jQuery(function ($) {                                  

        $('#btnsubmit').click(function () {
            var userName = $("#userName").val();
            alert(userName);

        });
    });

Note, you are scoping a local $, so please use it instead of jQuery inside the DOM ready handler :)

answered Oct 31, 2014 at 14:32

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

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

1 Comment

Cong HS Over a year ago

Thank TrueBlueAussie,I did it

Stan Shaw · Accepted Answer · 2014-10-31 14:46:45Z

0

Try this:

<script>
    jQuery(function( $ ) {
        $('#btnsubmit').click(function () {
            alert($("#userName").val());
        });
    });
</script>

edited Oct 31, 2014 at 14:46

answered Oct 31, 2014 at 14:33

Stan Shaw

3,0541 gold badge14 silver badges27 bronze badges

4 Comments

iCollect.it Ltd Over a year ago

Any particular reason you replaced the shortcut DOM ready handler with scoped $ with the older version? They had that part correct.

Stan Shaw Over a year ago

I'm pleading ignorance, since I was unaware of the 'newer' version. Do you have a link or quick explanation?

Stan Shaw Over a year ago

Edited my answer. Is that correct? What is the advantage, here?

iCollect.it Ltd Over a year ago

Now the circle is complete :) It is shorter and avoid clashes with other plugins that use a global $.

Collectives™ on Stack Overflow

Cannot get value of textbox by jquery

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related