jQuery en el Formulario de Envío

Utilice la nueva sintaxis de eventos "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 todas correctas, pero eso no indica por qué el método submit no funciona.

Bueno, el método submit no funcionará si jQuery no puede obtener el elemento form, y jQuery no da ningún error al respecto. Si su script se coloca en el encabezado del documento, asegúrese de que el código se ejecuta después de DOM es listo. Entonces, $(document).ready(function () { // your code here // }); resolverá el problema.

La mejor práctica es, siempre ponga su script en la parte inferior del documento.

$('#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 ready.

$(document).ready( function() {
  $("#cpa-form").submit(function(e){
     e.preventDefault();
  });
}

OBSOLETO - esta parte está desactualizada, así que por favor no la uses.

También puede probar este código, si, por ejemplo, ha agregado formularios dinámicos más adelante. Por ejemplo, cargó una ventana asincrónica con ajax y desea enviar este formulario.

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

UPDATE - debe usar el método jQuery on() y tratar de escuchar el DOM del documento si desea manejar contenido agregado dinámicamente.

Caso 1, versión estática: Si tiene solo unos pocos oyentes y su formulario para manejar está codificado, entonces puede escuchar directamente en "nivel de documento". No usaría los oyentes a nivel de documento, pero intentaría profundizar en el árbol de doom 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 manera sería buena para usted. Esto también funcionará para código que se añadió 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           
    })
});

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

Puede 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 es necesario usar return false para resolver este problema.

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

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