Impedisci impostazione predefinita su modulo Invia jQuery

Cosa c'è di sbagliato in questo?

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

Prova questo:

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

Utilizzare la nuova sintassi dell'evento "on".

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

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

Credo che le risposte di cui sopra siano tutte corrette, ma ciò non indica perché il submitmetodo non funziona.

Bene, il submitmetodo non funzionerà se jQuery non è in grado di ottenere l' formelemento e jQuery non fornisce alcun errore al riguardo. Se lo script è inserito nella parte superiore del documento, assicurarsi che il codice eseguito dopo DOMsia pronto . Quindi, $(document).ready(function () { // your code here // });risolverà il problema.

La migliore pratica è, metti sempre la tua sceneggiatura in fondo al documento.

Questa è una domanda antica, ma la risposta accettata qui non arriva davvero alla radice del problema.

Puoi risolvere questo in due modi. Innanzitutto con jQuery:

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

     e.preventDefault();

  });
}

O senza 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();

});

Non è necessario utilizzare return falseper risolvere questo problema.

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

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

Il tuo codice va bene, devi solo inserirlo nella funzione Pronto.

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

DEPRECATO - questa parte è obsoleta, quindi per favore non usarla.

Puoi anche provare questo codice, se ad esempio hai aggiunto moduli dinamici in seguito. Ad esempio hai caricato una finestra asincrona con ajax e vuoi inviare questo modulo.

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

AGGIORNAMENTO : è necessario utilizzare il metodo jQuery on () e provare ad ascoltare il documento DOM se si desidera gestire il contenuto aggiunto dinamicamente.

Caso 1, versione statica: se hai solo pochi ascoltatori e il tuo modulo da gestire è hardcoded, puoi ascoltare direttamente a "livello di documento". Non userei gli ascoltatori a livello di documento ma proverei ad approfondire l'albero del destino perché potrebbe portare a problemi di prestazioni (dipende dalle dimensioni del tuo sito Web e dai tuoi contenuti)

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

O

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

Caso 2, versione dinamica: se ascolti già il documento nel tuo codice, in questo modo andrebbe bene per te. Questo funzionerà anche per il codice che è stato aggiunto in seguito tramite DOM o dinamico 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           
    })
});

Hello ha cercato una soluzione per far funzionare un modulo Ajax con Google Tag Manager (GTM), il reso false ha impedito il completamento e inviare l'attivazione dell'evento in tempo reale sulla soluzione di analisi di google è stato quello di modificare il reso falso da e.preventDefault () ; che ha funzionato correttamente segue il codice:

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

e.preventDefault () funziona bene solo se non hai problemi sui tuoi javascripts, controlla i tuoi javascripts se e.preventDefault () non funziona è probabile che alcune altre parti del tuo JS non funzionino anche

Bene ho riscontrato un problema simile. Il problema per me è che il file JS viene caricato prima che avvenga il rendering DOM. Quindi sposta il tuo <script>alla fine di<body> tag.

o usa il differimento.

<script defer src="">

quindi stai tranquillo e.preventDefault()dovrebbe funzionare.