Prevenir valores predeterminados en el formulario Enviar jQuery

¿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();
  });

Prueba esto:

$("#cpa-form").submit(function(e){
    return false;
});

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/

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.

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.

$('#cpa-form input[name="Next"]').on('click', function(e){
    e.preventDefault();
});

$(document).ready(function(){
    $("#form_id").submit(function(){
        return condition;
    });
});

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();
  });
}

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           
    })
});

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();
   ...
});

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

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.