Zapobiegaj domyślnemu przesyłaniu formularza jQuery

Co w tym złego?

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

Spróbuj tego:

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

Użyj nowej składni zdarzenia „on”.

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

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

Uważam, że wszystkie powyższe odpowiedzi są poprawne, ale to nie wyjaśnia, dlaczego submitmetoda nie działa.

Cóż, submitmetoda nie zadziała, jeśli jQuery nie może pobrać formelementu, a jQuery nie daje z tego powodu żadnego błędu. Jeśli skrypt jest umieszczony w nagłówku dokumentu, upewnij się, że kod jest uruchamiany po DOMto gotowy . Więc $(document).ready(function () { // your code here // });rozwiąże problem.

Najlepszą praktyką jest zawsze umieszczanie skryptu na dole dokumentu.

To odwieczne pytanie, ale przyjęta tutaj odpowiedź nie prowadzi tak naprawdę do źródła problemu.

Możesz rozwiązać ten problem na dwa sposoby. Najpierw z jQuery:

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

     e.preventDefault();

  });
}

Lub bez 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();

});

Nie musisz używać return falsedo rozwiązania tego problemu.

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

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

Twój kod jest w porządku, wystarczy umieścić go w gotowej funkcji.

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

DEPRECATED - ta część jest nieaktualna, więc nie używaj jej.

Możesz także wypróbować ten kod, jeśli na przykład później dodano dynamiczne formularze. Na przykład załadowałeś okno asynchronicznie z ajaxem i chcesz przesłać ten formularz.

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

UPDATE - powinieneś użyć metody jQuery on () i spróbować odsłuchać DOM dokumentu, jeśli chcesz obsługiwać dynamicznie dodawaną zawartość.

Przypadek 1, wersja statyczna: Jeśli masz tylko kilku odbiorników, a formularz do obsługi jest zakodowany na stałe, możesz słuchać bezpośrednio na „poziomie dokumentu”. Nie użyłbym słuchaczy na poziomie dokumentu, ale spróbuję zagłębić się w drzewko zagłady, ponieważ może to prowadzić do problemów z wydajnością (zależy od rozmiaru Twojej witryny i zawartości)

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

LUB

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

Przypadek 2, wersja dynamiczna: Jeśli już słuchałeś dokumentu w swoim kodzie, ten sposób byłby dla Ciebie dobry. Będzie to również działać dla kodu, który został dodany później przez DOM lub dynamiczny z AJAX.

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

LUB

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

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

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

LUB

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

Witam szukał rozwiązania, aby formularz Ajax działał z Menedżerem tagów Google (GTM), zwrot false uniemożliwił zakończenie i przesłanie aktywacji zdarzenia w czasie rzeczywistym w rozwiązaniu Google Analytics polegało na zmianie zwrotu false przez e.preventDefault () ; który działał poprawnie, jest zgodny z kodem:

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

e.preventDefault () działa dobrze tylko wtedy, gdy nie masz problemu z skryptami javascripts, sprawdź swoje javascripts, jeśli e.preventDefault () nie działa, prawdopodobnie inne części twojego JS również nie działają

Cóż, napotkałem podobny problem. Problem polega na tym, że plik JS jest ładowany przed renderowaniem DOM. Więc przenieś swój <script>na koniec <body>tagu.

lub użyj odroczenia.

<script defer src="">

więc możesz e.preventDefault()mieć pewność, że będzie działać.