Onclick javascript停止在Chrome中提交表单

Question

我有以下表格：

<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的图片。这样该用户就不会单击两次提交。

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

非常感谢有任何想法解释为什么它会在Chrome中损坏。谢谢！

Answer 1

虽然从理论上讲，您的代码应该可以工作，但是Chrome认为，否则，正如本similar SO question和this chrome groups discussion中所述（可能是错误，可能是预期的设计）。

首先，当您要允许/阻止点击时，您应该使用onclick="return someFunction()"而不是onclick="someFunction()"-只有在该函数返回true时，操作才会继续。

Answer 2

您应该在表格的onclick="someFunctionToDoJob(); submit();"中使用此格式。

然后在您的someFunctionToDoJob();处添加此document.hereNameYourForm.submit();