title: .submit in javascript vs .submit in jquery
body: <p>I have a form on page. I want to submit a form when user click on submit button which is outside of form tag. When I am using <code>$('#theform').submit()</code> then submit method work perfectly but when I am doing this <code>document.getElementById('theform').submit()</code> then it is only refreshing my page.</p>
  
  <p><a href="http://jsfiddle.net/zws59Ldc/1/" rel="nofollow">Fiddle</a></p>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$(function() {
      $('input[type="submit"]').click(function() {
          //$('#theform').submit()
          document.getElementById('theform').submit()
      })
  
      $('#theform').submit(function(e) {
          alert(0)
          e.preventDefault()
      })
  })
  </code></pre>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;form id="theform"&gt;
      &lt;input type="text"  id="fname" /&gt;
      &lt;input type="text"  id="lname" /&gt;
      &lt;input type="text"  id="country" /&gt;
  &lt;/form&gt;
  &lt;input type="submit" /&gt;
  </code></pre>