jQuery - Abbrechen der Formularübergabe (mit "return false"?)?

Question

Ich habe Probleme, während ich versuche, das Senden eines Formulars abzubrechen. Ich habe dieses Tutorial verfolgt (obwohl ich kein Login-Skript mache) und es scheint für ihn zu funktionieren.

Hier ist meine Form:

<form action="index.php" method="post" name="pForm"> 
     <textarea name="comment" onclick="if(this.value == 'skriv här...') this.value='';" onblur="if(this.value.length == 0) this.value='skriv här...';">skriv här...</textarea> 
     <input class="submit" type="submit" value="Publicera!" name="submit" /> 
    </form> 

Und hier ist der jquery:

$(document).ready(function() { 
    $('form[name=pForm]').submit(function(){ 

     return false; 

    }); 
}); 

ich bereits jQuery im Header importiert haben, und ich weiß, dass es funktioniert. Mein erster Gedanke war, dass es veraltet sein könnte, aber es ist eigentlich "nur" vor einem Jahr.

Also kann jemand sehen, was los ist?

Vielen Dank im Voraus.

EDIT: Von was ich gelesen habe, ist der einfachste und am besten geeignete Weg zum Abbrechen der Übermittlung an return false? Aber ich kann es nicht funktionieren lassen. Ich habe das Forum durchsucht und ich habe mehrere hilfreiche Threads gefunden, aber keiner von ihnen funktioniert tatsächlich. Ich muss etwas vermasseln.

Answer 1

Try event.preventDefault

$(document).ready(function(event) { 
    $('form[name=pForm]').submit(function(event){ 
     event.preventDefault(); 
     //add stuff here 
    }); 
}); 

Answer 2

Ich habe laufen in ähnliche Probleme mit. Ich löste sie, indem ich die Aktion und Methode des Formulars vor der Validierung löschte und dann nach der Validierung wieder hinzufügte. Hier ist der Validator schrieb ich:

var Validator = function (formSelector) { 
    this.formSelector = formSelector; 
// $(formSelector).submit(function() {return false;}); 
     this.Action = $(formSelector).attr("action"); 
     this.Method = $(formSelector).attr("method"); 
    $(formSelector).attr("action",function(){return ""}).attr("method",function(){return ""}); 
     var donotsubmit = false; 
     var notjustcheckbox = false; 
     var checknotchecked = false; 
    this.Required = new Array(); 
    this.Email = new Array(); 
    this.validate = function() { 
     this.form = $(this.formSelector); 
     var i = 0; 
     for (i in this.Required){ 
      $(this.Required[i]).attr("value", function(index,attr){ 
       // Check on checkboxes... 
       if (this.getAttribute("type") == "checkbox"){ 
        if (this.checked == false){ 
         checknotchecked = true; 
         donotsubmit = true; 
        } else { 
        }  
       } else {  
        if (attr == "" || attr == undefined){ 
         this.style.border = "1px solid red"; 
         notjustcheckbox = true; 
         donotsubmit = true;  
        } else { 
         this.style.border = "1px solid green"; 
        } 
       } 
      }); 
     } 
     i = 0; 
     for (i in this.Email){ 
      $(this.Email[i]).attr("value", function(index,email){ 
       var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i ; 
       if (filter.test(email) == true || filter.test(email) == "true") { 
        this.style.border = "1px solid green"; 
       } else if (filter.test(email) == false) { 
        donotsubmit = true; 
        notjustcheckbox = true; 
        this.style.border = "1px solid red"; 
       } 
      }); 
     } 
     if (donotsubmit == true){ 
      if (checknotchecked == true && notjustcheckbox == true){  
       alert("Please correct the fields in red and check the required checkboxes"); 
      } else if (checknotchecked == true && notjustcheckbox == false){ 
       alert("Please check the required checkboxes"); 
      } else { 
       alert("Please correct the fields in red"); 
      } 
      checknotchecked = false; 
      notjustcheckbox = false; 
      donotsubmit = false; 
     } else { 
      $(formSelector).attr({action : ''+this.Action+''}); 
      $(formSelector).attr({method : ''+this.Method+''}); 
      $(formSelector).submit(); 
     } 
     return true; 
    }; 
}; 

Sie es wie folgt implementieren:

$(document).ready(function(){ 
    var myForm = new Validator("#formId"); 
     myForm.Required = new Array("input.lightborder"); 
       myForm.Email = new Array("#email"); 
       $("#form-submit-button-id").click(function(){ 
        myForm.validate(); 
       }); 
}); 

Sie CSS-Selektoren für erforderliche Felder hinzufügen können. Die für E-Mail muss eindeutig sein.

Answer 3

Der Wert des Namens benötigt Anführungszeichen um ihn herum. Versuchen Sie folgendes:

$(document).ready(function() { 
    $("form[name='pForm']").submit(function(){ 
     return false; 
    }); 

});

Answer 4

Danke für die Antwort jeder! Ein Freund von mir tippte mich zu fügen

onsubmit="return(false) 

auf dem Formular. Das funktioniert, aber ich würde trotzdem gerne einen Nicht-Inline-Javascript-Trick kennen, der funktioniert.

Answer 5

Es sollte gut funktionieren. Es ist wahrscheinlich mehr in der Sache. Leider ist der Code in Ihrer Frage nicht in einer SSCCE Geschmacksrichtung, so dass es schwierig ist, die Ursache zu finden. Wahrscheinlich haben Sie die jQuery-Bibliothek überhaupt nicht importiert. Oder Sie haben $(document).ready()vor aufgerufen jQuery-Bibliothek importieren. Oder Sie haben eine andere JS-Bibliothek, die in Konflikt steht $(). Oder das eigentliche Formular hat nicht den gewünschten Namen. Etc..etc ..

Um Sie zu beginnen, hier ist ein Fullworthy SSCCE. Alles, was Sie tun müssen, ist, es zu kopieren und nicht zu starten.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>SO question 3569072</title> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       $('form[name=pForm]').submit(function() { 
        alert('Submit blocked!'); 
        return false; 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <form action="index.php" method="post" name="pForm"> 
      <textarea name="comment" onclick="if(this.value == 'skriv här...') this.value='';" onblur="if(this.value.length == 0) this.value='skriv här...';">skriv här...</textarea> 
      <input class="submit" type="submit" value="Publicera!" name="submit" /> 
     </form> 
    </body> 
</html> 

Wenn es funktioniert (zumindest, es funktioniert hier, erhalte ich eine Benachrichtigung und das Formular wird nicht vorgelegt), vergleichen Sie es mit Ihrem eigenen Code und versuchen Sie Ihren eigenen Code in diesen Geschmack cutdown so dass Sie die Unterschiede (und somit Ihren Fehler) besser erkennen können.

Egal, meiner Meinung nach ist es die Mühe wert, sich durch einige einfache/triviale jQuery (und vorzugsweise auch JavaScript) Tutorials zu bringen, damit Sie besser verstehen, was unter den Covern passiert und wie Sie Tools verwenden wie Firebug.

Answer 6

ich mein Code auch dieses Problem hatte, war (die nicht funktioniert hat) so etwas wie diese:

$('#upload_form').submit(function(){ before_submit('argument') }); 

und innerhalb der „before_submit“ -Funktion aus der Form zu stoppen ich hatte „return false“ einreichen :

function before_submit() { 

......................................................... 
return false; 
} 

ich habe "Rückkehr", wenn die Event-Handler-Funktion die Form verbindlich und es funktioniert:

$('#upload_form').submit(function(){ return before_submit('argument') }); 

Die dem submit-Ereignis angehängte Funktion muss false zurückgeben (in meinem Fall die anonyme Funktion). Also ... dies ist eine Lösung für eine Ursache dieses Problems

Answer 7

Sie zeigen, dass ", dass die Warnung vor der 'Rückkehr falsch' nicht angezeigt wird".

Bei der Verwendung von jQuery kann die ID oder der Name des Submit-Elements nicht "submit" sein. Wenn dies der Fall ist, wird das submit-Ereignis nicht ausgelöst.

Answer 8

Nur mein bescheidener Beitrag zu dieser (unbeantworteten, datierten) Frage. Ich habe schon immer mit der gleichen Lösung mehrmals auf dieses Problem auftreten:

nicht

<input name="submit" /> 

entlang

mit

$('form').submit(function(){...}); 

das falsche Element/Element Verwenden Sie bringen dieses feuert kein Fehler oder Warnungen. Also nenne einfach deinen Submit-Button etwas anderes und alles fängt wieder magisch an zu arbeiten.

Answer 9

Ich hatte das gleiche Problem und es war auf Rails und :remote => true auf dem Formular zu verwenden. Rails jQuery-Treiber kam herein und reichte das Formular mit Ajax ein, während meine eigene Funktion versuchte, den Einreichungsvorgang unter Verwendung von return false und event.preventDefault() anzuhalten.

Also achten Sie auf Frameworks und Standardaktionen, die Ihr eigenes Javascript stören. return false sollte funktionieren :)

Answer 10

Das Formular, auf das Sie zugreifen möchten, wird möglicherweise dynamisch zu Ihrer Seite hinzugefügt. Sie müssen Delegierten verwenden, das Formular für den Zugriff auf in diesem Fall

Beispiel:

$(document).delegate("#myform","submit",function(){ 
     return false; 
}); 

Answer 11

Sie haben eine Art ‚Doppel Rückkehr‘ zu tun, oder mit anderen Worten, müssen Sie zurückkommen, was zurückgegeben wird.Also, Sie haben Ihre HTML:

<form action="index.php" onsubmit="return cancelSubmit()" method="post" name="pForm"> 
    <textarea name="comment" onclick="if(this.value == 'skriv här...') this.value='';" onblur="if(this.value.length == 0) this.value='skriv här...';">skriv här...</textarea> 
    <input class="submit" type="submit" value="Publicera!" name="submit" /> 
</form> 

als Sie gerade eine jQuery-Funktion haben, die onsubmit genannt wird, wie oben zu sehen:

function cancelSubmit() { 
    return false; // return true if you want submission to carry through 
} 

Sie oben jede Art von conditionals in der Funktion setzen können. Es scheint, dass Sie es einfach abbrechen möchten. Ich hoffe, dies hilft anderen, die auf diese Antwort stoßen.