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

Solution 1

As Manish pointed out, both overriding the submit function and calling the submit form in javascript was complicating how the event was propagating. So added a hidden button in to the form in javascript and called the button's click function instead of the form submit function. WHich seems to have worked even it it feels rather like a kludge! Many thanks for to all of you for your prompt help. :-)

function nameFileLabel(id)
{
    var f = document.getElementById('fileForm' + id);
    var l = document.getElementById('fileText_' + id);
    var i = document.getElementById('fInputId' + id);
    var b = document.getElementById('sub' + id);
    if (i.value != '')
    {
        l.innerHTML = i.value.replace('fakepath', '...');
        var theUploadForm = document.getElementById('fileDiv_' + id);
        theUploadForm.style.visibility = 'visible';
        theUploadForm.style.display = 'block';
        b.click();
    }
}

Solution 2

To prevent the form posting your function must return false.

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

Solution 3

Try with this one

form.submit = function() {
  //event.preventDefault();     No need of this call
  //do your processing here
}