javascript Javascript覆盖表单提交事件不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29966619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript override form onsubmit event not working
提问by Xavi
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:
但是当我在一个单独的函数中像这样在表单上调用 submit 时：
form.submit();
The onsubmit function is not called and the and the form is posted as usual.
不调用 onsubmit 函数，并且像往常一样发布表单。
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:
编辑#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();
}
}
采纳答案by Xavi
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. :-)
正如 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();
}
}
回答by garryp
To prevent the form posting your function must return false.
为了防止表单发布，您的函数必须返回 false。
form.onsubmit = function(event) {
event.preventDefault();
return false;
}
回答by Manish Rawat
Try with this one
试试这个
form.submit = function() {
//event.preventDefault(); No need of this call
//do your processing here
}
回答by daxeh
Following on @garryp's answer on "return false". To add on, further reading from MDN event.stopImmediatePropagationto see differences and use case between event.preventDefault and event.stopPropagation.
关注@garryp 关于“返回假”的回答。另外，进一步阅读 MDN event.stopImmediatePropagation以查看 event.preventDefault 和 event.stopPropagation 之间的差异和用例。
On the side note, "return false;" is the same calling both;
在旁注中，“返回假；” 调用两者是一样的；
event.preventDefault();
event.stopPropagation();
Hope this helps.
希望这可以帮助。
