Foros del Web » Programando para Internet » Jquery »

cambiar texto del boton y desactivarlo de FORM

Estas en el tema de cambiar texto del boton y desactivarlo de FORM en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/06/2022, 06:26
 
Fecha de Ingreso: enero-2002
Mensajes: 1.174
Antigüedad: 22 años, 4 meses
Puntos: 21
cambiar texto del boton y desactivarlo de FORM

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
  #2 (permalink)  
Antiguo 06/07/2022, 09:21
Avatar de PIRRUMAN  
Fecha de Ingreso: febrero-2006
Ubicación: Monterrey, Nuevo León
Mensajes: 633
Antigüedad: 18 años, 4 meses
Puntos: 53
Respuesta: cambiar texto del boton y desactivarlo de FORM

debes colocarle una clase o un id al elemento

Código HTML:
Ver original
  1. <form id='formEnviar' action='pagina_enviar'>
  2.     <input type='button' id='btnEnviar' value='enviar'>
  3. </form>

Código Javascript:
Ver original
  1. $("#btnEnviar").on('click',function(){
  2.     $("#btnEnviar").attr("disabled", true);
  3.     $("#btnEnviar").val("Enviando..");
  4.     $("#formEnviar").submit();
  5. });
__________________
“Prefiero ser un tonto momentaneo que un eterno ignorante”
“¡El éxito es resultado de los aciertos,los aciertos resultado de la experiencia y la experiencia resultado de los errores!”

Última edición por Alexis88; 23/07/2022 a las 03:48 Razón: Highlights
  #3 (permalink)  
Antiguo 12/07/2022, 00:30
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 7 meses
Puntos: 977
Respuesta: cambiar texto del boton y desactivarlo de FORM

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:
Ver original
  1. //Variable comodín
  2. let enviar = true;
  3.  
  4. $("#idDelForm").on("submit", event => {
  5.     //Cancelas el envío
  6.     event.preventDefault();
  7.  
  8.     //Si el comodín es "true", se envían los datos
  9.     if (enviar){
  10.         //Cambias el valor del comodín para evitar otro envío mientras el actual se procesa
  11.         enviar = false;
  12.  
  13.         //Cambias el texto del botón
  14.         $("#idDelBotón").val("Nuevo texto");
  15.  
  16.         //Realizas el envío (puedes usar el método $.get(), $.ajax() o el que consideres conveniente)
  17.         $.post("destino.php", $("#idDelForm").serialize())
  18.             .done(response => {
  19.                 //Cambias el valor del comodín para permitir otro envío
  20.                 enviar = true;
  21.  
  22.                 //Cambias el texto del botón
  23.                 $("#idDelBotón").val("Viejo texto");
  24.  
  25.                 //Aquí puedes manipular la respuesta del servidor
  26.                 //Por ejemplo: console.log(response);
  27.             });
  28.     }
  29. });

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Etiquetas: boton, form
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:26.