Ajax calls going multiple times

Question

I have written a code in Javascript in which I have attached an input type submit to a form. On form submit the listener gets called.

The problem is that on when I click the button once, one ajax call occurs. When I click it again two calls occur while only one call should occur on each click. Similarly on clicking 3 times 3 calls occur and so on...(the calls get increasing). If I refresh the page then the number gets reset. I have tried everything but I had no luck. If anyone found out what is wrong here it would be awesome. Thanks in advance.

javascript code:

$('input.create-discounts-quotations').click(function () {

    var discount_quotation_type = $('input.quotation-discount-type').val();

    if (discount_quotation_type == "value") {

        var total = $('input.discount-input-quotation').val();
        var discounted_price = product_price - total;
        $('#final_discounted_amount').val(discounted_price);

        $("table.product-response-table tr").each(function () {
            var row = $(this).index() + 1;
            var td = $(this).find('td.quotation-response-discounts');

            $(td).each(function () {
                $(this).html(total);
            });
        });
        $("table.product-response-table tr").each(function () {
            var row = $(this).index() + 1;
            var td = $(this).find('td.product_final_price_discounted');

            $(td).each(function () {
                $(this).html(discounted_price);
            });
        });
        var form1 = $('form#quotation_discount_update_form');
        form1.on("submit", function (e) {
            var form_data1 = form1.serialize();
            $.ajax({
                type: 'POST',
                url: form1.attr('action'),
                data: form_data1,
                dataType: "json",
                success: function (data) {
                    $('.quotation-discount-status-update').empty();
                    $('.quotation-discount-status-update').append('<div class="alert alert-success">Discount Added</div>');
                }
            });

            e.preventDefault();
        });
    }
    if (discount_quotation_type == "percentage") {
        var total = $('input.discount-input-quotation').val();
        var temp_first = product_price;
        var temp1 = total / 100;
        var temp2 = temp1 * product_price;
        var discounted_price = product_price - temp2;
        $('#final_discounted_amount').val(discounted_price);

        $("table.product-response-table tr").each(function () {
            var row = $(this).index() + 1;
            var td = $(this).find('td.quotation-response-discounts');

            $(td).each(function () {
                $(this).html(total);
            });
        });
        $("table.product-response-table tr").each(function () {
            var row = $(this).index() + 1;
            var td = $(this).find('td.product_final_price_discounted');

            $(td).each(function () {
                $(this).html(discounted_price);
            });
        });
        var form1 = $('form#quotation_discount_update_form');
        form1.on("submit", function (e) {
            var form_data1 = form1.serialize();
            $.ajax({
                type: 'POST',
                url: form1.attr('action'),
                data: form_data1,
                dataType: "json",
                success: function (data) {
                    $('.quotation-discount-status-update').empty();
                    $('.quotation-discount-status-update').append('<div class="alert alert-success">Discount Added</div>');
                }
            });

            e.preventDefault();
        });
    }
    if (discount_quotation_type == "not_selected") {
        $('.quotation-discount-status-update').empty();
        $('.quotation-discount-status-update').append('<div class="alert alert-danger">Discount Method Not Selected</div>');
        return false;
    }
   //        return false;
});

Answer 1

That happen because every time you click your code will reattach the submit event so it will be duplicated in every click.

You should never attach the events inside other events, please put the submit event outside of the click event and the code should work, example :

var form1 = $('form#quotation_discount_update_form');
form1.on("submit", function (e) {
    var form_data1 = form1.serialize();

    $.ajax({
        type: 'POST',
        url: form1.attr('action'),
        data: form_data1,
        dataType: "json",
        success: function (data) {
            $('.quotation-discount-status-update').empty();
            $('.quotation-discount-status-update').append('<div class="alert alert-success">Discount Added</div>');
        }
    });

    e.preventDefault();
});

Else you have to remove the event handler every time using .off(), like :

form1.off("submit").on("submit", function (e) {