Zapobiegaj domyślnemu przesyłaniu formularza jQuery

138

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();
  });
djreed
źródło
12
Działa dobrze tutaj . Czy możesz zamieścić więcej informacji w swoim pytaniu? Jeśli jesteś alert()w module obsługi przesyłania, czy zostanie wywołany? Jeśli nie, może to oznaczać, że w skrypcie jest błąd, który uniemożliwia poprawne połączenie programu obsługi zdarzeń. Coś w konsoli błędów?
Miasto
3
Ten link jest wewnętrzny i nie ma dla nas żadnego znaczenia.
Steve Robbins
Być może została zapisana w pamięci podręcznej starsza wersja. Wygląda na to, że teraz pracuje.
djreed
2
! Upewnij się, że kod javascript działa, gdy DOM jest gotowy.
holowanie

Odpowiedzi:

175

Spróbuj tego:

$("#cpa-form").submit(function(e){
    return false;
});
Jordan Brown
źródło
12
Działa, ale dlaczego nie działa preferowana metoda PreventionDefault?
MikeJ
26
Zobacz to pytanie, aby uzyskać lepsze wyjaśnienie: stackoverflow.com/questions/1357118/ ...
Jordan Brown
8
To jest zła odpowiedź. e.preventDefault()działa dobrze z przesłaniem formularza, problem leży w innym miejscu kodu PO. Używanie return false może spowodować niezamierzone konsekwencje.
Chuck Le Butt,
58

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/

scarver2
źródło
2
Cześć. To nie działa na mnie. (tak, umieściłem kod w środku $(document).ready()) Jak mam to zrobić?
Gui Imamura
1
@GuiImamura Potrzebujesz więcej informacji. Czy ustawiłeś prawidłową zmienną na truelub false? Czy możesz odtworzyć swój kod w jsfiddle.net i wysłać link? Spróbuj dodać znak, alert()aby potwierdzić, że funkcja się uruchamia. Niektórzy ludzie zgłaszali, że dodanie e.stopPropagation();po e.preventDefault();zatrzymaniu innych powiązanych zdarzeń z odpalenia.
scarver2
Witam, używam $('#myFormID').validationEngine('validate')z jQuery validationEngine jako zmiennej valid, aby sprawdzić, czy dane wejściowe są prawidłowym adresem e-mail. Niemniej jednak chcę, aby w obu przypadkach zapobiegało to domyślnemu zachowaniu; nie preventDefaultmuszą być wewnątrz bloku if, a nie przed nim?
Gui Imamura
@GuiImamura Cieszę się, że masz to do pracy. preventDefaultJest w środku , jeśli nie ważnego bloku zatrzymać przedstawienie postaci. Innymi słowy, jeśli jest prawidłowy , użyj domyślnego zachowania formularza.
scarver2
13

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.

holowany
źródło
11

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.

Chuck Le Butt
źródło
Zastąpiłem natywny odbiornik zdarzeń js zamiast nasłuchiwania zdarzeń jquery i to działa. dziękuję za pomysł.
Orhan Gazi
6
$('#cpa-form input[name="Next"]').on('click', function(e){
    e.preventDefault();
});
Crisalin Petrovschi
źródło
Działa to idealnie dla mnie na stronie, na której mam formularz po stronie klienta wewnątrz formularza po stronie serwera.
Liknes
3
$(document).ready(function(){
    $("#form_id").submit(function(){
        return condition;
    });
});
shraddha Dharmamer
źródło
2

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

$(document).ready( function() {
  $("#cpa-form").submit(function(e){
     e.preventDefault();
  });
}
Jai Kathuria
źródło
Ta rada jest już zawarta w innych odpowiedziach. Usuń tę odpowiedź, aby zmniejszyć powiększenie strony. Możesz zagłosować za innymi odpowiedziami, które reprezentują ten sam sentyment.
mickmackusa
2

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           
    })
});
NFlows
źródło
7
.live()jest przestarzały od wersji 1.7 jQuery i usunięty od 1.9. Użyj .on()zamiast tego.
Hank
0

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();
   ...
});
Navi
źródło
0

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ą

ndoty
źródło
0

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ć.

Vignesh War
źródło