title: submit form on click event using jquery
body: <p>So can someone please tell why neither of these options will actually submit the form?  I am trying to do something more complicated but I have boiled it down to this to try and figure out why I can't seem to get this form to submit using a click event and submit()</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(function() {
     $('#submitButton').click(function(e) {
          e.preventDefault();
          $("#testForm").submit();
      });
  
     $('#submitLink').click(function(e) {
          e.preventDefault();
          $("#testForm").submit();
      });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;form action="javascript:alert('submitted');" method="post" id="testForm"&gt;
      &lt;label&gt;Name&lt;/label&gt;
      &lt;input type="text" name="name" value="" /&gt;
      &lt;input type="submit" name="submit" value="Submit" id="submitButton" /&gt;
      &lt;p&gt;&lt;a href="#" id="submitLink"&gt;Submit Form&lt;/a&gt;&lt;/p&gt;
  &lt;/form&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thank you!</p>