title: How to reset event.preventDefault() of a form submit event?
body: <p>I have a form that submits shopping cart data to a payment gateway (WorldPay) payment processing page. I need to perform a couple of extra logic the moment the custom decides to proceed to the payment but before the form submission itself. Basically, I simply want to generate a unique reference to the order at the very last moment.</p>
  
  <p>Here is the jQuery code for the submit event:</p>
  
  <pre><code>$(function(){
  
     $('#checkout-form').submit(function(e){
  
         var $form = $(this);
  
         var $cartIdField = $('#cartId');
  
         console.log($cartIdField.val());
  
         if($cartIdField.val() == ''){
  
              e.preventDefault();
  
              $.ajax({
                  url: baseUrl + '/shop/ajax/retrieve-shopping-cart-reference/',
                  data: {}, type: 'post', dataType: 'json',
                  success: function(json){
                      if(json.error == 0){
                          $('#cartId').val(json.data.cart_reference_number);
                          $form.submit();
                      }else{
                          alert(json.message);
                      }
                  }
              });
          }else{
              console.log('Submitting form...'); //Does not submit!
          }
     });
  
  });
  </code></pre>
  
  <p>The problem is that during the second submit triggered within the <code>success:</code> clause, the form isn't submitted still. I am assuming <code>event.preventDefault()</code> persists beyond the current condition.</p>
  
  <p>How can I get around this?</p>