Onclick javascript stops form submit in Chrome - Stack Overflow

admin管理员组

文章数量:1230166

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!

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!

• javascript
• forms
• google-chrome
• submit

Share Improve this question Follow asked May 31, 2013 at 22:46 VolderVolder 99244 gold badges1414 silver badges3131 bronze badges 5

• Any errors in the console? – Barmar Commented May 31, 2013 at 22:55
• No errors at all in the console. It simply stops after javascript, so the buttons are disabled and ajax-load image is shown, but there is no progress with form submit. – Volder Commented May 31, 2013 at 22:55
• I've reproduced this in jsfiddle: jsfiddle.net/barmar/64awN/1. I thought the problem might be that you needed to do onclick="return disableButtons(this)", but fixing that didn't help. – Barmar Commented May 31, 2013 at 23:00
• 1 You could manually do form.submit() – Isaac Commented May 31, 2013 at 23:01
• 1 @Isaac, seems to be a solution, but what's wrong with my current code? Is it a Chrome bug or am I missing something simple? – Volder Commented May 31, 2013 at 23:06

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 10

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

You should use like this in your onclick="someFunctionToDoJob(); submit();" on your form.

And at your someFunctionToDoJob(); add this document.hereNameYourForm.submit();

本文标签： Onclick javascript stops form submit in ChromeStack Overflow