How to do a Jquery Callback after form submit

Question

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

User · Answer

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

User · Answer

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

User · Answer

The form s  on submit  handlers are called before the form is submitted   I don t know if there is a handler to be called after the form is submited   In the traditional non-Javascript sense the form submission will reload the page

User · Answer

formid   ajaxForm   success  function      to do after submit

User · Answer

I just did this -        myform   bind  ajax complete   function                  tasks to do             And things worked perfectly    See this api documentation for more specific details

User · Answer

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    lt form id  form  gt       lt button type  submit  gt  lt  button gt   lt  form gt    lt script gt    document  ready function           form selector   submit function            ajax        type   POST         url   form handler php         data    this  serialize          success  function                callback code here                           lt  script gt

User · Answer

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

[javascript] How to do a Jquery Callback after form submit?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to asp.net

Examples related to webforms