13

我有以下表格：

<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 中中断。谢谢！

4

2 回答 2

8

尽管从理论上讲，您的代码应该可以工作，但 Chrome 不这么认为，正如在这个类似的 SO 问题和这个 chrome 小组讨论中所指出的（可能是一个错误，可能是预期的设计）。

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

现在要完成这项工作，您必须从您的函数提交表单：

$(this).parents('form').submit()
于 2013-05-31T23:10:22.130 回答
2

onclick="someFunctionToDoJob(); submit();"你应该在你的表格中使用这样的。

在你someFunctionToDoJob();添加这个document.hereNameYourForm.submit();

于 2014-02-17T21:45:07.677 回答