14

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!

Volder
  • 972
  • 4
  • 13
  • 29
  • Any errors in the console? – Barmar May 31 '13 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 May 31 '13 at 22:55
  • I've reproduced this in jsfiddle: http://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 May 31 '13 at 23:00
  • 1
    You could manually do `form.submit()` – Isaac May 31 '13 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 May 31 '13 at 23:06

2 Answers2

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()
Community
  • 1
  • 1
DannyB
  • 12,810
  • 5
  • 55
  • 65
  • I'm not changing the behavior of the submit function as in the link provided. I don't redefine submit. I'm just adding onclick event for button. Added "return" before the name of the function - same behavior. Adding form submit in javascript solves the problem as mentioned in the comments above, but still not clear what's wrong with my code. – Volder May 31 '13 at 23:17
  • 2
    The second link you added - seems to be an answer, so disabling button on the fly doesn't work in Chrome. Seems like a bug. OK, will remember this. Thanks! – Volder May 31 '13 at 23:21
  • 1
    When I said "changing the form behavior" I meant this: When you redirect the onclick, you provide an alternative route for that action. It just seems like Chrome and other browsers interpret that differently, and for Chrome, disabling that same control that invoked the action means disabling its action. It may be a bug in Chrome/webkit, but since this "bug" is so old, it is not far off to assume that maybe it is the intended design by the webkit guys. Who knows. – DannyB May 31 '13 at 23:24
  • OK, thanks. I've accepted your answer as you've given a link to the group discussion, where it is clear, that in the way I used it - it won't work. – Volder May 31 '13 at 23:40
  • Great dude, That helped me in my issue. – kwoxer May 23 '16 at 12:11
  • I did an alternative version of this, which broke my button in firefox: `element.parentElement.submit();`. Can anyone summarize what the chrome groups discussion settled on? The link doesn't work anymore. – daraul Aug 01 '23 at 21:21
2

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

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

isherwood
  • 58,414
  • 16
  • 114
  • 157
Şήøωў
  • 37
  • 5
  • just adding the `submit();` to the rest of my code into the `onclick`-attribute fixed it for me. This is the easiest way I found through all my reading. No jQuery, no getting things by IDs. Maybe not scalable, but surely readable for the noob. – Chris Apr 30 '18 at 08:57