Prevenir valores predeterminados en el formulario Enviar jQuery

138

¿Qué tiene de malo esto?

HTML:

<form action="http://localhost:8888/bevbros/index.php/test" method="post" accept-charset="utf-8" id="cpa-form" class="forms">        
      <input type="text" name="zip" value="Zip code" id="Zip" class="required valid">      
      <input type="submit" name="Next" value="Submit" class="forms" id="1">
  </form>

jQuery:

$("#cpa-form").submit(function(e){
    e.preventDefault();
  });
djreed
fuente
12
Funciona bien aquí . ¿Puedes publicar más información en tu pregunta? Si alert()en el controlador de envío se llama? De lo contrario, podría ser que hay un error en su script que impide que el controlador de eventos esté conectado correctamente. ¿Algo en la consola de error?
Ciudad
3
Ese enlace es interno y no nos sirve de nada.
Steve Robbins
Tal vez una versión anterior fue almacenada en caché. Parece estar trabajando ahora.
djreed
1
posible duplicado de event.preventDefault () vs. return false
Liam
2
! Asegúrese de que el código JavaScript se ejecute después de que DOM esté listo.
remolque

Respuestas:

175

Prueba esto:

$("#cpa-form").submit(function(e){
    return false;
});
Jordan Brown
fuente
12
Funciona, pero ¿por qué no funciona el método preferido para evitar el trabajo predeterminado?
MikeJ
26
Vea esta pregunta para una mejor explicación: stackoverflow.com/questions/1357118/…
Jordan Brown
8
Esta es la respuesta incorrecta. e.preventDefault()funciona bien con un envío de formulario, el problema radica en otra parte del código del OP. El uso return false podría tener consecuencias no deseadas.
Chuck Le Butt
58

Use la nueva sintaxis de evento "on".

$(document).ready(function() {
  $('form').on('submit', function(e){
    // validation code here
    if(!valid) {
      e.preventDefault();
    }
  });
});

Cita: https://api.jquery.com/on/

scarver2
fuente
2
Hola. Esto no funciona para mi. (sí, puse mi código dentro $(document).ready()) ¿Cómo hago que funcione?
Gui Imamura
1
@GuiImamura Necesita más información. ¿Estableció la variable válida en trueo false? ¿Puedes recrear tu código en jsfiddle.net y enviar el enlace? Intente agregar un alert()para confirmar que la función se está activando. Algunas personas han informado que agregar e.stopPropagation();después e.preventDefault();detiene otros disparos encadenados.
scarver2
Hola, estoy usando $('#myFormID').validationEngine('validate')desde jQuery ValidationEngine tan variables valid, para comprobar la entrada de carnero es una dirección válida de correo electrónico. Sin embargo, quiero que evite el comportamiento predeterminado de cualquier manera; no preventDefaulttienen que estar dentro del bloque if, no antes?
Gui Imamura
@GuiImamura Me alegra saber que lo hiciste funcionar. El preventDefaultestá dentro del si no es válida bloque para detener la presentación del formulario. En otras palabras, si es válido , use el comportamiento predeterminado del formulario.
scarver2
13

Creo que las respuestas anteriores son correctas, pero eso no indica por qué el submitmétodo no funciona.

Bueno, el submitmétodo no funcionará si jQuery no puede obtener el formelemento, y jQuery no da ningún error al respecto. Si su secuencia de comandos se coloca en la cabecera del documento, asegúrese de que el código se ejecuta después de que DOMesté listo . Entonces, $(document).ready(function () { // your code here // });resolverá el problema.

La mejor práctica es, siempre coloque su secuencia de comandos en la parte inferior del documento.

remolcar
fuente
11

Esta es una pregunta antigua, pero la respuesta aceptada aquí realmente no llega a la raíz del problema.

Puedes resolver esto de dos maneras. Primero con jQuery:

$(document).ready( function() { // Wait until document is fully parsed
  $("#cpa-form").on('submit', function(e){

     e.preventDefault();

  });
}

O sin jQuery:

// Gets a reference to the form element
var form = document.getElementById('cpa-form');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(e) {

  e.preventDefault();

});

No necesita usar return falsepara resolver este problema.

Chuck Le Butt
fuente
Reemplacé el detector de eventos nativo js en lugar del detector de eventos jquery y funciona. gracias por la idea
Orhan Gazi
6
$('#cpa-form input[name="Next"]').on('click', function(e){
    e.preventDefault();
});
Crisalin Petrovschi
fuente
Esto funciona perfecto para mí en una página donde tengo un formulario del lado del cliente dentro de un formulario del lado del servidor.
Liknes
3
$(document).ready(function(){
    $("#form_id").submit(function(){
        return condition;
    });
});
shraddha Dharmamer
fuente
2

Su código está bien solo necesita colocarlo dentro de la función de listo.

$(document).ready( function() {
  $("#cpa-form").submit(function(e){
     e.preventDefault();
  });
}
Jai Kathuria
fuente
Este consejo ya lo proporcionan otras respuestas. Elimine esta respuesta para reducir la hinchazón de la página. Puede votar las otras respuestas que representan el mismo sentimiento.
mickmackusa
2

DEPRECATED : esta parte está desactualizada, así que no la use.

También puede probar este código si, por ejemplo, luego ha agregado formularios dinámicos. Por ejemplo, cargó una ventana asíncrona con ajax y desea enviar este formulario.

$('#cpa-form').live('submit' ,function(e){
    e.preventDefault();      
    // do something
});

ACTUALIZACIÓN : debe usar el método jQuery on () e intentar escuchar el DOM del documento si desea manejar contenido agregado dinámicamente.

Caso 1, versión estática: si solo tiene unos pocos oyentes y su formulario para manejar está codificado, puede escuchar directamente en "nivel de documento". No usaría los oyentes a nivel de documento, pero trataría de profundizar en el árbol de la fatalidad porque podría conducir a problemas de rendimiento (depende del tamaño de su sitio web y su contenido)

$('form#formToHandle').on('submit'... 

O

$('form#formToHandle').submit(function(e) {
    e.preventDefault();      
    // do something
});

Caso 2, versión dinámica: si ya escucha el documento en su código, entonces esta forma sería buena para usted. Esto también funcionará para el código que se agregó más tarde a través de DOM o dinámico con AJAX.

$(document).on('submit','form#formToHandle',function(){
   // do something like e.preventDefault(); 
});

O

$(document).ready(function() {
    console.log( "Ready, Document loaded!" );

    // all your other code listening to the document to load 

    $("#formToHandle").on("submit", function(){
        // do something           
    })
});

O

$(function() { // <- this is shorthand version
   console.log( "Ready, Document loaded!" );

    // all your other code listening to the document to load 

    $("#formToHandle").on("submit", function(){
        // do something           
    })
});
NFlows
fuente
77
.live()está en desuso desde jQuery 1.7 y se elimina desde 1.9. Usar en su .on()lugar.
Hank
0

Hola buscó una solución para hacer que un formulario Ajax funcione con el Administrador de etiquetas de Google (GTM), el retorno falso impidió la finalización y enviar la activación del evento en tiempo real en Google Analytics fue cambiar el retorno falso por e.preventDefault () ; que funcionó correctamente sigue el código:

 $("#Contact-Form").submit(function(e) {
    e.preventDefault();
   ...
});
Navi
fuente
0

e.preventDefault () funciona bien solo si no tiene problemas con sus javascripts, verifique sus javascripts si e.preventDefault () no funciona, es probable que otras partes de su JS no funcionen también

ndoty
fuente
0

Bueno, encontré un problema similar. El problema para mí es que el archivo JS se carga antes de que ocurra el render DOM. Así que mueve tu <script>al final de la <body>etiqueta.

o usar diferir.

<script defer src="">

así que e.preventDefault()tenga la seguridad de que debería funcionar.

Guerra Vignesh
fuente