title: Javascript override form onsubmit event not working
body: <p>I am overriding a form submit event like this:</p>
  
  <pre><code>form.onsubmit = function(event) {
    event.preventDefault();
  </code></pre>
  
  <p>But when I call submit on the form like this in a separate function:</p>
  
  <pre><code>form.submit();
  </code></pre>
  
  <p>The onsubmit function is not called and the and the form is posted as usual.</p>
  
  <p>Any thoughts?</p>
  
  <p>Edit:</p>
  
  <p>I am also creating a file input in this form and calling its click event immediately. Would this affect the form submit event?:</p>
  
  <pre><code>if (fileInput &amp;&amp; document.createEvent)
  {
      var evt = document.createEvent('MouseEvents');
      evt.initEvent('click', true, false);
      fileInput.dispatchEvent(evt);
  }
  </code></pre>
  
  <p>Edit #2:</p>
  
  <p>I am submitting the form by calling the form's submit function after the file input value has changed:</p>
  
  <pre><code>function nameFileLabel(id)
  {
      var f = document.getElementById('fileForm' + id);
      var l = document.getElementById("fileText_" + id);
      var i = document.getElementById("fInputId" + id);
      if (i.value != '')
      {
          l.innerHTML = i.value.replace('fakepath', '...');
          var theUploadForm = document.getElementById('fileDiv_' + id);
          theUploadForm.style.visibility = 'visible';
          theUploadForm.style.display = 'block';
          f.submit();
      }
  }
  </code></pre>