Usando JQuery – evitando que el formulario se envíe

¿Cómo evito que un formulario se envíe usando jquery?

Intenté todo: veo 3 opciones diferentes que probé a continuación, pero no funcionará:

$(document).ready(function() { //option A $("#form").submit(function(e){ e.preventDefault(); }); //option B $("#form").submit(function(e){ stopEvent(e); }); //option C $("#form").submit(function(){ return false; }); }); 

¿Qué podría estar mal?

Actualización – aquí está mi html:

  

¿Hay algo mal aquí?

Dos cosas se destacan:

  • Es posible que su nombre de form no sea form . Más bien, consulte la etiqueta al soltar el #.
  • Además, e.preventDefault es la syntax de JQuery correcta, por ejemplo

      //option A $("form").submit(function(e){ e.preventDefault(); }); 

La opción C también debería funcionar. No estoy familiarizado con la opción B

Un ejemplo completo:

       
Search

Probablemente tenga pocos formularios en la página y usar $ (‘formulario’). Submit () agrega este evento a la primera aparición del formulario en su página. Use el selector de clase en su lugar, o intente esto:

 $('form').each(function(){ $(this).submit(function(e){ e.preventDefault(); alert('it is working!'); return false; }) }) 

o mejor versión de esto:

 $(document).on("submit", "form", function(e){ e.preventDefault(); alert('it works!'); return false; }); 

Prevalecer por defecto / prevenir el envío de formularios

 e.preventDefault(); 

Para detener el uso de bubling del evento

 e.stopPropagation(); 

Para evitar el envío de formularios, ‘return false’ debería funcionar también.

También tuve el mismo problema. También intenté con lo que habías probado. Luego cambio mi método para no usar jquery pero usando el atributo “onsubmit” en la etiqueta del formulario.

 

Funciona.

Pero, cuando traté de poner el valor de retorno falso solo en “thefunction ()”, no impide el proceso de envío, así que debo poner “return false;” en el atributo onsubmit. Entonces, concluyo que mi aplicación de formulario no puede obtener el valor de retorno de la función Javascript. No tengo ninguna idea al respecto.

Tuve el mismo problema y lo resolví de esta manera (no es elegante, pero funciona):

 $('#form').attr('onsubmit','return false;'); 

Y tiene la ventaja, en mi opinión, de que puede revertir la situación en cualquier momento que desee:

 $('#form').attr('onsubmit','return true;'); 

Cuando estoy usando la etiqueta

sin el atributo id="form" y la llamo por su nombre de etiqueta directamente en jquery, funciona conmigo.
tu código en el archivo html:

 

y en el script de Jquery:

 $(document).ready(function() { $('form').submit(function(evt){ evt.preventDefault();// to stop form submitting }); }); 

Olvidas la identificación del formulario, y funciona

 $('form#form').submit(function(e){ e.preventDefault(); alert('prevent submit'); }); 
 // Prevent form submission $( "form" ).submit(function( event ) { event.preventDefault(); }); 

desde aquí: https://api.jquery.com/submit-selector/ (página interesante sobre tipos de envío)

Adjunte el evento al elemento de envío, no al elemento de formulario. Por ejemplo, en tu html haz esto

 $('input[type=submit]').on('click', function(e) { e.preventDefault(); }); 

$("#form') busca un elemento con id="form" .

$('form') busca el elemento de formulario