title: Getting value of input and passing along through querystring
body: <p>I'm attempting to get the value of text typed by a user in an input box but the problem is that instead of getting the value which the user has typed, I get the preset value of the input which is 'undefined'.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;input type="text" id="userInput" value="" name="title" 
         placeholder="Enter the name here" required="required"/&gt;
  &lt;input type="button" id="text_value" value="Set Input"/&gt;
     &lt;!-- I have this button here because I think maybe 
      I should have a button to change default value but
      I don't know the javascript to do this --&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>// Gets input value id 
  
      var theuserInput = $("#userInput").val();
  </code></pre>
  
  <p>The reason I haven't shown query string code is because the input value is passed along in the url but the problem is that the default input value 'undefined' is passed instead of actual user input. </p>
  
  <p>Any solutions?</p>
  
  <p><strong>ADDITIONAL CODE</strong></p>
  
  <p>Ok so here is the querystring, when you click the 'pass' button the input is passed along in querystring:</p>
  
  <pre><code>$('.pass').click(function() {
      window.location.href = 'http://lala.com/passing.php?input=' + theuserInput + '';
      return false;
  });
  </code></pre>