1

I have a large form that which is posted using jQuery forms and jQuery validator plugin. The form is quite large and when you push the submit button, it takes some time before anything happens . To prevent people from clicking the submit button multiple times, I am using the following in the document_ready function:

$('#submitbutton').click(function(){
    $(this).attr("disabled", "disabled");
    $(this).parents('form').submit();
});

This is the button: <input id="submitbutton" type="button" value="Заказать!" />

This does disable the button, but not immediately, but only just before the submit takes place, which is not what I want. What would be the best way to disable the button immediately?

I had someone clicking the button 5 or 6 times which made a mess (it is a simple order form that I wrote for internal use). With this delay it is hard to take any other measures to prevent the exact same data to be posted over and over on the client side.

Anyway, there should be an elegant way to solve this on the client side too...

For now I can only solve it on the server side. (which should be done anyway).

Lexib0y
  • 519
  • 10
  • 27
  • The button was a submit button, I just changed the type to button. I put it in the Question. It did not speed up anything ;( – Lexib0y Jan 12 '14 at 23:51
  • I am now looking into the best way to get the button disabled before the validator runs. Best way I found so far is to add a function to the validator. But as far as I understand, that means it will be executed for all the data fields. (which is not what I want, or should want :)) – Lexib0y Jan 13 '14 at 07:57
  • In the end I solved it by giving the form a unique number and check for resubmission on the server side (php). Generally speaking this is a good measure. All other methods so far seem to not be fool proof. – Lexib0y Mar 05 '14 at 10:49

4 Answers4

2
$('#submitbutton').click(function(){
    $(this).hide().attr("disabled", "disabled");
    $(this).parents('form').submit();
});

I find that using .hide() works great.

If for some reason you want the button to appear again. You an do something like this.

$('#submitbutton').click(function(){
    $(this).hide().attr("disabled", "disabled");
    $(this).parents('form').submit();
    $(this).delay(3000).fadeIn();
});

This will wait 3 seconds, and then fade in.

CRABOLO
  • 8,605
  • 39
  • 41
  • 68
  • Thanks for the suggeston of hide(), but it did not speed up anything unfortunately. – Lexib0y Jan 12 '14 at 23:56
  • @Lexib0y Hmm.. It works great for me, I use it all the time. You can also try .hide(0) to see if that helps at all. – CRABOLO Jan 13 '14 at 00:01
  • I tougth it worked for me, but not, there is some kind of error in jscript that delay the sumbit (I checked on Chrome), and when transcend the situation then submit the form.. @Roombatron5000 – Artemination Mar 02 '15 at 19:32
  • The error is: Uncaught RangeError: Maximum call stack size exceeded – Artemination Mar 02 '15 at 19:32
  • @Artemination many questions about that error on here thankfully :) here's one http://stackoverflow.com/questions/7658775/chrome-jquery-uncaught-rangeerror-maximum-call-stack-size-exceeded – CRABOLO Mar 02 '15 at 23:28
2

How about storing if you've got a click in progress and checking that? e.g.

$('#submitbutton').click(function()
{

    if ($(this).data('clicked') === undefined)
    {
        $(this).data('clicked') = 'clicked';
        $(this).parents('form').submit();
    }
});

You should still hide or disable the button, and put up an hourglass or visual indicator that the form has been submitted.

Neil Cresswell
  • 1,145
  • 8
  • 20
2

Does your form or submit button call some type of validation that is taking a lot of time before it gets to actually posting the data?

if so add the .hide() at the top of the validation javascript.

erikrunia
  • 2,371
  • 1
  • 15
  • 22
  • Yes, as I wrote, I do use the jQuery Validation plugin. It only has to check two mandatory fields, but I guess it has to go through the whole form data in order to do that. – Lexib0y Jan 13 '14 at 00:13
  • yes, do you have a spot in the code that you can hide your element before the validation kicks off? And if so does that solve your issue? – erikrunia Jan 13 '14 at 00:28
  • I will try to find this, I will post my findings. – Lexib0y Jan 13 '14 at 00:44
  • I have not actually solved the problem yet because I had no time yet, but I now know what the problem is. I have studied and it seems the best way to solve is to add the disable button code to the validator as an extra function. When done I will post here the final solution. – Lexib0y Jan 14 '14 at 09:35
  • 1
    In the end I solved it by giving the form a unique number and check for resubmission on the server side (php). Generally speaking this is a good measure. All other methods so far seem to not be fool proof. – Lexib0y Mar 05 '14 at 10:47
1

Probable reason I can think of is that the button type in your form would be submit and hence when you click the form it's getting submitted.

Try changing your button type or add preventDefault in click function.

Edit: Try this way.

<form id="target" action="/">
    <input type="text" value="Hola">
    <input type="submit" value="Submit">
</form>

and then bind the event handle like this

$( "#target" ).submit(function( event ) {
    alert( "Handler called." );
    event.preventDefault();
});
tgpatel
  • 134
  • 5