Change Button Text on Click, Then Change It Back

This small jQuery snippet gives visitors instant feedback when they click a submit button: the button text changes to a status message, then switches back after two seconds. Here it targets .ur-submit-button, the submit button class used by the User Registration & Membership plugin for WordPress (formerly User Registration), but it works with any button.

Add it to a JavaScript file that loads after jQuery.

$(".ur-submit-button").click(function() {

    var $this = $(this);
    $this.text('Creating your account...');
    //$this.attr('disabled', true);
    setTimeout(function() {
        //$this.attr('disabled', false);
        $this.text('Register');
    }, 2000);

});

How it works

• $(".ur-submit-button").click() runs the function every time the button is clicked. Replace the selector with your own button’s class or ID.
• var $this = $(this); saves the clicked button. Inside the setTimeout() callback, this no longer points to the button, so the saved copy is used there.
• .text() swaps the label to Creating your account..., and after 2000 milliseconds it sets it back to Register. Change both strings and the delay to suit your form.
• The two commented-out lines would disable the button while the message shows and enable it again afterwards. They’re inactive in this version.

Things to keep in mind

The label goes back after a fixed two seconds, whether or not the request has finished, so treat it as a visual cue rather than a real loading state.

If your button is an <input type="submit"> instead of a <button>, .text() won’t change it; use .val() instead.

In WordPress, jQuery runs in no-conflict mode, so $ isn’t available globally. Wrap the code in jQuery(function($) { ... }); so $ works and the button exists before the handler is attached. Without it you’d see $ is not a function in the browser console.

Related articles

• a real-time password match checker: another jQuery helper for the same registration form
• changing form text on page load with jQuery: when the text should change without a click