How to submit jquery ajax post request only once?

Question

I am checking out the final order in WordPress using jquery ajax post request.

My Add To Cart and Check out order has the same code but the checkout order code submits the request 3 times.

var j = jQuery.noConflict();
j('.wc-checkout').on('submit', function(e) {
    e.preventDefault();

    var billing_customer_type = j("#billing_customer_type").val();
    // .. and so on...

    j.ajax({
        type: 'POST',
        url: 'http://localhost/mywebsite/?wc-ajax=checkout',
        cache: false,
        data: {
            'billing_customer_type': billing_customer_type,
            // and so on..
        },
        success: function(result) {
            console.log('Order Checked Out');
        },
        error: function(xhr, status, error) {
            console.log(error);
        },
        complete: function() {}
    });
});


<form class="wc-checkout" method="post" enctype="multipart/form-data"
    novalidate="novalidate">
    <div class="form-control">
        <label>Lorem Ipsum: <abbr class="required" title="required">*</abbr></label>
        <select name="billing_customer_type" id="billing_customer_type"
            class="select thwcfd-enhanced-select select2-hidden-accessible enhanced"
            data-placeholder="" tabindex="-1" aria-hidden="true">
            <option value="A" selected="selected">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
    </div>

    <div class="form-control">
        <!-- _wpnonce help protect URLs and forms from certain types of misuse -->
        '.wp_nonce_field("ajax_checkout").'
        <input type="submit" value="Order Now" class="epo-proceed-checkout-btn">
    </div>

</form>

Do you know how can i make the .on submit only once? Any idea is appreciated. Thanks

Answer 1

Check it but you need to test it in your environment.

 var isPost = 0; $(document).ready(function() { $("button").click(function() { if (isPost == 0) { $.get("https://stackoverflow.com", function() { console.log('post'); }); isPost = 1; } }); });

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> </script> </head> <body> <button>Send an HTTP GET request to a page and get the result back</button> </body> </html>

Answer 2

I have solved this problem by adding stopImmediatePropagation(); and return false;

Updated code:

  j('.wc-checkout').on('submit', function(evt) {
    evt.preventDefault();

    var billing_customer_type = j("#billing_customer_type").val();
    // and so on...

    j.ajax({
      type: 'POST',
      url: 'http://localhost/mywebsite/?wc-ajax=checkout',
      cache: false,
      data: {
        'billing_customer_type':billing_customer_type,
        // and so on...
      },
      success: function (result) {
        console.log('Order Checked Out');
      },
      error: function(xhr,status,error) {
        console.log(error);
      },
      complete:function(){
      }
    });
    evt.stopImmediatePropagation(); // to prevent more than once submission
    return false; 


  });

How to submit jquery ajax post request only once?

Question

2 answers

solution1
1 2018-07-15 14:01:25

solution2
0 ACCPTED 2018-07-16 05:12:50

How to submit jquery ajax post request only once?

Question

2 answers

solution1 1 2018-07-15 14:01:25

solution2 0 ACCPTED 2018-07-16 05:12:50

solution1
1 2018-07-15 14:01:25

solution2
0 ACCPTED 2018-07-16 05:12:50