Onclick JavaScript停止表单在Chrome中提交 [英] Onclick javascript stops form submit in Chrome

问题描述

我有以下形式：

<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" />
            &nbsp;&nbsp;<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>

使用 onclick 我禁用按钮并显示表单提交时，Ajax加载图片。因此，该用户不会点击提交两次。

Using onclick I disable the buttons and show ajax-loading picture while the form is submitted. So that user won't click submit twice.

问题是，在Chrome中，表单完全没有提交。所以onlclick函数可以正常工作，但仅此而已。
在FF和IE中，一切正常 - 一开始JavaScript会对按钮进行更改，然后正常的表单提交流完成。

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中破解
Thanks！

Would appreciate any ideas why it breaks in Chrome. Thanks!

推荐答案

尽管在理论上，您的代码应该可以工作，但Chrome认为， a similar href =https://stackoverflow.com/questions/5445431/jquery-disable-submit-button-on-form-submission>类似的问题，并在

Eventhough in theory, your code should work, Chrome thinks otherwise, as noted in in this similar SO question and in this chrome groups discussion (may be a bug, may be the intended design).

首先，当你想允许/阻止点击时，你应该使用 onclick =return someFunction（）而不是 onclick =someFunction（） - 那么只有当该函数返回true时，动作才会通过。

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.

现在，你必须从你的函数提交表单：

Now to make this work, you would have to submit the form from your function:

$(this).parents('form').submit()

这篇关于Onclick JavaScript停止表单在Chrome中提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！