Display confirmation message before send ajax request

I have written an ajax function where I want to display confirmation meeessage before submitting the form. How should I add with my condition. Below is my code.

$.ajax({
                        url: "UBRDashboard.aspx/GetDllValue",
                        dataType: "json",
                        type: "POST",
                        contentType: 'application/json; charset=utf-8',
                        data: JSON.stringify({ ddlOduModel: ddlOduModel, ddlAntModel: ddlAntModel, ddlOMTModel: ddlOMTModel, ddlSapID: ddlSapID, ddlVendorName: ddlVendorName, strReqID: r.d, ddlSapDescVal: ddlSapDescVal, SITE_ADD: SITE_ADD, LATITUDE: LATITUDE, LONGITUDE: LONGITUDE, ddlEQP_SEQ: ddlEQP_SEQ, txtLinkID: txtLinkID, RJ_QUANTITY: RJ_QUANTITY, USER_NAME: USER_NAME, CREATED_DATE: CREATED_DATE, LOCATIONTYPE: LOCATIONTYPE, TOWERTYPE: TOWERTYPE }),
                        async: true,
                        processData: false,
                        cache: false,
                        success: function (r) {
                            if (r.d == "OK") {
                                alert('Record Saved successfully');
                                window.location.href = "UBRDashboard.aspx";
                            }
                        },
                        error: function (xhr) {
                            alert('Error while selecting list..!!');
                            window.location.href = "ErrorPage.aspx";
                        }
                    })
                },
                error: function (xhr) {
                    alert('Error while selecting list..!!');
                    window.location.href = "ErrorPage.aspx";
                }

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

The solution is to use beforeSend ajax property.

beforeSend is a pre-request callback function before it is
sent.Returning false in the beforeSend function will cancel the
request.

beforeSend:function(){
     return confirm("Are you sure?");
},

AJAX

$.ajax({
      url: "UBRDashboard.aspx/GetDllValue",
      dataType: "json",
      type: "POST",
      contentType: 'application/json; charset=utf-8',
      data: JSON.stringify({ ddlOduModel: ddlOduModel, ddlAntModel: ddlAntModel, ddlOMTModel: ddlOMTModel, ddlSapID: ddlSapID, ddlVendorName: ddlVendorName, strReqID: r.d, ddlSapDescVal: ddlSapDescVal, SITE_ADD: SITE_ADD, LATITUDE: LATITUDE, LONGITUDE: LONGITUDE, ddlEQP_SEQ: ddlEQP_SEQ, txtLinkID: txtLinkID, RJ_QUANTITY: RJ_QUANTITY, USER_NAME: USER_NAME, CREATED_DATE: CREATED_DATE, LOCATIONTYPE: LOCATIONTYPE, TOWERTYPE: TOWERTYPE }),
      async: true,
      processData: false,
      cache: false,
      beforeSend:function(){
         return confirm("Are you sure?");
      },
      success: function (r) {
        if (r.d == "OK") {
        alert('Record Saved successfully');
        window.location.href = "UBRDashboard.aspx";
      },
      error: function (xhr) {
             alert('Error while selecting list..!!');
             window.location.href = "ErrorPage.aspx";
      }
});

Method 2

Use ajax beforeSend callback function.

beforeSend: function () {
                    if(confirm("Are you sure?")){
                        // do something
                    } else { 
                        // stop the ajax call
                        return false;
                    }
                },

See documentation Ajax http://api.jquery.com/jquery.ajax/

Method 3

Write your ajax into a function like:

function save(){
   // something in here 
}

After that write a confirmation functionality, if user confirm then call save() function

Method 4

Maybe this exemple is what you need ?

var r = confirm("Press a button!");
if (r == true) {
    // Make your ajax call here
} else {
    // He refused the confirmation
}

Call your confirm before ajax call ?

Method 5

You can try to put your confirmation message in the beforeSend method : http://api.jquery.com/jquery.ajax/

Method 6

if ( confirm("Do you want to Submit?")) {
    // If you pressed OK!";

 $.ajax({
  url: "UBRDashboard.aspx/GetDllValue",
  dataType: "json",
  type: "POST",
  contentType: 'application/json; charset=utf-8',
  data: JSON.stringify({ ddlOduModel: ddlOduModel, ddlAntModel: ddlAntModel, ddlOMTModel: ddlOMTModel, ddlSapID: ddlSapID, ddlVendorName: ddlVendorName, strReqID: r.d, ddlSapDescVal: ddlSapDescVal, SITE_ADD: SITE_ADD, LATITUDE: LATITUDE, LONGITUDE: LONGITUDE, ddlEQP_SEQ: ddlEQP_SEQ, txtLinkID: txtLinkID, RJ_QUANTITY: RJ_QUANTITY, USER_NAME: USER_NAME, CREATED_DATE: CREATED_DATE, LOCATIONTYPE: LOCATIONTYPE, TOWERTYPE: TOWERTYPE }),
  async: true,
  processData: false,
  cache: false,
  beforeSend:function(){
     return confirm("Are you sure?");
  },
  success: function (r) {
    if (r.d == "OK") {
    alert('Record Saved successfully');
    window.location.href = "UBRDashboard.aspx";
  },
  error: function (xhr) {
         alert('Error while selecting list..!!');
         window.location.href = "ErrorPage.aspx";
  }
 });

} else {
    // If you pressed Cancel!";

}

Please check with window.confirm

Method 7

I ran into this issue recently, so this is my answer, I am using jquery and jqueryconfirm, the “beforesend” callbak only allows the standard “alert” and “confirm” functions.

What I did is placing a “fake” submit button and hide the actual submit one, so it was easy dealing with the response from the custom confirm dialogs, once I got the affirmative answer from the dialog I call the “click” method of the hidden submit button.

...
<button id="confirmSave" type="button">Save</button>
<button id="save" class="is-hidden" type="submit"></button>
<button id="close" aria-label="close" type="reset">Cancel</button>
...

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0