How to do a Jquery Callback after form submit?

问题:

I have a simple form with remote=true.

This form is actually on an HTML Dialog, which gets closed as soon as the Submit button is clicked.

Now I need to make some changes on the main HTML page after the form gets submitted successfully.

I tried this using jQuery. But this doesn\'t ensure that the tasks get performed after some form of response of the form submission.

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

// do the task here ..

});

How do I attach a callback, so that my code gets executed only after the form is successfully submitted? Is there any way to add some .success or .complete callback to the form?

回答1:

I just did this -

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

         // tasks to do 


   });

And things worked perfectly .

See this api documentation for more specific details.

回答2:

I could not get the number one upvoted solution to work reliably, but have found this works. Not sure if it\'s required or not, but I do not have an action or method attribute on the tag, which ensures the POST is handled by the $.ajax function and gives you the callback option.

<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>

回答3:

You\'ll have to do things manually with an AJAX call to the server. This will require you to override the form as well.

But don\'t worry, it\'s a piece of cake. Here\'s an overview on how you\'ll go about working with your form:

• override the default submit action (thanks to the passed in event object, that has a preventDefault method)
• grab all necessary values from the form
• fire off an HTTP request
• handle the response to the request

First, you\'ll have to cancel the form submit action like so:

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

And then, grab the value of the data. Let\'s just assume you have one text box.

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

And then fire off a request. Let\'s just assume it\'s a POST request.

$(\"#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.
    });
});

And this should about do it.

Note 2: For parsing the form\'s data, it\'s preferable that you use a plugin. It will make your life really easy, as well as provide a nice semantic that mimics an actual form submit action.

Note 2: You don\'t have to use defers. It\'s just a personal preference. You can equally do the following, and it should work, too.

$.post(\"http://somewhere.com\", { val: val }, function () {
    // Start partying here.
}, function () {
    // Handle the bad news here.
});

回答4:

I do not believe there is a callback-function like the one you describe.

What is normal here is to do the alterations using some server-side language, like PHP.

In PHP you could for instance fetch a hidden field from your form and do some changes if it is present.

PHP:

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

One way to go about it in Jquery is to use Ajax. You could listen to submit, return false to cancel its default behaviour and use jQuery.post() instead. jQuery.post has a success-callback.

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

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

回答5:

For MVC here was an even easier approach. You need to use the Ajax form and set the AjaxOptions

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

here is the submission code, this is in the document ready section and ties the onclick event of the button to to submit the form

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

here is the callback referenced in the AjaxOptions

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

in the controller method for MVC it looks like this

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

回答6:

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