Changing button text on click – as well as reducing form double clicks

Submit Button

Say you have a button that you want people to click to submit a form. Like this one:

<form>
...
<input type="submit" value="Submit Lead" id="submit_lead" class="btn btn-success"> 
...
</form>

And you want to have the text change when they click the button and you are doing some form processing (like sending an email).

But you also want to stop double submissions of the said form on the client side.

I’ve found this code to work.

Please let me know if there is a better way!

$(function() {
    $('#submit_lead').dblclick(false);
});

$("#submit_lead").click(function(event){
    event.preventDefault();
    $("#submit_lead").prop('value',"Submitting...");
    $("#submit_lead").prop('disabled',true);
    $('form').submit();
});

Leave a Reply