javascript - 如何防止在for循环中自动提交表单

Question

我想通过每个循环计数中的表格获取一些信息。我有 ajax 来保存这些信息，然后在下一个循环计数中再次询问信息。但是，不幸的是它不起作用，它为每个计数保存相同的信息。所以我想防止在提交一次后自动提交表单。所以请帮助我，在此先感谢！

for (var i = 0; i < checkboxArr.length; i++) {

            var quoteModal = document.getElementById('quoteModal');
                quoteModal.style.display = "block";
                getContextId = checkboxArr[i];

            $('#quote_pn').on('submit', function(e){

                e.preventDefault();

                var addTotalQuote = parseFloat($('.shipping').val()) / checkboxArr.length;

                $.ajax({
                    type        : "POST",
                    data        : {getContextId: getContextId},
                    url         : "<?php echo site_url(); ?>" + "/partnumber/read_table",
                    dataType    : "json",
                    success     : function(data) {
                        var margin = parseFloat($('.margin').val());
                        var shipping = parseFloat($('.shipping').val());

                        var percantage = margin / 100;

                        var ind_cost = parseFloat(data.unit_price);
                        var qty = parseInt($('#quote_pn .quantity').val());

                        var unit_sell_price = percantage * ind_cost;
                        var total_unit_price = unit_sell_price + ind_cost;

                        var grand_sell_total = total_unit_price * qty;

                        var ind_landedCost = grand_sell_total / qty;

                        addTotalQuote = addTotalQuote + grand_sell_total;

                        var customer = $('#quote_pn .customer').val(),
                            manufac = data.manufac,
                            part = data.part,
                            step_code = data.step_code,
                            date_code = data.date_code,
                            warranty = data.warranty,
                            desc = data.description,
                            fob = data.fob,
                            stock = data.stock,
                            condition = data.condit,
                            unit_price = ind_landedCost,
                            quantity = qty,
                            target = data.target,
                            indcost = ind_cost,
                            ship = shipping;

                            $.ajax({
                                type    : "POST",
                                data    : { customer: customer, manufac:manufac, part: part, step_code: step_code, date_code: date_code, warranty: warranty, desc: desc, fob: fob, stock: stock, condition: condition, unit_price: unit_price, qty: quantity, target: target, ind_cost: indcost, shipping: ship},
                                url     : "<?php echo site_url(); ?>" + "/partnumber/insert_new_quote",
                                success : function(XHR, status, response) {
                                    alert("Quote has been added!");
                                    quoteModal.style.display = "none";
                                    $('#quote_pn')[0].reset();
                                },
                                error: function (XHR, status, response) {
                                   alert(response);
                                }

                            });
                    },
                    error       : function (XHR, status, response) {
                       alert(response);
                    }
                });
            });
        }

标签： javascriptjqueryarraysajaxajaxform

Answer 1

您还需要添加e.stopImmediatePropagation()到代码中。

e.preventDefault();+e.stopImmediatePropagation();将停止自动汇总。

另一种方法是使用return false;