title: form could not be submitted using jquery
body: <p>I have the following script, it's just an example of my actual code, but it's behave the same as the actual one:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form action="http://google.com/"&gt;
          &lt;input type="text" name="item_name" /&gt;
          &lt;input type="hidden" name="submit" value="save" /&gt;
          &lt;a href="" id="save"&gt;Submit&lt;/a&gt;
      &lt;/form&gt;
      &lt;script src="https://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          jQuery(function($){
              $('#save').on('click', function(e){
                  e.preventDefault();
  
                  $('form').submit();
              });
          });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>You can see, there is <code>a</code> tag with id save, which is when this link is clicked, the form should submit, but it doesnt. this is caused by a hidden input with its name <code>submit</code>, if I change the name it just works well.</p>
  
  <p>tried this on both chrome and firefox on linux. anyone can explain this?</p>
  
  <p>here is the <a href="http://jsfiddle.net/rL60x6a8/" rel="nofollow">fiddle</a></p>
  
  <p><strong>-- EDIT --</strong></p>
  
  <p>I tried using native click event:</p>
  
  <pre><code>document.getElementById('save').onclick = function(e){
      e.preventDefault();
      document.getElementsByTagName('form')[0].submit();
  }
  </code></pre>
  
  <p>form cannot be submited too.</p>