我有以下表格:
<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 onclick
我在提交表单时禁用按钮并显示 ajax 加载图片。这样用户就不会点击提交两次。
问题是在 Chrome 中表单根本没有提交。所以 onlclick 函数工作正常,但仅此而已。
在 FF 和 IE 中,一切工作正常 - 一开始 javascript 对按钮进行更改,然后完成表单提交的正常流程。
如果有任何关于它在 Chrome 中崩溃的想法,我将不胜感激。
谢谢!
尽管从理论上讲,您的代码应该可以工作,但 Chrome 却认为不然,如本中所述类似的问题 https://stackoverflow.com/questions/5445431/jquery-disable-submit-button-on-form-submission and in 这个 chrome 小组讨论 http://productforums.google.com/forum/#!topic/chrome/M7y2gZDvXAk(可能是一个错误,可能是预期的设计)。
首先,当您想要允许/阻止点击时,您应该使用onclick="return someFunction()"
并不是onclick="someFunction()"
- 那么只有当该函数返回 true 时,该操作才会执行。
现在要完成这项工作,您必须从您的函数中提交表单:
$(this).parents('form').submit()
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)