title: jQuery display input and select options in realtime in a span
body: <p>I have a form that has several input and select elements. At the end of the form I'm displaying a summary of what the user has inputed/selected - I'd like this to change in realtime i.e. as the user makes changes.</p>
  
  <p>Here is part of my form:</p>
  
  <pre><code>&lt;select class="select" id="eventType" name="eventType"&gt;
      &lt;option vlaue="0"&gt;&lt;/option&gt;
      &lt;option value="0"&gt;Wedding&lt;/option&gt;
      &lt;option value="0"&gt;Private Party&lt;/option&gt;
      &lt;option value="0"&gt;Corporate Event&lt;/option&gt;
   &lt;/select&gt;
  </code></pre>
  
  <p>And the jQuery I'm using:</p>
  
  <pre><code>$(".txt, .select, .checkbox").each(function() {
          $(this).change(function(){
      createSummary();
          });
      });
  
  function createSummary() {
      var eventType = $("#eventType").val();      
      $(".summary_eventType").html(eventType);
  
  }
  </code></pre>
  
  <p>However this just returns the value 0 not the actual text that is selected.</p>