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 fo

Answer 1

Try with this one

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

Answer 2

Following on @garryp's answer on "return false". To add on, further reading from MDN event.stopImmediatePropagation to see differences and use case between event.preventDefault and event.stopPropagation.

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

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

Hope this helps.

Answer 3

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

Answer 4

To prevent the form posting your function must return false.

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