it-swarm.com.de

Verwenden von JQuery - Verhindern des Absendens von Formularen

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

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

    $(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?

148

Zwei Dinge fallen auf:

  • Möglicherweise lautet Ihr Formularname nicht form. Beziehen Sie sich lieber auf das Tag, indem Sie das # löschen.
  • Auch der e.preventDefault ist die richtige JQuery-Syntax, z.

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

Option C sollte ebenfalls funktionieren. Ich kenne Option B nicht

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>
220
Philip Fourie

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 eine bessere Version davon:

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

Verwenden Sie diese Option, um die Standardeinstellung zu verhindern bzw. das Senden von Formularen zu verhindern

e.preventDefault();

Verwenden Sie, um das Sprudeln von Ereignissen zu stoppen

e.stopPropagation();

Um zu verhindern, dass ein Formular gesendet wird, sollte auch 'return false' funktionieren.

17
The Alpha

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 versuchte, den falschen Rückgabewert nur in "thefunction ()" einzufügen, wird der Übermittlungsprozess dadurch nicht verhindert. Daher muss "return false" eingegeben werden. in onsubmit Attribut. Daher komme ich zu dem Schluss, dass meine Formularanwendung den Rückgabewert von der Javascript-Funktion nicht erhalten kann. Ich habe keine Ahnung davon.

5
Luki B. Subekti

Ich hatte das gleiche Problem und ich löste diesen Weg (nicht elegant, aber es funktioniert):

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

Und es hat meiner Meinung nach den Vorteil, dass Sie die Situation jederzeit ändern können:

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

Hängen Sie das Ereignis an das Übergabeelement und nicht an das Formularelement an. Zum Beispiel in Ihrem HTML-Code

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

Sie können einfach prüfen, ob das Formular gültig ist, wenn ja, die Übermittlungslogik ausführen, andernfalls Fehler anzeigen.

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

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

$('form') sucht nach dem Formularelement

1
Rahul

Wenn ich das Tag <form> Ohne das Attribut id="form" Verwende und es bei seinem Tag-Namen direkt in jquery aufrufe, funktioniert es mit mir.
Ihr Code in der 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
      });
 });
1
Noha Salah
// Prevent form submission
$( "form" ).submit(function( event ) {
  event.preventDefault();
});

von hier aus: https://api.jquery.com/submit-selector/ (interessante Seite zu Submit-Typen)

0
Chris Strong

Sie vergessen die Formular-ID und es funktioniert

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