CODEWITHSUNDEEP
javascriptjqueryforms
Lexib0y
Lexib0y

Reputation: 500

disable submitbutton on click is too slow, delayed

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

Upvotes: 1

Views: 2539

Answers (4)

tgpatel
tgpatel

Reputation: 144

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

Upvotes: 1

erikrunia
erikrunia

Reputation: 2383

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.

Upvotes: 2

Neil Cresswell
Neil Cresswell

Reputation: 1165

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.

Upvotes: 2

CRABOLO
CRABOLO

Reputation: 8793

$('#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.

Upvotes: 2

Related Questions