display an alert message on successfull submission

Question

I have the following jquery method in my javascript file which calls .submit() method to submit a form:

var actionOfForm = $("#custom_targeting_param_form").attr('action');
actionOfForm = actionOfForm.replace('#export','');
actionOfForm = actionOfForm+'#export';
$("#custom_targeting_param_form").attr('action',actionOfForm);
try{
    $("#custom_targeting_param_form").submit();
    $("#showOrExportCustomTargetingReport").val('saveReport');
    alert('Report Saved Successfully');
}catch(e){
    //alert("ERROR OCCURRED :: "+e); 
}

Now what I want is to alert a message "Your form has been submitted successfully" on the successful submission of "custom_targeting_param_form".

As I have used the alert here, it happens prior to the actual submission. Please help.

Answer 1

Submit the form asynchronously in order to show a confirmation alert or render a startup js from the server side which will alert the confirmation message.

Code to submit the form asynchronously

$(function(){

$("#custom_targeting_param_form").submit(function(e){
   e.preventDefault();//to stop the default form submit

   var actionOfForm = $("#custom_targeting_param_form").attr('action');
   actionOfForm = actionOfForm.replace('#export','');
   actionOfForm = actionOfForm+'#export';
   $("#showOrExportCustomTargetingReport").val('saveReport');
   $.ajax({
      url: actionOfForm,
      type: $(this).attr("method"),
      data: $(this).serialize(),
      success: function(){
        alert('Report Saved Successfully');
      },
      error: function(){
          alert('Report Saving Failed. Please try again later');
      }
   });
});

Answer 2

Use jQuery ajax() method with a callback.