title: Summary of form in a <div> with jQuery
body: <p>I have two input boxes and two select boxes and would like to display a summary of data selected and entered  in real time prior to submitting the form. jQuery seems the way to go, but how! </p>
  
  <pre><code>&lt;form id="form1" name="form1" method="post" action=""&gt;
  &lt;select name="Select1" id="Select1"&gt;
    &lt;option value="Item 1"&gt;Item 1&lt;/option&gt;
    &lt;option value="Item 2"&gt;Item 2&lt;/option&gt;
    &lt;option value="Item 3"&gt;Item 3&lt;/option&gt;
  &lt;/select&gt;
  &lt;br /&gt;
  &lt;select name="OtherItem" id="OtherItem"&gt;
    &lt;option value="OtherItem 1"&gt;OtherItem 1&lt;/option&gt;
    &lt;option value="OtherItem 2"&gt;OtherItem 2 &lt;/option&gt;
    &lt;option value="OtherItem  3"&gt;OtherItem 3&lt;/option&gt;
  &lt;/select&gt;
  &lt;input type="text" name="textfield1" id="textfield1" /&gt;
  &lt;input type="text" name="textfield2" id="textfield2" /&gt;
  &lt;/form&gt;&lt;div id="FormSummary"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Many thanks</p>