jQuery: delay disable button onclick after the form submission?

Question

So right now I have this:

HTML:

<input type="submit" class="usp-submit usp-submit-default"  onclick="return change(this); "  id="btnSubmit" />

jQuery:

function change( el )

{
    if ( el.value === "Send" )
        el.value = "Sending";
    else
        el.value = "Please wait...";

$("#btnSubmit").attr("disabled", true);
    
}

This does disable the input button and change the value to "Please wait", but the form is not submitted.

I assume this disables the button in the first place and doesn't perform the send action.

I have read somewhere that you can add a delay before .attr("disabled", true) for a few milliseconds so that the form would be submitted first.

Any help from jQuery experts would be appreciated.

Thanks.

Answer 1

If you want to delay, you can use the vanilla js way, setTimeout()

function change( el )
{
    if ( el.value === "Send" )
        el.value = "Sending";
    else
        el.value = "Please wait...";

    setTimeout( () => $("#btnSubmit").prop("disabled", true) , 0);
}