Uso de JQuery: evitar que se envíe el formulario

177

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

Lo intenté todo: vea 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:

    <form id="form" class="form" action="page2.php" method="post"> 
       <!-- tags in the form -->
       <p class="class2">
           <input type="submit" value="Okay!" /> 
       </p>
    </form>

¿Hay algo mal aquí?

jquery forms Lucy Weatherford
fuente
Muestre su HTML porque no hay nada de malo en preventDefault o return false como lo publicó, aparte de que su selector está totalmente equivocado.
Sparky
1
return false;después de que .submit()funcionó para mí! Estaba teniendo el mismo problema
d -_- b
Si se produce un error de JavaScript en el controlador, e.preventDefault();no se alcanza / ejecuta el código.
Tom

Respuestas:

263

Se destacan dos cosas:

  • Es posible que su nombre de formulario no lo sea form. Más bien, consulte la etiqueta soltando el #.

  • También e.preventDefaultes la sintaxis correcta de JQuery, p. Ej.

        //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:

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <script type='text/javascript'>
         $(document).ready(function() {
            //option A
            $("form").submit(function(e){
                alert('submit intercepted');
                e.preventDefault(e);
            });
        });
        </script>
    </head>

    <body>
        <form action="http://google.com" method="GET">
          Search <input type='text' name='q' />
          <input type='submit'/>
        </form>
    </body>
</html>
Philip Fourie
fuente
2
Algo más está mal. Estoy usando esta técnica a diario. La mejor suposición sería que hay errores de JavaScript en la página, ¿tal vez verifíquelo con FireBug?
Philip Fourie
@LucyWeatherford, he actualizado mi respuesta con una muestra que funciona. Quizás veas algo.
Philip Fourie
En su actualización html, noté que tiene un atributo de clase para su formulario. Cambie su selector JQuery de $('#form')a $('.form')para los atributos de clase.
Philip Fourie
1
¡Gracias! Terminé usando su código en la misma página, y funcionó, aunque todavía no estoy seguro de qué estaba mal, pero todo está bien ahora. ¡Gracias!
Lucy Weatherford
1
@ ÂngeloRigo e es simplemente el nombre que le da al parámetro, en este caso es el evento de envío.
squall3d 01 de
34

Probablemente tenga pocos formularios en la página y el uso de $ ('formulario'). Submit () agrega este evento a la primera aparición del formulario en su página. Utilice 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 del mismo:

$(document).on("submit", "form", function(e){
    e.preventDefault();
    alert('it works!');
    return  false;
});
Artem Kiselev
fuente
1
En mi caso, devolver falso era una clave.
elquimista
19

Para evitar el uso predeterminado / evitar el envío del formulario

e.preventDefault();

Para detener el uso de burbujas de eventos

e.stopPropagation();

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

El alfa
fuente
Vea esta respuesta porque jQuery maneja esto de manera diferente. stackoverflow.com/questions/1357118/…
Sparky
1
Marque esto para entender el evento burbujeante quirksmode.org/js/events_order.html
The Alpha
2
El jQuery en estados API: "Volviendo falsa desde un controlador de eventos llamará automáticamente event.stopPropagation()y event.preventDefault()Una. falseValor también se puede pasar por el controlador como una abreviatura de function(){ return false; }".
Paul
7

También tuve el mismo problema. También había intentado lo que tú habías intentado. Luego cambio mi método para no usar jquery sino mediante el uso del atributo "onsubmit" en la etiqueta del formulario.

<form onsubmit="thefunction(); return false;">

Funciona.

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

Luki B. Subekti
fuente
1
Es la diferencia entre false;y return false;. Necesitarías teneronsubmit="return thefunction();"
xr280xr
4

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;');
vinxxe
fuente
Tal vez sería un poco más cómodo simplemente eliminar el atributo al revertir la prevención de envío de formularios$('#form').removeAttr('onsubmit');
barbieswimcrew
4

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();
});
M Weiss
fuente
2

Simplemente puede verificar si el formulario es válido, en caso afirmativo, ejecute la lógica de envío; de lo contrario, muestre un error.

HTML

<form id="form" class="form" action="page2.php" method="post">
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />

    <input type="submit" value="Okay!" />
</form>

Javascript

    $(document).ready(function () {
        var isFormValid = true;

        function checkFormValidity(form){
            isFormValid = true;
            $(form).find(".check-validity").each(function(){
                var fieldVal = $.trim($(this).val());
                if(!fieldVal){
                    isFormValid = false;
                }
            });
        }


        //option A
        $("#form").submit(function (e) {
            checkFormValidity("#form");
            if(isFormValid){
                alert("Submit Form Submitted!!! :D");
            }else{
                alert("Form is not valid :(");
            }
            e.preventDefault();
        });
    });
Code Spy
fuente
1

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

<form action="page2.php" method="post">

y en script Jquery:

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

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

$('form') busca el elemento de formulario

Rahul
fuente
0

Olvida la identificación del formulario y funciona 

$('form#form').submit(function(e){
   e.preventDefault();
   alert('prevent submit');             
});
Shintadoniku Alyssa
fuente
0

Esto también parece funcionar y puede ser un poco más simple:

$('#Form').on('submit',function(){
    return false;
})
Ukuser32
fuente
0

Usando jQuery, puede hacer lo siguiente:

1- Use el evento de envío de formulario nativo con un botón Enviar, mientras evita que el evento se active, luego

2- Verifique el formulario Propiedad válida Esto se puede implementar de la siguiente manera:

1- HTML:

 <form id="yourForm">
    <input id="submit" type="submit" value="Save"/>
</form>

2- Javascript

 $("form").on("submit", function (e) {
        e.preventDefault();
        if ($(this).valid()) {  
           alert('Success!');
        }
    });
Mohamed Nagieb
fuente