2013-02-22 11 views
8

Chcę zapobiec przycisk submit z onclick zdarzenia od złożenia:Prevent złożyć przycisk z onclick zdarzenia od złożenia

$j('form#userForm .button').click(function(e) { 
    if ($j("#zip_field").val() > 1000){ 
     $j('form#userForm .button').attr('onclick','').unbind('click'); 
     alert('Sorry we leveren alleen inomstreken hijen!'); 
     e.preventDefault(); 
     return false; 
    } 
}); 

To jest przycisk Wyślij:

<button class="button vm-button-correct" type="submit" 
onclick="javascript:return myValidator(userForm, 'savecartuser');">Opslaan</button> 

pokaże „alert "funkcja, a także usuwa zdarzenie onclick, ale formularz jest mimo to przesyłany. Ręczne usunięcie zdarzenia onclick przed przesłaniem rozwiąże problem. Jednak jest to podstawowa funkcjonalność i nie chcę jej usuwać.

EDIT:

to na pewno spowodowane przez selektor onclick .. Jak mogę zmusić mojego skryptu jQuery błyskawicznie przeładować zdarzenie onclick? Przed dodaniem kodu jQuery: $j('form#userForm .button').attr('onclick',''); rozwiąże problem .. jednak moja walidacja nie będzie działać już ...

+0

Należy naprawdę to zrobić w programie obsługi składania formularza .. jeśli trafisz wprowadzić gdy formularz ma fokus ... uruchomi procedurę obsługi przesyłania, a nie kliknięcie, dlatego sprawdzanie poprawności zostanie ominięte –

Odpowiedz

18

Musisz dodać wydarzenie jako parametr:

$j('form#userForm .button').click(function(event) { // <- goes here ! 
    if (parseInt($j("#zip_field").val(), 10) > 1000){ 
     event.preventDefault(); 
     $j('form#userForm .button').attr('onclick','').unbind('click'); 
     alert('Sorry we leveren alleen inomstreken hijen!'); 
    } 
}); 

Również val() zawsze zwraca ciąg, więc dobrą praktyką byłoby przekonwertowanie go na liczbę przed porównaniem jej z liczbą i nie jestem pewien, czy naprawdę celujesz w wszystkie elementy .button wewnątrz #userForm wewnątrz funkcji, czy też powinieneś użyć this zamiast tego?

Jeśli używasz jQuery 1.7+, powinieneś rozważyć użycie on() i off().

+0

thx, zredagowałem kod, ale nie działa. Domyślam się, że zdarzenie onclick powoduje przerwanie prevent.default ...? –

+0

Funkcja onclick, która jest wbudowana, zawsze będzie wykonywana jako pierwsza, a nie jest tak naprawdę dobrą praktyką posiadanie zarówno funkcji wbudowanej, jak i obsługi zdarzenia, prawdopodobnie powinieneś to jeszcze raz przemyśleć, i przejdź do obsługi zdarzenia i wywołaj 'myvalidator() 'z zewnętrznej procedury obsługi zdarzeń. – adeneo

+1

wiele thx! Znalazłem to już teraz;) jednak nie chcę łamać podstawowego kodu virtuemart. Więc to dlatego próbuję rozwiązać w ten sposób! –

0

nie należy zapominać, że istnieje funkcja/argumenty zdarzeń, ale trzeba określić parametry:

$("#thing").click(function(e) { 
    e.preventDefault(); 
}); 

W ten sposób złożenie zostaje zatrzymany, a więc można go conditionalise.

12

Zasadniczo, jeśli zmienisz typ przycisku z type="submit" na type="button", taki przycisk nie zostanie przesłany do formularza i nie są wymagane żadne obejścia.

Mam nadzieję, że to pomoże.

+0

wiele thx ... jednak jestem pewien, że zdarzenie onclick jest winne –

+0

Ta odpowiedź rozwiązała mój przypadek, dla mnie to powinno być oznaczone jako prawidłowa odpowiedź, ponieważ jest bardziej uniwersalny :) wielkie dzięki! –

+0

Używam sprawdzania poprawności JQuery. Mam przycisk z 'type =" button "', ale nadal postbacks formularza, gdy walidacja nie powiedzie się! [tutaj] (http://stackoverflow.com/questions/29890544/page-stails-postbacks-after-jquery-validation-fail/29890940#29890940) to moje pytanie. – sohaiby

0

Najlepszym sposobem jest zrobienie wszystkiego wewnątrz funkcji obsługi zdarzeń przesyłania w formularzu. Wyjąć inline onclick i uruchomić go wewnątrz funkcji składania

$j('#userForm').submit(function(e) { 
    if (+$j("#zip_field").val() > 1000){ 
     alert('Sorry we leveren alleen inomstreken hijen!'); 
     return false; 
    } 
    return myValidator(userForm, 'savecartuser'); 
}); 
-2

Wierzę, że istnieje prostszy sposób:

$j('form#userForm .button').click(function(event) { // <- goes here ! 
    if (parseInt($j("#zip_field").val(), 10) > 1000){ 
     event.stopPropagation(); 
    } 
}); 
Powiązane problemy