Javascript重写表单onsubmit事件不起作用

Question

我正在重写一个表单提交事件，代码如下：

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

当我在一个单独的函数中这样调用表单的submit方法时：

```javascript form.submit(); ```

表单就会被提交。

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

- Xavi

---

你也可以在HTML表单标签中尝试使用onClick="function_name"。 - syms

我现在看到你编辑后的代码是通过JavaScript提交表单。因此，onsubmit没有被调用。原因很简单，浏览器认为你正在通过代码提交表单，所以在调用submit方法之前，你已经完成了预处理。因此，在调用f.submit()语句之前，我认为你应该调用所有其他想要在提交表单之前执行的方法。 - Manish Rawat

Manish，看下面是我的解决方案。你走在了正确的轨道上。感谢你的帮助。 :-) - Xavi

Answer 1

为了防止表单提交，你的函数必须返回false。

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

- garryp

---

这个没有起作用。另外，在这之前我添加了一个警告，但似乎没有被调用。 - Xavi

尝试将 form.onsubmit... 替换为 document.getElementById('form1').onsubmit...，并在 HTML 中的表单标签中添加 id="form1"。 - garryp

garryP，我认为这不会起作用，因为我正在JavaScript中动态创建表单，并且在我添加onsubmit函数的时候它不存在于DOM中。 - Xavi

你能在表单添加到DOM后再添加事件吗？ - garryp

Answer 2

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

- Xavi

Answer 3

Try with this one

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

- Manish Rawat

---

花括号不是问题，只是提问者忘记了它。 - Tim van der Lippe

我已经更改了函数的名称。 - Manish Rawat

我没有看到那个变化。最好在你的评论中注明你实际上改变了什么，以解决这个问题。然而，.submit不是附加到表单的事件，如http://www.w3schools.com/jsref/event_onsubmit.asp所述。 - Tim van der Lippe

好的，如果你看到这个问题，Xavi写了 form.onsubmit 我做出的更改为 form.submit - Manish Rawat

Manish，我将函数更改为submit以停止发布，但是然后出现了此错误：TypeError: 无法读取未定义的属性'preventDefault'。 - Xavi

原因是您覆盖了表单的提交方法（本地方法）。因此，默认的事件对象参数无法检索。如果您想继续，可以简单地删除该语句，但我认为这不是您问题的最佳解决方案。 - Manish Rawat

Answer 4

根据@garryp在"return false"上的回答，进一步阅读MDN event.stopImmediatePropagation 以了解一些用例和event.preventDefault与event.stopPropagation之间的区别。

另外，值得一提的是，"return false;"等同于同时调用两者；

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

希望这能有所帮助。

- daxeh

---

stopPropagation也没有起作用。我认为这个函数根本没有被调用。 - Xavi

嗯，尝试在浏览器开发工具（如Firebug或Chrome）上使用断点。我还将尝试添加“console.log（'submited');”+其他监视变量。最后，理解事件的概念以及它如何冒泡。基本上，preventDefault（）会阻止触发默认操作，stopPropagation将不允许其从DOM中冒泡，但作用域内的其他内容将被触发。最后，stopImmediatePropogation..停止所有这些。 - daxeh