Korzystanie z JQuery - zapobieganie wysyłaniu formularza

178

Jak zapobiec przesyłaniu formularza przy użyciu jQuery?

Próbowałem wszystkiego - zobacz poniżej 3 różne opcje, które wypróbowałem, ale to wszystko nie zadziała:

    $(document).ready(function() { 

            //option A
            $("#form").submit(function(e){
                e.preventDefault();
            });

            //option B
            $("#form").submit(function(e){
                stopEvent(e);
            });

            //option C
            $("#form").submit(function(){
                return false;
            });
    });

Co się stało?

Aktualizacja - oto mój html:

    <form id="form" class="form" action="page2.php" method="post"> 
       <!-- tags in the form -->
       <p class="class2">
           <input type="submit" value="Okay!" /> 
       </p>
    </form>

Czy jest tu coś nie tak?

jquery forms Lucy Weatherford
źródło

Pokaż swój kod HTML, ponieważ nie ma nic złego w prevDefault lub return false kiedy go opublikowałeś, poza tym, że twój selektor jest całkowicie błędny.

Sparky,

1

return false;po .submit()pracy dla mnie! Miałem ten sam problem

d -_- b

Jeśli w module obsługi wystąpi błąd JavaScript, e.preventDefault();kod nie zostanie osiągnięty / nie zostanie wykonany.

Tom

263

Wyróżniają się dwie rzeczy:

Możliwe, że nazwa twojego formularza nie jest form. Zamiast tego odnieś się do tagu, upuszczając #.

Również e.preventDefaultjest poprawna składnia JQuery, np

    //option A
    $("form").submit(function(e){
        e.preventDefault();
    });

Opcja C również powinna działać. Nie znam opcji B.

Kompletny przykład:

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <script type='text/javascript'>
         $(document).ready(function() {
            //option A
            $("form").submit(function(e){
                alert('submit intercepted');
                e.preventDefault(e);
            });
        });
        </script>
    </head>

    <body>
        <form action="http://google.com" method="GET">
          Search <input type='text' name='q' />
          <input type='submit'/>
        </form>
    </body>
</html>

Philip Fourie
źródło

2

Coś innego jest nie tak. Używam tej techniki na co dzień. Można by przypuszczać, że na stronie są błędy JavaScript, może sprawdź to za pomocą FireBug?

Philip Fourie,

@LucyWeatherford, zaktualizowałem moją odpowiedź próbką, która działa. Może coś zauważysz.

Philip Fourie,

W Twojej aktualizacji HTML zauważyłem, że masz atrybut class dla swojego formularza. Zmień selektor JQuery z $('#form')na $('.form')dla atrybutów klas.

Philip Fourie,

1

dzięki! Skończyło się na tym, że użyłem twojego kodu na tej samej stronie i zadziałało, wciąż nie jestem pewien, co było nie tak, ale teraz wszystko jest w porządku. dzięki!

Lucy Weatherford,

1

@ ÂngeloRigo e to po prostu nazwa, którą nadasz parametrowi, w tym przypadku jest to zdarzenie przesyłania.

szkwał3d

34

Prawdopodobnie masz kilka formularzy na stronie i użycie $ ('form'). Submit () dodaje to zdarzenie do pierwszego wystąpienia formularza na twojej stronie. Zamiast tego użyj selektora klasy lub spróbuj tego:

$('form').each(function(){
    $(this).submit(function(e){
        e.preventDefault();
        alert('it is working!');
        return  false;
    })
})

lub lepsza wersja:

$(document).on("submit", "form", function(e){
    e.preventDefault();
    alert('it works!');
    return  false;
});

Artem Kiselev
źródło

1

W moim przypadku kluczem było zwrócenie fałszu.

elquimista

19

Aby zapobiec domyślnemu / uniemożliwić użycie formularza przesyłania

e.preventDefault();

Aby zatrzymać propagację zdarzeń, użyj

e.stopPropagation();

Aby zapobiec przesłaniu formularza, opcja „return false” również powinna działać.

Alpha
źródło

Zobacz tę odpowiedź, ponieważ jQuery obsługuje je w różny sposób. stackoverflow.com/questions/1357118/…

Sparky

1

Zaznacz to, aby zrozumieć ogłaszanie wydarzeń quirksmode.org/js/events_order.html

Alpha

2

JQuery na stanach API: „Wracając false z obsługi zdarzeń automatycznie zadzwoni event.stopPropagation()i event.preventDefault()a. falseWartość ta może być również przekazywane do obsługi jako skrót function(){ return false; }”.

Paul

7

Ja też miałem ten sam problem. Próbowałem też tego, czego ty próbowałeś. Następnie zmieniam metodę, aby nie używać jquery, ale używając atrybutu „onsubmit” w tagu formularza.

<form onsubmit="thefunction(); return false;">

To działa.

Ale kiedy próbowałem umieścić zwracaną wartość false tylko w „thefunction ()”, nie przeszkadza to w procesie przesyłania, więc muszę wstawić „return false”; w atrybucie onsubmit. Tak więc dochodzę do wniosku, że moja aplikacja formularza nie może pobrać wartości zwracanej z funkcji JavaScript. Nie mam o tym pojęcia.

Luki B. Subekti
źródło

1

To jest różnica między false;a return false;. Musisz miećonsubmit="return thefunction();"

xr280xr

4

Miałem ten sam problem i rozwiązałem w ten sposób (nie elegancko ale działa):

$('#form').attr('onsubmit','return false;');

Moim zdaniem ma tę zaletę, że w każdej chwili możesz zmienić sytuację:

$('#form').attr('onsubmit','return true;');

vinxxe
źródło

Może byłoby trochę wygodniej po prostu usunąć atrybut podczas przywracania formularza zapobiegania $('#form').removeAttr('onsubmit');

wysyłaniu

4

Dołącz zdarzenie do elementu przesyłania, a nie do elementu formularza. Na przykład w swoim html zrób tak

$('input[type=submit]').on('click', function(e) {
    e.preventDefault();
});

M Weiss
źródło

2

Możesz po prostu sprawdzić, czy formularz jest prawidłowy, jeśli tak, uruchom logikę przesyłania, w przeciwnym razie pokaż błąd.

HTML

<form id="form" class="form" action="page2.php" method="post">
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />

    <input type="submit" value="Okay!" />
</form>

Javascript

    $(document).ready(function () {
        var isFormValid = true;

        function checkFormValidity(form){
            isFormValid = true;
            $(form).find(".check-validity").each(function(){
                var fieldVal = $.trim($(this).val());
                if(!fieldVal){
                    isFormValid = false;
                }
            });
        }


        //option A
        $("#form").submit(function (e) {
            checkFormValidity("#form");
            if(isFormValid){
                alert("Submit Form Submitted!!! :D");
            }else{
                alert("Form is not valid :(");
            }
            e.preventDefault();
        });
    });

Code Spy
źródło

1

Kiedy używam <form>tagu bez atrybutu id="form"i wywołuję go przez jego nazwę tagu bezpośrednio w jQuery, działa ze mną.
twój kod w pliku html:

<form action="page2.php" method="post">

oraz w skrypcie Jquery:

$(document).ready(function() {
      $('form').submit(function(evt){
          evt.preventDefault();// to stop form submitting
      });
 });

Noha Salah
źródło

1

$('#form')szuka elementu z id="form".

$('form') szuka elementu formularza

Rahul
źródło

0

Zapominasz o identyfikatorze formularza i to działa

$('form#form').submit(function(e){
   e.preventDefault();
   alert('prevent submit');             
});

Shintadoniku Alyssa
źródło

0

// Prevent form submission
$( "form" ).submit(function( event ) {
  event.preventDefault();
});

stąd: https://api.jquery.com/submit-selector/ (interesująca strona o typach przesyłania)

Chris Strong
źródło

0

To również wydaje się działać i może być nieco prostsze:

$('#Form').on('submit',function(){
    return false;
})

Ukuser32
źródło

0

Korzystając z jQuery, możesz wykonać następujące czynności:

1- Użyj natywnego formularza przesyłania zdarzenia z przyciskiem Prześlij, jednocześnie uniemożliwiając uruchomienie zdarzenia

2- Sprawdź formularz Prawidłowa właściwość Można to zaimplementować w następujący sposób:

1- HTML:

 <form id="yourForm">
    <input id="submit" type="submit" value="Save"/>
</form>

2- Javascript

 $("form").on("submit", function (e) {
        e.preventDefault();
        if ($(this).valid()) {  
           alert('Success!');
        }
    });

Mohamed Nagieb
źródło

Korzystanie z JQuery - zapobieganie wysyłaniu formularza

Odpowiedzi: