Onclick javascript 停止在 Chrome 中提交表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16867080/
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
Onclick javascript stops form submit in Chrome
提问by Volder
I have the following form:
我有以下表格：
<form class="custom" method="post" action="/checkout/submit/">
...
<div class="row">
<div class="ten mobile-three columns" style="margin-top: 20px;">
<input id="previous-btn" style="margin-top: 10px;" type="submit" class="button radius" name="previous" value="Zurück" />
<input id="next-btn" style="margin-top:10px;" type="submit" class="button radius success" name="next" value="Best?tigen" onclick="disableButtons(this);"/>
<input style="margin-top:10px;" type="hidden" name="next" value="Best?tigen" />
<img id="ajax-img" style="display:none;" src="/img/ajax-loader.gif" />
</div>
</div>
</form>
...
<script type="text/javascript">
function disableButtons(elem)
{
$('#previous-btn').prop('disabled', true);
$('#next-btn').prop('disabled', true);
$('#ajax-img').css('display','inline');
return true;
}
</script>
</body>
</html>
Using onclickI disable the buttons and show ajax-loading picture while the form is submitted. So that user won't click submit twice.
使用onclick我禁用按钮并在提交表单时显示 ajax 加载图片。这样用户就不会点击提交两次。
The problem is that in Chrome the form is simply not submitted. So the onlclick function works fine, but that's all. In FF and IE everything is working fine - in the beginning javascript makes changes to buttons and then normal flow of form submit is done.
问题是在 Chrome 中，表单根本没有提交。所以 onlclick 功能工作正常，但仅此而已。在 FF 和 IE 中，一切正常——一开始 javascript 对按钮进行更改，然后完成表单提交的正常流程。
Would appreciate any ideas why it breaks in Chrome. Thanks!
很感激为什么它在 Chrome 中中断的任何想法。谢谢！
采纳答案by DannyB
Eventhough in theory, your code should work, Chrome thinks otherwise, as noted in in this similar SO questionand in this chrome groups discussion(may be a bug, may be the intended design).
尽管从理论上讲，您的代码应该可以工作，但 Chrome 认为并非如此，如在此类似的 SO 问题和此 chrome 组讨论中所述（可能是错误，也可能是预期的设计）。
First, when you want to allow / block a click you should use onclick="return someFunction()"and not onclick="someFunction()"- then the action will follow through only if that function returns true.
首先，当您想要允许/阻止点击时，您应该使用onclick="return someFunction()"而不是onclick="someFunction()"- 只有当该函数返回 true 时，操作才会执行。
Now to make this work, you would have to submit the form from your function:
现在要完成这项工作，您必须从您的函数提交表单：
$(this).parents('form').submit()
回答by ???ω?
You should use like this in your onclick="someFunctionToDoJob(); submit();"on your form.
你应该在你onclick="someFunctionToDoJob(); submit();"的表单中使用这样的方式。
And at your someFunctionToDoJob();add this document.hereNameYourForm.submit();
在你someFunctionToDoJob();添加这个document.hereNameYourForm.submit();
