Variable declaration issue

Question

I've a form in which I want to retrieve the value in the textbox using jQuery. The problem is if I declare the variable like this:

var bdmm = $("#bdmm").val();

in document.ready event but outside a function, and reference it in a function, the text value is null. However if I declare it inside the function, it works fine. Why is this so?

JQUERY:

This will NOT work:

$(document).ready(function() {
 var bdmm = $("#bdmm").val();
 $('#submit').click(function(e){
 alert(bdmm);
 e.preventDefault();
 }); 
 });

This will work:

$(document).ready(function() {
 $('#submit').click(function(e){
 alert($("#bdmm").val());
 e.preventDefault();
 //OR
 var bdmm = $("#bdmm").val();
 alert(bdmm);
 e.preventDefault();
 });
 });

Answer 1

In the first example it retrieves the text box value immediately on DOM ready. If there's already a value in it, it will work--but it won't re-query the form when the click event actually occurs. Probably not what you want.

In the second example the form field value is retrieved when the click event actually occurs, which is almost certainly what you intend.

• input: Thanks for the response. I understand now. So how do I declare variables on DOM ready and call it in a function? Or should I even do that?
• Dave Newton: @fuz3d You shouldn't do that if you care about their values when the event occurs. For non-dynamic stuff they don't need to be declared in DOM ready, although that's one way to isolate the variable names and guarantee the right value will be used in the function (JavaScript closures).

Answer 2

The problem is that probably just after the DOM is ready, your $("#bdmm").val() is empty, and when user tries to submit the form it already has some value.

So, outside the callback the field is empty, inside the callback the field has already been filled in.

Plus, I suggest using jQuery's .submit() function to bind to form submit instead of binding to form element's click event (unless the element with ID "submit" is different than form's submit button). This should give you more flexibility and should work also when the form is submitted by hitting "enter" button.

Answer 3

You can also create global variable (I prefer warap it to class but won't do it this time to keep example simple):

var MyGlobal;
$("myTextBox").change(function(){
 MyGlobal = $(this).val();
});

Then your code should work so.. all looks like this:

 var bdmm;
 $(document).ready(function() {
 $("myTextBox").change(function(){
 bdmm = $(this).val();
 });
 $('#submit').click(function(e){
 alert(bdmm);
 }); 
 });

Value is reinitialized when you edit textbox.

http://api.jquery.com/change/