title: .val() not getting updated value from input
body: <p>I have two input fields, and I'm trying to get their values using jquery by clicking a button. It seems like a very simple operation, but for the life of me I can't get it to work. Here is the code snippet:</p>
  
  <pre><code>Name: &lt;input type="text" id="name" value="test1"&gt;&lt;br&gt;
  Message: &lt;input type="text" id="line" value="test2"&gt;&lt;br&gt;
  &lt;button id="submitButton"&gt;Submit&lt;/button&gt;
  
  &lt;script&gt;
  name1 = $("#name").val();
  line1 = $("#line").val();
  
  $("#submitButton").click(function(){
      alert("Name: " + name1 + "\nMessage: " + line1);
  });
  
  &lt;/script&gt;   
  </code></pre>
  
  <p>If I don't specify the value, the alert returns with undefined for both variables. If I change the values of the input and click the button, it still says test1 and test2. There has to be something simple that I'm missing here, anyone know what it is?</p>