title: Inner HTML with input values
body: <p>have a brief question regarding innerHTML and input values that have been entered. See the brief example below (using jQuery for convenience):</p>
  
  <p><a href="http://jsfiddle.net/F7urT/2/" rel="noreferrer">http://jsfiddle.net/F7urT/2/</a></p>
  
  <p><strong>jQuery:</strong></p>
  
  <pre><code>jQuery(document).ready(function($) {
      $('.send').click(function() {
          alert( $('.content').html() );
          return false;
      });
  });​
  </code></pre>
  
  <p><strong>html:</strong></p>
  
  <pre><code>&lt;div class="content"&gt;
      &lt;input type="text" name="input" value="Old Value" /&gt;
      &lt;input type="button" class="send" value="Send" /&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>If you edit the input value, then click the 'Send' button, the alert shows that the innerHTML gotten contains the input with the "Old Value", rather than the value the user has entered. Why is this? And how can we get the HTML as a string with user entered input values?</p>