Javascript 覆盖表单 onsubmit 事件不起作用

Question

我正在重写这样的表单提交事件：

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

但是当我在一个单独的函数中像这样在表单上调用提交时：

form.submit();

未调用 onsubmit 函数，照常发布表单。

有什么想法吗？

编辑：

我也在这个表单中创建一个文件输入并立即调用它的点击事件。这会影响表单提交事件吗？:

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

编辑#2：

我在文件输入值更改后通过调用表单的提交函数提交表单：

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

要防止表单发布您的函数，必须 return false。

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

Answer 2

试试这个

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

Answer 3

关注@garryp 对“return false”的回答。进一步阅读 MDN event.stopImmediatePropagation 以了解一些用例以及 event.preventDefault 和 event.stopPropagation 之间的差异。

旁注，“return 错误；”与调用两者相同；

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

希望对您有所帮助。

Answer 4

正如 Manish 指出的那样，在 javascript 中覆盖提交函数和调用提交表单都使事件的传播方式变得复杂。所以在 javascript 中的表单中添加了一个隐藏按钮，并调用按钮的点击功能而不是表单提交功能。这似乎奏效了，即使它感觉很像一个拼凑！非常感谢大家的及时帮助。 :-)

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

Javascript 覆盖表单 onsubmit 事件不起作用

Javascript override form onsubmit event not working

javascript

forms

dom-events