Verwenden von JQuery - Verhindert das Senden von Formularen

177

Wie verhindere ich, dass ein Formular mit jquery gesendet wird?

Ich habe alles versucht - siehe 3 verschiedene Optionen, die ich unten ausprobiert habe, aber alles wird nicht funktionieren:

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

Was könnte falsch sein?

Update - hier ist mein 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>

Stimmt hier etwas nicht?

jquery forms

— Lucy Weatherford
quelle

Zeigen Sie Ihren HTML-Code an, da PreventDefault nichts Falsches ist, oder geben Sie beim Posten false zurück, außer dass Ihre Auswahl völlig falsch ist.

— Sparky

1

return false;nach dem .submit()für mich gearbeitet! Ich hatte das gleiche Problem

— d -_- b

Wenn im Handler ein JavaScript-Fehler auftritt, wird der e.preventDefault();Code nicht erreicht / ausgeführt.

— Tom

263

Zwei Dinge fallen auf:

Möglicherweise lautet Ihr Formularname nicht form. Beziehen Sie sich lieber auf das Tag, indem Sie das # fallen lassen.

Dies e.preventDefaultist auch die richtige JQuery-Syntax, z

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

Option C sollte auch funktionieren. Option B ist mir nicht bekannt

Ein vollständiges Beispiel:

<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
quelle

2

Etwas anderes stimmt nicht. Ich benutze diese Technik täglich. Die beste Vermutung wäre, dass die Seite JavaScript-Fehler enthält. Überprüfen Sie dies möglicherweise mit FireBug.

— Philip Fourie

@ LucyWeatherford, ich habe meine Antwort mit einem Beispiel aktualisiert, das funktioniert. Vielleicht entdeckst du etwas.

— Philip Fourie

In Ihrem Update-HTML habe ich festgestellt, dass Sie ein Klassenattribut für Ihr Formular haben. Ändern Sie Ihren JQuery-Selektor für Klassenattribute von $('#form')nach $('.form').

— Philip Fourie

1

Vielen Dank! Am Ende habe ich Ihren Code auf derselben Seite verwendet, und es hat funktioniert. Ich bin mir immer noch nicht sicher, was falsch war, aber jetzt ist alles gut. Vielen Dank!

— Lucy Weatherford

1

@ ÂngeloRigo e ist einfach der Name, den Sie dem Parameter geben. In diesem Fall handelt es sich um das Submit-Ereignis.

— squall3d

34

Sie haben wahrscheinlich nur wenige Formulare auf der Seite und verwenden $ ('form'). Submit () fügt dieses Ereignis zum ersten Auftreten des Formulars auf Ihrer Seite hinzu. Verwenden Sie stattdessen die Klassenauswahl oder versuchen Sie Folgendes:

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

oder bessere Version davon:

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

— Artem Kiselev
quelle

1

In meinem Fall war die Rückgabe von false ein Schlüssel.

— Elquimista

19

Um das Versenden von Formularen / Formularen zu verhindern, verwenden Sie

e.preventDefault();

Um das Sprudeln von Ereignissen zu stoppen, verwenden Sie

e.stopPropagation();

Um das Senden von Formularen zu verhindern, sollte auch "return false" funktionieren.

— Das Alpha
quelle

Siehe diese Antwort, da jQuery diese unterschiedlich behandelt. stackoverflow.com/questions/1357118/…

— Sparky

1

Überprüfen Sie dies, um das Ereignis bubling quirksmode.org/js/events_order.html

— The Alpha

2

In der jQuery on API heißt es: "Die Rückgabe von false von einem Ereignishandler ruft automatisch event.stopPropagation()und auf event.preventDefault(). Ein falseWert kann auch für den Handler als Abkürzung für übergeben werden function(){ return false; }."

— Paul

7

Ich hatte auch das gleiche Problem. Ich hatte auch versucht, was Sie versucht hatten. Dann ändere ich meine Methode, um nicht jquery zu verwenden, sondern indem ich das Attribut "onsubmit" im Formular-Tag verwende.

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

Es klappt.

Wenn ich jedoch versucht habe, den falschen Rückgabewert nur in "thefunction ()" zu setzen, wird der Übermittlungsprozess nicht verhindert, daher muss ich "return false" setzen. im Attribut onsubmit. Daher komme ich zu dem Schluss, dass meine Formularanwendung den Rückgabewert nicht von der Javascript-Funktion erhalten kann. Ich habe keine Ahnung davon.

— Luki B. Subekti
quelle

1

Es ist der Unterschied zwischen false;und return false;. Sie müssten habenonsubmit="return thefunction();"

— xr280xr

4

Ich hatte das gleiche Problem und habe es auf diese Weise gelöst (nicht elegant, aber es funktioniert):

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

Und es hat meiner Meinung nach den Vorteil, dass Sie die Situation jederzeit wieder rückgängig machen können:

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

— vinxxe
quelle

Vielleicht wäre es etwas bequemer, das Attribut einfach zu entfernen, wenn das Formular zum $('#form').removeAttr('onsubmit');

— Zurücksenden zurückgesetzt wird

4

Hängen Sie das Ereignis an das Submit-Element an, nicht an das Formularelement. Zum Beispiel in Ihrem HTML so

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

— M Weiss
quelle

2

Sie können einfach überprüfen, ob das Formular gültig ist, wenn ja, senden Sie die Übermittlungslogik, andernfalls wird ein Fehler angezeigt.

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
quelle

1

Wenn ich ein <form>Tag ohne das Attribut verwende id="form"und es direkt in jquery beim Tag-Namen aufrufe, funktioniert es mit mir.
Ihr Code in HTML-Datei:

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

und im Jquery-Skript:

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

— Noha Salah
quelle

1

$('#form')sucht ein Element mit id="form".

$('form') sucht nach dem Formularelement

— Rahul
quelle

0

Sie vergessen die Formular-ID und es funktioniert

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

— Shintadoniku Alyssa
quelle

0

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

von hier: https://api.jquery.com/submit-selector/ (interessante Seite zu Übermittlungstypen)

— Chris Strong
quelle

0

Dies scheint auch zu funktionieren und kann etwas einfacher sein:

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

— Ukuser32
quelle

0

Mit jQuery können Sie Folgendes tun:

1- Verwenden Sie das native Formular zum Senden eines Ereignisses mit einer Schaltfläche zum Senden, und verhindern Sie dann, dass das Ereignis ausgelöst wird

2- Überprüfen Sie das Formular Gültige Eigenschaft Dies kann wie folgt implementiert werden:

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
quelle