Using jQuery to change input button text back after a few seconds

Question

I'm using a form and jQuery to make a quick change on a web site. I would like to change the button text to 'Saved!' then change it back to Update after a few seconds so the user can change the value again. Of course they can hit the now 'Saved!' button again, but it doesn't look nice.

$("form.stock").submit(function(){
    // Example Post
    $.post($(this).attr('action'), { id: '123', stock: '1' });
    $(this).find(":submit").attr('value','Saved!');
    // This doesn't work, but is what I would like to do
    setTimeout($(this).find(":submit").attr('value','Update'), 2000);
    return false;
});

SolutionYogi · Accepted Answer · 2009-07-01 20:05:59Z

14

First argument to setTimeout is function. So wrap your code inside an anonymous function and you are good to go.

$("form.stock").submit(function(){
    // Example Post
    $.post($(this).attr('action'), { id: '123', stock: '1' });
    var submit = $(this).find(":submit").attr('value','Saved!'); //Creating closure for setTimeout function. 
    setTimeout(function() { $(submit).attr('value','Update') }, 2000);
    return false;
});

I am not able to test this code right now. Let me know if it doesn't work.

EDIT: As suggested by redsquare, it makes sense to create closure from the submit button itself.

edited Jul 1, 2009 at 20:05

answered Jul 1, 2009 at 19:55

SolutionYogi

32.4k12 gold badges73 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

redsquare Over a year ago

no need to run the submit selector twice, you can put that in a var to use within the setTimeout

BenMorel · Accepted Answer · 2013-12-06 15:26:11Z

5

If it's actually a "button" tag then to change it you would use.

$('#button_id').html('New Text');

Of course if you're preforming this onClick for that button then you could easily just pass (this) into the function as an object and $(this).html('New Text'); instead.

Hope this helps someone.

edited Dec 6, 2013 at 15:26

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered May 18, 2011 at 3:00

RkaneKnight

511 silver badge1 bronze badge

Comments

tvanfosson · Accepted Answer · 2009-07-01 20:03:34Z

2

I would suggest, perhaps, a different (in my opinion better) interface to give feedback than changing the text of the button. You could use jGrowl or the dialog widget to display a message via a callback from the post method.

$("form.stock").submit(function(){
    $.post(
        $(this).attr('action'),
        { id: '123', stock: '1' },
        function() { $.jGrowl("Your update was successfully saved."); }
    );
});

answered Jul 1, 2009 at 20:03

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Comments

Peter · Accepted Answer · 2009-07-01 19:58:59Z

0

You probably want to wrap the action in a function:

setTimeout(function(){$(this).find(":submit").attr('value', 'Update')}, 2000);

answered Jul 1, 2009 at 19:58

Peter

4212 silver badges8 bronze badges

1 Comment

SolutionYogi Over a year ago

I think 'this' inside the setTimeout anonymous function won't work correctly. One needs to use closure to capture 'this'.

redsquare · Accepted Answer · 2009-07-01 20:00:44Z

0

$("form.stock").submit(function(){
    var $form = $(this);
    $.post( $form.attr('action'), { id: '123', stock: '1' } );
    var $submit = $form.find(":submit").attr('value','Saved!');
    window.setTimeout(function() {
         $submit.attr('value','Update') 
    }, 2000);
    return false;
});

answered Jul 1, 2009 at 20:00

redsquare

78.8k21 gold badges155 silver badges160 bronze badges

Collectives™ on Stack Overflow

Using jQuery to change input button text back after a few seconds

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related