title: JQuery val() returning empty
body: <p>I'm stuck on what seems like a trivial issue and I'm probably gonna kick myself for missing this..Anyway, my issue is I'm failing to get the value from a text field.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;form&gt;
          &lt;label for=""&gt;Enter Username:&lt;/label&gt;
          &lt;input id="usernameText" type="text" size="30" /&gt;
          &amp;nbsp;&amp;nbsp;&lt;input type="button" value="Generate" onclick="generateQuery(); return     false;" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
          var username = $("#usernameText").val();
  
          function generateQuery(){
  
              alert(username);
  
          }
  &lt;/script&gt;
  </code></pre>
  
  <p>I did the following <code>if (jQuery) {..</code> and made sure JQuery is loaded.</p>
  
  <p>In the alert it displays an empty dialog box.</p>
  
  <p>If I included the <code>$(document).ready();</code> into my script the function <code>generateQuery</code> does not get called. Any idea why..?</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      $(document).ready(function(){
          var username = $("#usernameText").val();
  
          function generateQuery(){
  
              alert(username);
  
          }
      });     
  &lt;/script&gt;
  </code></pre>