Wie mache ich einen Jquery Callback nach dem Absenden des Formulars?

119

Ich habe ein einfaches Formular mit remote = true.

Dieses Formular befindet sich in einem HTML-Dialogfeld, das geschlossen wird, sobald auf die Schaltfläche Senden geklickt wird.

Jetzt muss ich einige Änderungen an der Haupt-HTML-Seite vornehmen, nachdem das Formular erfolgreich gesendet wurde.

Ich habe dies mit jQuery versucht. Dies stellt jedoch nicht sicher, dass die Aufgaben nach einer Antwort auf die Formularübermittlung ausgeführt werden.

$("#myform").submit(function(event) {

// do the task here ..

});

Wie füge ich einen Rückruf hinzu, damit mein Code erst ausgeführt wird, nachdem das Formular erfolgreich gesendet wurde? Gibt es eine Möglichkeit, dem Formular einen .success- oder .complete-Rückruf hinzuzufügen?

geeky_monster
quelle
Warum benutzt du Ajax nicht? Mit jQuery Ajax-Funktionen können Sie solche Rückrufe definieren.
Davidbuzatto
12
Davidbuzatto, es gibt einige Fälle, in denen Sie Ajax nicht verwenden können. Zum Beispiel, wenn Sie eine Datei hochladen möchten.
Pere
3
@Pere Nicht wahr hier in der Zukunft.
SparK

Antworten:

119

Ich habe das gerade gemacht -

 $("#myform").bind('ajax:complete', function() {

         // tasks to do 


   });

Und die Dinge haben perfekt funktioniert.

Weitere Einzelheiten finden Sie in dieser API-Dokumentation .

geeky_monster
quelle
3
Wow ... ich habe gerade etwas Neues gelernt. Ja, so wie es aussieht, ist dies die einfachste Lösung. Vielleicht ist es sogar das Beste. Ich bin ein begeisterter Coding Horror-Leser, und in diesem Blog betont Jeff Attwood, dass wir weniger Code schreiben sollten, und diese Methode erreicht dies. Guter Fund. :)
Sal
7
Und wenn das <form>normalerweise eingereicht wird? (Ich meine nicht mit Ajax) Was kann ich in das erste Argument von setzen .bind()? EDIT: Nun, ich denke click. Nvm, sorry. : p
4wk_
9
Achtung: dies Ihre Funktion nach Abschluss der Feuer wird jede Ajax - Ereignis, nicht nur das Formular Vorlage (es sei denn , ich irre, in diesem Fall würde ich gerne für Sie einen Link bieten , wo Sie diese gefunden)
DMac der Zerstörer
18
"Ab jQuery 1.8 sollte die .ajaxComplete () -Methode nur noch an document angehängt werden"
Meredith
6
Hat bei mir mit normalem Formular mit einer Schaltfläche nicht funktioniert, aber die Schaltfläche ruft Javascript $ ('# formFile') auf. Submit ();
Daniel
35

Ich konnte die Nummer eins der Upvoted-Lösungen nicht zuverlässig zum Laufen bringen, habe aber festgestellt, dass dies funktioniert. Ich bin mir nicht sicher, ob es erforderlich ist oder nicht, aber ich habe kein Aktions- oder Methodenattribut für das Tag, das sicherstellt, dass der POST von der $ .ajax-Funktion verarbeitet wird und Ihnen die Rückrufoption bietet.

<form id="form">
...
<button type="submit"></button>
</form>

<script>
$(document).ready(function() {
  $("#form_selector").submit(function() {

    $.ajax({
     type: "POST",
      url: "form_handler.php",
      data: $(this).serialize(),
      success: function() {
        // callback code here
       }
    })

  })
})
</script>
Bradley Bossard
quelle
1
+1. Der Schlüssel zu dieser Antwort ist die $(this).serialize()Zeile. Sie können jQuery.ajax()damit das vorhandene Formular im Hintergrund senden, dann die Antwort vom Server abrufen und etwas damit tun.
Warren Young
15
Javascript ohne Semikolons ... manche Leute wollen nur die Welt brennen sehen. Ihre Lösung funktioniert aber, also danke :)
Viggity
2
Beachten Sie, dass .serializeIhre POSTed-Anforderung keine Dateieingaben enthält. Verwenden Sie stattdessen die HTML5 FormData (siehe diese Frage ), es sei denn, Sie unterstützen alte Browser wie IE <9
brichins
Requisiten für die Verwendung $(this).serialize(), es löste meine Probleme!
Gnclmorais
Was ist 'form_selector' in Ihrem HTML, auf das Sie im js verweisen?
Kevin Meredith
23

Sie müssen die Dinge manuell mit einem AJAX-Aufruf an den Server erledigen. Dazu müssen Sie auch das Formular überschreiben.

Aber keine Sorge, es ist ein Kinderspiel. Hier ist eine Übersicht darüber, wie Sie mit Ihrem Formular arbeiten:

  • Überschreiben Sie die Standard-Submit-Aktion (dank des übergebenen Ereignisobjekts, das über eine preventDefaultMethode verfügt).
  • Nehmen Sie alle erforderlichen Werte aus dem Formular
  • eine HTTP-Anfrage auslösen
  • Behandeln Sie die Antwort auf die Anfrage

Zuerst müssen Sie die Formularübermittlungsaktion wie folgt abbrechen:

$("#myform").submit(function(event) {
    // Cancels the form's submit action.
    event.preventDefault();
});

Und dann holen Sie sich den Wert der Daten. Nehmen wir einfach an, Sie haben ein Textfeld.

$("#myform").submit(function(event) {
    event.preventDefault();
    var val = $(this).find('input[type="text"]').val();
});

Und dann eine Anfrage abfeuern. Nehmen wir einfach an, es ist eine POST-Anfrage.

$("#myform").submit(function(event) {
    event.preventDefault();
    var val = $(this).find('input[type="text"]').val();

    // I like to use defers :)
    deferred = $.post("http://somewhere.com", { val: val });

    deferred.success(function () {
        // Do your stuff.
    });

    deferred.error(function () {
        // Handle any errors here.
    });
});

Und das sollte es ungefähr tun.

Hinweis 2: Zum Parsen der Formulardaten ist es vorzuziehen, ein Plugin zu verwenden . Es wird Ihr Leben wirklich einfach machen und eine nette Semantik liefern, die eine tatsächliche Aktion zum Senden von Formularen nachahmt.

Hinweis 2: Sie müssen keine Verzögerer verwenden. Es ist nur eine persönliche Präferenz. Sie können auch Folgendes tun, und es sollte auch funktionieren.

$.post("http://somewhere.com", { val: val }, function () {
    // Start partying here.
}, function () {
    // Handle the bad news here.
});
Sal
quelle
2
Tolle Probe. Wie mache ich dasselbe mit dem Hochladen von Dateien (mehrteilige / Formulardaten) ???
Adam W
11

Für MVC war dies ein noch einfacherer Ansatz. Sie müssen das Ajax-Formular verwenden und die AjaxOptions festlegen

@using (Ajax.BeginForm("UploadTrainingMedia", "CreateTest", new AjaxOptions() { HttpMethod = "POST", OnComplete = "displayUploadMediaMsg" }, new { enctype = "multipart/form-data", id = "frmUploadTrainingMedia" }))
{ 
  ... html for form
}

Hier ist der Übermittlungscode. Dieser befindet sich im Abschnitt "Dokument bereit" und verknüpft das Ereignis "onclick" der Schaltfläche mit dem Übermittlungsformular

$("#btnSubmitFileUpload").click(function(e){
        e.preventDefault();
        $("#frmUploadTrainingMedia").submit();
});

Hier ist der Rückruf, auf den in den AjaxOptions verwiesen wird

function displayUploadMediaMsg(d){
    var rslt = $.parseJSON(d.responseText);
    if (rslt.statusCode == 200){
        $().toastmessage("showSuccessToast", rslt.status);
    }
    else{
        $().toastmessage("showErrorToast", rslt.status);
    }
}

In der Controller-Methode für MVC sieht es so aus

[HttpPost]
[ValidateAntiForgeryToken]
public JsonResult UploadTrainingMedia(IEnumerable<HttpPostedFileBase> files)
{
    if (files != null)
    {
        foreach (var file in files)
        {
            // there is only one file  ... do something with it
        }
        return Json(new
        {
            statusCode = 200,
            status = "File uploaded",
            file = "",
        }, "text/html");
    }
    else
    {
        return Json(new
        {
            statusCode = 400,
            status = "Unable to upload file",
            file = "",
        }, "text/html");
    }
}
edepperson
quelle
2
Diese Codes sind .NET-Codes und wurden in der Frage nie angegeben.
MrMins
13
Das ist wirklich kein guter Grund, dies abzulehnen. Die Antwort funktioniert und kann einem .NET-Entwickler helfen, der mit demselben Problem konfrontiert ist.
edepperson
Ich mag diese Idee, aber aus irgendeinem Grund wird der Rückruf nicht ausgelöst. Muss die Controller-Methode ein JsonResult zurückgeben? Meine Controller-Methode gibt derzeit ein ActionResult zurück.
Mattpm
7

Ich glaube nicht, dass es eine Rückruffunktion wie die von Ihnen beschriebene gibt.

Was hier normal ist, ist, die Änderungen in einer serverseitigen Sprache wie PHP vorzunehmen.

In PHP können Sie beispielsweise ein verstecktes Feld aus Ihrem Formular abrufen und einige Änderungen vornehmen, wenn es vorhanden ist.

PHP:

  $someHiddenVar = $_POST["hidden_field"];
    if (!empty($someHiddenVar)) {
        // do something 
    }

Eine Möglichkeit, dies in Jquery zu tun, ist die Verwendung von Ajax. Sie können auf "Senden" hören, "false" zurückgeben, um das Standardverhalten abzubrechen, und stattdessen "jQuery.post ()" verwenden. jQuery.post hat einen Erfolgsrückruf.

$.post("test.php", $("#testform").serialize(), function(data) {
  $('.result').html(data);
});

http://api.jquery.com/jQuery.post/

Sindre
quelle
0

Die "On Submit" -Handler des Formulars werden aufgerufen, bevor das Formular gesendet wird. Ich weiß nicht, ob es einen Handler gibt, der aufgerufen werden muss, nachdem das Formular gesendet wurde. Im herkömmlichen Sinne, der kein Javascript ist, wird die Seite durch das Senden des Formulars neu geladen.

Aal ghEEz
quelle
Es sei denn, die Formularübermittlung leitet zu einem Dateidownload weiter. In diesem Fall bleibt die Seite intakt. Ich kann die JavaScript-Übermittlung nicht verwenden, da eine Ajax-Anfrage keinen Dateidownload initiieren kann (ohne Anker-Tag-Spiele), aber ich kann den Benutzer auch nicht
anweisen,
-1
$("#formid").ajaxForm({ success: function(){ //to do after submit } });
Aikanáro
quelle
3
Ist ajaxForm()eine Komponente eines Drittanbieters installiert? Es ist kein Standardbestandteil von jQuery.
Warren Young