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

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?

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 .

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>

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.
});

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");
    }
}

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/

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.

$("#formid").ajaxForm({ success: function(){ //to do after submit } });