How do I show a confirmation dialog before submitting a form using the jQuery ajax method?

Question

I am using jquery ajax to delete a customer from a table. How would I show a confirmation box before submitting the form? I would preferably like to use jQuery's dialog.

I have seen questions like this before but none of them have helped.

This is my code:

    $.ajax({
        type: "POST",
        url: "delete/process.php",
        data: "delcustomerid="+ delcustomerid,
        success: refreshTable
    });

Ossein

Answer 1

The ajax function has a beforeSend event which you can use to show the dialog before the form is submitted.

If the dialog indicates that the form should not be submitted, then you would return false from your function so that the submission of the form does not take place.

In your case, you would do the following:

$.ajax({ 
    beforeSend: function (request) {
        // This is where you show the dialog.
        // Return false if you don't want the form submitted.
    },

    type: "POST", 
    url: "delete/process.php", 
    data: "delcustomerid="+ delcustomerid, 
    success: refreshTable 
});

If you are issuing a POST for the form (which it seems you are), I highly recommend you take a look at the jQuery form plugin as it simplifies the process of submitting forms through AJAX calls a great deal for you, and uses all the same parameters a call to ajax does.

Murky

I have used the jquery form plugin but ran into a few issues. I am finding it easier (not faster lol) doing things without the plugin. Thanks for the answer it's just what i am looking for. what is (request) for? – Ossein

@user272899: The request parameter contains the XMLHTTPRequest instance that will be used to make the request. You don't necessarily need it, but it's passed to the function. – Murky

@user272899: Also, if you want, elaborate on the jQuery form plugin issues. I've written up some info on using the jQuery form plugin along with validation (things you have to look for) here: #1996625 – Murky

Answer 2

You need to create a function that makes the call you show after checking for user input.

eg:

function DeleteWithCheck() {
  if (confirm("Are you sure you want to delete customer "+delcustomerid.ToString()))
  {
    $.ajax({
      type: "POST",
      url: "delete/process.php",
      data: "delcustomerid="+ delcustomerid,
      success: refreshTable
    });
  }
  else
    alert("Aborted");
}

Call this function when you want to do the delete.

Royroyal