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

【问题标题】：Javascript override form onsubmit event not workingJavascript覆盖表单onsubmit事件不起作用
【发布时间】：2015-04-30 11:33:19
【问题描述】：

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

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

【问题讨论】：

你也可以在你的html表单标签中尝试onClick="function_name"。
我现在可以在您编辑的代码中看到您正在通过 javascript 发布表单。因此 onsubmit 没有被调用。原因很简单，浏览器认为您正在通过代码提交表单，因此您在调用提交方法之前已经完成了预处理。因此，IMO，在您调用 f.submit() 语句之前，您应该在提交表单之前调用您想要执行的所有其他方法。
Manish，请参阅下面的解决方案。你走在正确的轨道上。谢谢你的帮助。 :-)

标签： javascript forms dom-events

【解决方案1】：

为防止表单发布，您的函数必须返回 false。

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

【讨论】：

这不起作用。此外，我在此之前添加了一个警报，它看起来不像它的调用。
尝试用 document.getElementById('form1').onsubmit... 替换 form.onsubmit...，并在 HTML 中的表单标签中添加一个 id="form1"。
garryP，我认为这不会起作用，因为我在 javascript 中动态创建表单，并且在我添加 onsubmit 函数时它不会存在于 DOM 中。
可以在表单添加到 DOM 后添加事件吗？

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

试试这个

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

【讨论】：

括号不是问题，只是用户提出这个问题时省略了。
我更改了函数的名称。
我没有看到这种变化。最好在您的评论中指出您认为可以解决问题的实际更改。但是 .submit 不是附加到表单的事件，如w3schools.com/jsref/event_onsubmit.asp 所述
好吧，如果你看到这个问题，Xavi 写了 form.onsubmit，我将更改为 form.submit
Manish 我更改了提交的函数，它停止了帖子，但后来我收到了这个错误：TypeError: Cannot read property 'preventDefault' of undefined

【解决方案4】：

按照@garryp 对“return false”的回答。进一步阅读 MDN event.stopImmediatePropagation 以查看一些用例以及 event.preventDefault 和 event.stopPropagation 之间的区别。

在旁注中，“return false;”和调用两者是一样的；

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

希望这会有所帮助。

【讨论】：

stopPropagation 也不起作用。我认为该函数没有被调用。
嗯，尝试在浏览器开发工具上使用断点，即。萤火虫或铬。我也会尝试添加“console.log('submited');” + 其他观察变量。最后，了解事件的概念以及它是如何产生的。基本上， preventDefault() 会阻止默认操作被触发， stopPropagation 将不允许它冒泡 DOM，但范围内的其他操作将被触发。最后，stopImmediatePropogation.. 停止一切。