title: Submit form on dropdown change using Ajax
body: <p>I have the following which calls another file and spits output based on the dropdown value. It works fine except I can't seem to get it to work correctly without a submit button. This works except it will redirect itself to <code>process.php</code> with the correct output. The whole point of this code is to display the output within the empty div (<code>output</code>).</p>
  
  <pre><code>$(document).ready(function() {
     $('#dropdown').change( function() {
         $('#myform').submit();
         $.ajax({ // create an AJAX call...
             data: $(this).serialize(), // get the form data
             type: $(this).attr('method'), // GET or POST
             url: $(this).attr('action'), // the file to call
             success: function(response) { // on success..
                 $('#output').html(response); // update the DIV
             }
         });
         return false; // cancel original event to prevent form submitting
      });
  });
  
  
  &lt;form id="myform" method=POST action="process.php"&gt;
  &lt;select id="dropdown" name="dropdown"&gt;
      &lt;option value="QU"&gt;QU&lt;/option&gt;
      &lt;option value="QF"&gt;QF&lt;/option&gt;
      &lt;option value="QC"&gt;QC&lt;/option&gt;
  &lt;/select&gt;
  &lt;/form&gt;
  &lt;div id="output"&gt;&lt;/div&gt;
  </code></pre>