Formularumleitung verhindern ODER beim Senden aktualisieren?

Ich habe eine Reihe von Seiten durchsucht, kann aber mein Problem nicht finden, daher musste ich einen Beitrag verfassen.

Ich habe ein Formular mit einer Schaltfläche zum Senden, und wenn es gesendet wird, soll es NICHT aktualisiert oder umgeleitet werden. Ich möchte nur, dass jQuery eine Funktion ausführt.

Hier ist das Formular:

<form id="contactForm">
    <fieldset>
        <label for="Name">Name</label>
        <input id="contactName" type="text" />
    </fieldset>

    <fieldset>
        <label for="Email">Email</label>
        <input id="contactEmail" type="text" />
    </fieldset>

    <fieldset class="noHeight">
        <textarea id="contactMessage" cols="20"></textarea>
        <input id="contactSend" class="submit" type="submit" onclick="sendContactForm()" />
    </fieldset>
</form>        
<small id="messageSent">Your message has been sent.</small>

Und hier ist die jQuery:

function sendContactForm(){
    $("#messageSent").slideDown("slow");
    setTimeout('$("#messageSent").slideUp();$("#contactForm").slideUp("slow")', 2000);
}

Ich habe es mit und ohne Aktionselement im Formular versucht, weiß aber nicht, was ich falsch mache. Was mich mehr geärgert hat, ist, dass ich ein Beispiel habe, das es perfekt macht: Beispielseite

Wenn Sie mein Problem live sehen möchten, gehen Sie zu Stormink.net (meine Website) und sehen Sie in der Seitenleiste nach, in der "Senden Sie mir und E-Mail" und "RSS-Abonnement" steht. Beides sind Formen, an denen ich versuche, dies zum Laufen zu bringen.

Behandeln Sie einfach die Formularübermittlung für das Übermittlungsereignis und geben Sie false zurück:

$('#contactForm').submit(function () {
 sendContactForm();
 return false;
});

Sie benötigen das Ereignis onclick auf der Schaltfläche "Senden" nicht mehr:

<input class="submit" type="submit" value="Send" />

Hier:

function submitClick(e)
{
     e.preventDefault();
     $("#messageSent").slideDown("slow");
     setTimeout('$("#messageSent").slideUp();
     $("#contactForm").slideUp("slow")', 2000);
}

$(document).ready(function() {
    $('#contactSend').click(submitClick);
});

Anstatt das Ereignis onClick zu verwenden, binden Sie mit jQuery einen 'Click'-Ereignishandler an die Schaltfläche "Senden" (oder eine beliebige Schaltfläche), wodurch submitClick als Rückruf verwendet wird. Wir übergeben das Ereignis an den Rückruf, um PreventDefault aufzurufen. Dadurch wird verhindert, dass der Klick das Formular sendet .

Legen Sie im Eröffnungs-Tag Ihres Formulars ein Aktionsattribut wie folgt fest:

<form id="contactForm" action="#">

Es sieht so aus, als ob dir ein fehlt return false.

Wenn Sie möchten, dass die Standardbrowserfehler angezeigt werden , z. B. die durch HTML-Attribute ausgelösten (die vor einer JS-Behandlung mit Clientcode angezeigt werden):

<input name="o" required="required" aria-required="true" type="text">

Sie sollten das submitEreignis anstelle des clickEreignisses verwenden. In diesem Fall wird automatisch ein Popup mit der Aufforderung " Bitte füllen Sie dieses Feld aus " angezeigt . Auch mit preventDefault:

$('form').on('submit', function(event) {
   event.preventDefault();
   my_form_treatment(this, event);
}); // -> this will show up a "Please fill out this field" pop-up before my_form_treatment

Wie bereits erwähnt , return falsewürde die Weitergabe gestoppt (dh wenn mehr Handler an die Formularübermittlung angehängt sind, werden diese nicht ausgeführt). In diesem Fall wird die vom Browser ausgelöste Aktion jedoch immer zuerst ausgeführt. Auch mit einemreturn false am Ende.

Also , wenn Sie dieser Standard Pop-ups loswerden wollen , verwenden Sie das clickEreignis auf die Schaltfläche einreichen:

$('form input[type=submit]').on('click', function(event) {
   event.preventDefault();
   my_form_treatment(this, event);
}); // -> this will NOT show any popups related to HTML attributes

Eine alternative Lösung wäre, kein Formular-Tag zu verwenden und das Klickereignis auf der Schaltfläche "Senden" über jquery zu behandeln. Auf diese Weise wird keine Seitenaktualisierung durchgeführt, aber gleichzeitig gibt es einen Nachteil, dass die Eingabetaste für die Übermittlung nicht funktioniert und auch auf Mobiltelefonen keine Startschaltfläche angezeigt wird (ein Stil bei einigen Mobiltelefonen). Halten Sie sich also an die Verwendung des Formular-Tags und verwenden Sie die akzeptierte Antwort.