Classic ASP - Use Ajax to submit enquiry form without refresh

Question

I've had a look through Google etc but can't find anything for what I'm after so asking my fellow SE members for a little help.

I have a form which is contained on my page and is consistent throughout the site. I would like to submit the enquiry form without the page refreshing which is the normal route with Classic ASP.

I have a separate ASP page that contains my mail script and that works fine and sends the email, however I would like to use Ajax to call that page, send the email and then inform the user that its been sent.

Any help would be appreciated.

Answer 1

Classic ASP, ASP.NET, PHP or any other dynamc language, its all the same as what you're really doing is FORM POST ing, and that's HTML, not actually ASP.

Assuming that you have a form like

<form id="frm-submit" action="/SendEmail.asp" action="POST">

   ...

   <input type="submit" value="Submit form" />
</form>

add a little jQuery to the page as

$(function() {

   $("#frm-send").submit(function() {
      var data = $(this).serialize(),
          action = $(this).attr("action"),
          method = $(this).attr("method");

      $(".loading").show(); // show loading div
      $.ajax({
         url: action,
         type: method,
         data: data,
         success: function(data) {
             // all went well...
         },
         error: function(err) {
             // there was something not right...
         },
         complete: function() {
            $(".loading").hide(); // hide the loading
         }
      });

      return false; // don't let the form be submitted
   });

});

and you're ready to go.

---

in your sendMail.asp page, everything you send to Response.Write will be in the data variable of the success method, so after you send the email you have:

Response.Write("done")
Responde.Flush()
Response.End()

in the javascript part, you can handle it like:

success(data) {
    if(data === "done")
    {
       // Super duper! let's show the user a Thank you for submit page
       document.location = "/ThankYou.asp";
    }
}