Standard auf Formular verhindern jQuery senden

Was ist daran falsch?

HTML:

<form action="http://localhost:8888/bevbros/index.php/test" method="post" accept-charset="utf-8" id="cpa-form" class="forms">        
      <input type="text" name="zip" value="Zip code" id="Zip" class="required valid">      
      <input type="submit" name="Next" value="Submit" class="forms" id="1">
  </form>

jQuery:

$("#cpa-form").submit(function(e){
    e.preventDefault();
  });

Versuche dies:

$("#cpa-form").submit(function(e){
    return false;
});

Verwenden Sie die neue Ereignissyntax "Ein".

$(document).ready(function() {
  $('form').on('submit', function(e){
    // validation code here
    if(!valid) {
      e.preventDefault();
    }
  });
});

Zitieren: https://api.jquery.com/on/

Ich glaube, dass die obigen Antworten alle richtig sind, aber das zeigt nicht, warum die submitMethode nicht funktioniert.

Nun, die submitMethode funktioniert nicht, wenn jQuery das formElement nicht abrufen kann und jQuery keinen Fehler macht. Wenn Ihr Skript im Kopf des Dokuments platziert ist, stellen Sie sicher , dass der Code läuft nach DOMist bereit . Also, $(document).ready(function () { // your code here // });wird das Problem lösen.

Am besten platzieren Sie Ihr Skript immer am Ende des Dokuments.

Dies ist eine alte Frage, aber die hier akzeptierte Antwort geht dem Problem nicht wirklich auf den Grund.

Sie können diese beiden Möglichkeiten lösen. Zuerst mit jQuery:

$(document).ready( function() { // Wait until document is fully parsed
  $("#cpa-form").on('submit', function(e){

     e.preventDefault();

  });
}

Oder ohne jQuery:

// Gets a reference to the form element
var form = document.getElementById('cpa-form');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(e) {

  e.preventDefault();

});

Sie müssen nicht verwenden return false, um dieses Problem zu lösen.

$('#cpa-form input[name="Next"]').on('click', function(e){
    e.preventDefault();
});

$(document).ready(function(){
    $("#form_id").submit(function(){
        return condition;
    });
});

Ihr Code ist in Ordnung, Sie müssen ihn nur in die Bereitschaftsfunktion einfügen.

$(document).ready( function() {
  $("#cpa-form").submit(function(e){
     e.preventDefault();
  });
}

DEPRECATED - Dieser Teil ist veraltet, verwenden Sie ihn also nicht.

Sie können diesen Code auch ausprobieren, wenn Sie beispielsweise später dynamische Formulare hinzugefügt haben. Sie haben beispielsweise ein asynchrones Fenster mit Ajax geladen und möchten dieses Formular senden.

$('#cpa-form').live('submit' ,function(e){
    e.preventDefault();      
    // do something
});

UPDATE - Sie sollten die Methode jQuery on () verwenden und versuchen, das Dokument-DOM anzuhören, wenn Sie dynamisch hinzugefügten Inhalt verarbeiten möchten.

Fall 1, statische Version: Wenn Sie nur wenige Listener haben und Ihr zu handhabendes Formular fest codiert ist, können Sie direkt auf "Dokumentebene" abhören. Ich würde die Listener nicht auf Dokumentebene verwenden, aber ich würde versuchen, tiefer in den Doom Tree einzusteigen, da dies zu Leistungsproblemen führen könnte (abhängig von der Größe Ihrer Website und Ihrem Inhalt).

$('form#formToHandle').on('submit'... 

ODER

$('form#formToHandle').submit(function(e) {
    e.preventDefault();      
    // do something
});

Fall 2, dynamische Version: Wenn Sie das Dokument bereits in Ihrem Code anhören, ist dieser Weg gut für Sie. Dies funktioniert auch für Code, der später über DOM oder dynamisch mit AJAX hinzugefügt wurde.

$(document).on('submit','form#formToHandle',function(){
   // do something like e.preventDefault(); 
});

ODER

$(document).ready(function() {
    console.log( "Ready, Document loaded!" );

    // all your other code listening to the document to load 

    $("#formToHandle").on("submit", function(){
        // do something           
    })
});

ODER

$(function() { // <- this is shorthand version
   console.log( "Ready, Document loaded!" );

    // all your other code listening to the document to load 

    $("#formToHandle").on("submit", function(){
        // do something           
    })
});

Hallo suchte nach einer Lösung, um ein Ajax-Formular mit Google Tag Manager (GTM) zum Laufen zu bringen. Die Rückgabe false verhinderte den Abschluss und die Übermittlung der Aktivierung des Ereignisses in Echtzeit auf Google Analytics-Lösung bestand darin, die Rückgabe false durch e.preventDefault () zu ändern. ;; das richtig funktioniert folgt dem Code:

 $("#Contact-Form").submit(function(e) {
    e.preventDefault();
   ...
});

e.preventDefault () funktioniert nur dann einwandfrei, wenn Sie keine Probleme mit Ihren Javascripts haben. Überprüfen Sie Ihre Javascripts, wenn e.preventDefault () nicht funktioniert. Möglicherweise funktionieren auch einige andere Teile Ihres JS nicht

Nun, ich bin auf ein ähnliches Problem gestoßen. Das Problem für mich ist, dass die JS-Datei geladen wird, bevor das DOM-Rendering stattfindet. Bewegen Sie sich also <script>zum Ende des <body>Tags.

oder verwenden Sie aufschieben.

<script defer src="">

Seien Sie also versichert, e.preventDefault()dass es funktionieren sollte.