Ajax Call Repeating on button click

Question

I am developing an application in asp.net using mvc. I try to send an image's bytes to the controller through a jQuery ajax request and I am encountering a problem.

When I leave a field empty and click the submit button, the message will append "please enter this field". So, the ajax request should be stopped but when I fill in this input field and click the button, the ajax request is called two times and the image is also saved in the database two times.

How can I stop this duplication?

if (Productname == "") {
    alert("Please Enter Product Name");
    return;
}
else if (Ratei == "") {
    alert("Please Enter Product Price");
    return;
}
else if (URLi == "") {

    alert("Please Enter Ebay Url");
    return;
}
else {
    var postdata = { ProductName: Productname, ModelID: ModelID, Rate: Ratei, Discount: Discounti, Condition: Conditioni, Url: URLi, Desc: Descriptioni, shDesc: shDescriptioni }
    var ProductId = 0;
    $.ajax({

        type: "POST",
        // url: "/EcommerceAdmin/Admin/addProduct",
        url: "/Admin/addProduct",
        data: postdata,
        success: function (data) {
            ProductId = data.id;enter code here
        }
    });
}

score 0 · Accepted Answer · answered Aug 22 '19 at 17:05

The issue you're talking about is a duplicate submission. There are a couple ways to approach that problem.

The easiest is to disable the button early after you've evaluated the business rules.

A more sophisticated method is to throttle the submission so that multiple clicks are treated as a single.

The most sophisticated method is to use a nonce (one time use code) that the server can check and prevent a second submission.

And, of course, you can use multiple techniques to give a user experience while also protecting the back-end from bot-driven replays.

Ajax Call Repeating on button click

1 Answers1