Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

200
Views
jquery deshabilita el botón de envío en el envío del formulario

Por alguna razón, aunque este código actualiza la página, no se publican campos...

 $('form').submit(function(){ $('input[type=submit]', this).attr('disabled', 'disabled'); });

¿Hay una mejor manera de codificar esto?

over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

Su código está cambiando la acción de envío del formulario. En lugar de enviar, cambia el atributo del botón.

Prueba esto:

 $('input[type=submit]').click(function() { $(this).attr('disabled', 'disabled'); $(this).parents('form').submit(); });
over 4 years ago · Santiago Trujillo Report

0

He visto algunas maneras de hacer esto:

  • Deshabilitar botones al hacer clic
  • Deshabilitar botones al enviar
  • Deshabilitar formulario al enviar

Pero ninguno parece funcionar como se esperaba, así que creé mi propio método.

Agregue una clase a su formulario llamada submit-once y use el siguiente jQuery:

 $('form.submit-once').submit(function(e){ if( $(this).hasClass('form-submitted') ){ e.preventDefault(); return; } $(this).addClass('form-submitted'); });

Esto agrega otra clase a su formulario: form-submitted . Luego, si intenta enviar el formulario nuevamente y tiene esta clase, jQuery evitará que el formulario se envíe y saldrá de la función al return; y por lo tanto, nada se vuelve a enviar.

Elegí usar $('form.submit-once') en lugar de $('form') porque algunos de mis formularios usan Ajax, que debería poder enviarse varias veces.

Puedes probarlo en este jsFiddle . Agregué target="_blank" al formulario para que pueda probar enviar el formulario varias veces.

Nota al margen: es posible que desee considerar a los usuarios que no son JS evitando también los envíos dobles del lado del servidor. Por ejemplo, tenga una variable de sesión que almacene la última fecha/hora de envío e ignore cualquier envío adicional dentro de los 3 segundos.

over 4 years ago · Santiago Trujillo Report

0

No sé por qué el código en cuestión no funciona. Aquí hay un fragmento de código similar y sencillo y le aconsejo que no complique demasiado las cosas.

 $("form").submit(function () { // prevent duplicate form submissions $(this).find(":submit").attr('disabled', 'disabled'); });

ventajas:

  • funciona bien con la validación de formularios HTML5;
  • está escrito de forma genérica para que pueda reutilizarse "tal cual";
  • funciona si el formulario se envía haciendo clic en el botón Enviar, así como si el formulario se envía por otros medios (como presionar Entrar dentro de una entrada de texto).
over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!