Onclick javascript stops submitting a form in Chrome
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" /> <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 will disable the buttons and display an ajax-load image while submitting the form. So that the user does not press the button twice.
The problem is, in Chrome, the form just doesn't submit. So the onlclick function works fine, but that’s it. In FF and IE, everything works fine - at the beginning of javascript makes changes to the buttons, and then the normal form flow is executed.
Any ideas why this breaks in Chrome would be needed. Thanks!
Although theoretically your code should work, Chrome thinks differently, as indicated in this similar SO question and in this discussion of chrome groups (maybe an error, maybe the intended design).
Firstly, if you want to allow / block a click, you should use onclick="return someFunction()" , and not onclick="someFunction()" - then the action will be performed only if this function returns true.
Now, to complete this work, you need to submit the form from your function:
$(this).parents('form').submit() You should use this in your onclick = "someFunctionToDoJob (); submit ();" on your form. And on your someFunctionToDoJob (); add this document .hereNameYourForm.submit ();