Change text on submit button after submission

Question

Is it possible to change the text on the submit button after submission? Example the button has the word Submit and after the user submits the form, the button will now say Done. If so, how is it done?

Thanks!

Answer 1

$('#id_of_button').click(function( event ) {
    $('#id_of_button').prop('value', 'Text you want to change to');
});

Edit: Actually, a better solution would probably be to bind it to the submit handler of the form.

Answer 2

If you're using AJAX to process the form, you could simply have the button text change in the success callback of the $.ajax jQuery method like so:

$.ajax({
    ...
    success: function(data){
        ...
        // If using an <input/> as the submit button
        $('BUTTON_SELECTOR').prop('value', 'Done');

        // If using a <button/> as the submit button
        $('BUTTON_SELECTOR').text('Done');
        ...
    }
    ...
});

I hope this helps!

Answer 3

Yes, it is possible & you can have it done with this:

<form name="MyForm">
<input type=button name="b1" value="Submit" onclick="javascript:document.MyForm.b1.value='Done'">
</form>

FIDDLE EXAMPLE HERE

Answer 4

We can do by using the below code. It will make the submit button as 'Uploading please wait...' with the spinner icon.

<button name='button' type='submit' class='btn btn-primary right' data-disable-with="<i class='fa fa-spinner fa-spin'></i>Uploading please wait...">Save</button>