cambiar texto del boton y desactivarlo de FORM

[Bier]

Tengo un Formulario y deseo que al oprimir el botón de ENVIAR:
1- Cambiar el texto del botón
2- Desactivar el botón (Para evitar volverlo a oprimir)

Gracias

[PIRRUMAN]

debes colocarle una clase o un id al elemento

Código HTML:

<form id='formEnviar' action='pagina_enviar'>
    <input type='button' id='btnEnviar' value='enviar'>
</form>
 

Código Javascript:

$("#btnEnviar").on('click',function(){
    $("#btnEnviar").attr("disabled", true);
    $("#btnEnviar").val("Enviando..");
    $("#formEnviar").submit();
});
 

[Alexis88]

Debido a que la pulsación del botón causará que el formulario pase a ser procesado, te sugiero apoyarte en el evento submit y una variable que puedes emplear a manera de activador/desactivador del envío del formulario. Y dado que pretendes cambiar el texto del botón, lo cual me hace suponer que enviarás los datos del formulario por medio de una petición asíncrona (AJAX), será necesario que evites que se ejecute el envío recurriendo al método preventDefault().

Código Javascript:

//Variable comodín
let enviar = true;
 
$("#idDelForm").on("submit", event => {
    //Cancelas el envío
    event.preventDefault();
 
    //Si el comodín es "true", se envían los datos
    if (enviar){
        //Cambias el valor del comodín para evitar otro envío mientras el actual se procesa
        enviar = false;
 
        //Cambias el texto del botón
        $("#idDelBotón").val("Nuevo texto");
 
        //Realizas el envío (puedes usar el método $.get(), $.ajax() o el que consideres conveniente)
        $.post("destino.php", $("#idDelForm").serialize())
            .done(response => {
                //Cambias el valor del comodín para permitir otro envío
                enviar = true;
 
                //Cambias el texto del botón
                $("#idDelBotón").val("Viejo texto");
 
                //Aquí puedes manipular la respuesta del servidor
                //Por ejemplo: console.log(response);
            });
    }
});