Onclick javascript stops form submit in Chrome

Question

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

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

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.

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

Answer 1

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).

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()