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

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

• javascript
• forms
• dom-events

• you can also try onClick="function_name" in your html form tag. – syms Commented Apr 30, 2015 at 11:53
• what i can see now in your edited code that you are posting your form through javascript. And thus the onsubmit is not getting called. Reason is simple, that the browser thinks that you are submitting your form through code so you already have done the preprocessing before calling the submit method. So, IMO, before you call the f.submit() statement, you should call all other methods you want to perform before submitting the form. – Manish Rawat Commented Apr 30, 2015 at 12:13
• Manish, see my solution below. You were on the right track. Thanks for your help. :-) – Xavi Commented Apr 30, 2015 at 12:47

4 Answers 4

To prevent the form posting your function must return false.

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

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

Try with this one

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

Following @garryp's answer on "return false". Further reading from MDN event.stopImmediatePropagation to see some use cases and differences between event.preventDefault and event.stopPropagation.

On the side note, "return false;" is the same as calling both;

  event.preventDefault();
  event.stopPropagation();

Hope this helps.