it-swarm.com.de

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

Ich habe ein einfaches Formular mit remote = true.

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

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

Ich habe es mit jQuery versucht. Dies stellt jedoch nicht sicher, dass die Aufgaben nach einer bestimmten Antwortform der 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?

112
geeky_monster

Ich habe gerade das getan -

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

         // tasks to do 


   });

Und alles hat perfekt funktioniert.

Siehe diese API-Dokumentation für genauere Details.

111
geeky_monster

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

<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>
29
Bradley Bossard

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, wie Sie mit Ihrem Formular arbeiten:

  • überschreiben Sie die standardmäßige Übermittlungsaktion (dank des übergebenen Ereignisobjekts mit der preventDefault -Methode).
  • greifen Sie auf alle erforderlichen Werte aus dem Formular zu
  • feuern Sie eine HTTP-Anfrage ab
  • behandeln Sie die Antwort auf die Anfrage

Zuerst müssen Sie die Formularsendeaktion wie folgt abbrechen:

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

Nehmen Sie dann den Wert der Daten auf. Angenommen, 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 ungefähr so ​​sein.

Hinweis 2: Zum Parsen der Formulardaten verwenden Sie vorzugsweise ein Plugin . Dies erleichtert Ihnen das Leben und bietet eine nette Semantik, die eine tatsächliche Form der Übermittlung nachahmt.

Hinweis 2: Sie müssen keine Verzögerungen 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.
});
24
Sal

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 "Klicken" der Schaltfläche mit dem Übermitteln des Formulars

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

hier ist der Rückruf, auf den in 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");
    }
}
8
edepperson

Ich glaube nicht, dass es eine Rückruffunktion gibt, wie Sie sie beschreiben.

Normalerweise werden die Änderungen in einer serverseitigen Sprache wie PHP vorgenommen.

In PHP könnten Sie zum Beispiel ein verstecktes Feld aus Ihrem Formular holen 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önnten auf submit 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/

7
Sindre

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

1
eel ghEEz
$("#formid").ajaxForm({ success: function(){ //to do after submit } });
0
Aikanáro