Variable declaration issue
<p>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:</p>

<pre><code>var bdmm = $("#bdmm").val();
</code></pre>

<p>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?</p>

<p>JQUERY:</p>

<p>This will <strong>NOT</strong> work:</p>

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

<p>This will work:</p>

<pre><code>$(document).ready(function() {
            $('#submit').click(function(e){
                alert($("#bdmm").val());
                e.preventDefault();

                              //OR
                            var bdmm = $("#bdmm").val();
                            alert(bdmm);
                e.preventDefault();

            });
        });
</code></pre>
