Javascript override form onsubmit event not working

Question

I am overriding a form submit event like this:

form.onsubmit = function(event) {
  event.preventDefault();

But when I call submit on the form like this in a separate function:

form.submit();

The onsubmit function is not called and the and the form is posted as usual.

Any thoughts?

Edit:

I am also creating a file input in this form and calling its click event immediately. Would this affect the form submit event?:

if (fileInput && document.createEvent)
{
    var evt = document.createEvent('MouseEvents');
    evt.initEvent('click', true, false);
    fileInput.dispatchEvent(evt);
}

Edit #2:

I am submitting the form by calling the form's submit function after the file input value has changed:

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();
    }
}

Answer 1

To prevent the form posting your function must return false.

form.onsubmit = function(event) {
    event.preventDefault();
    return false;
}