title: Ajax form submit for wordpress
body: <p>So, here is my codes:</p>
  
  <p><strong>form-checkout.php</strong></p>
  
  <pre><code>&lt;form id="rh_checkout_ajax" name="checkout" method="post" class="checkout woocommerce-checkout"  enctype="multipart/form-data"&gt;
  
  &lt;?php if ( sizeof( $checkout-&gt;checkout_fields ) &gt; 0 ) : ?&gt;
  
      &lt;?php do_action( 'woocommerce_checkout_before_customer_details' ); ?&gt;
  
      &lt;div class="col2-set" id="customer_details"&gt;
          &lt;div class="col-1"&gt;
              &lt;?php do_action( 'woocommerce_checkout_billing' ); ?&gt;
          &lt;/div&gt;
  
          &lt;div class="col-2"&gt;
              &lt;?php do_action( 'woocommerce_checkout_shipping' ); ?&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;?php do_action( 'woocommerce_checkout_after_customer_details' ); ?&gt;
  
  
  &lt;?php endif; ?&gt;
  
  &lt;?php do_action( 'woocommerce_checkout_before_order_review' ); ?&gt;
  
  &lt;div id="order_review" class="woocommerce-checkout-review-order"&gt;
      &lt;?php do_action( 'woocommerce_checkout_order_review' ); ?&gt;
  &lt;/div&gt;
  
  &lt;?php do_action( 'woocommerce_checkout_after_order_review' ); ?&gt;
  
  &lt;input value="send" type="submit" name="buy_product" style="display:none;" id="rh_product_add_done_click"&gt;&lt;/input&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>my_js.js</strong></p>
  
  <pre><code>//Ajax checkout submit
  jQuery('#rh_checkout_ajax').submit(function(e){
  
  var name = jQuery(this).attr('name'); 
  
  jQuery.ajax({ 
       data: {action: 'contact_form', name:name},
       type: 'post',
       url: ajaxurl,
       success: function(data) {
            alert(data); 
  
      }
  });
  
  });
  </code></pre>
  
  <p><strong>functions.php</strong></p>
  
  <pre><code>//Ajax submit callback
  add_action('wp_ajax_contact_form', 'contact_form');
  add_action('wp_ajax_nopriv_contact_form', 'contact_form');
  
  function contact_form()
  {
     echo $_POST['name'];    
  }
  </code></pre>
  
  <p><strong>What happens normally</strong></p>
  
  <p>So, when a product is purchased, then the user is redirected to <code>order-detail</code> page which shows what he/she just bought.</p>
  
  <p><strong>What I want it to happen:</strong></p>
  
  <p>I am trying to make it so that the form is submitted via ajax and the user is NOT redirected to the order-detail page, but rather stays in the product page (so, no refresh nor redirect).</p>
  
  <p>I attempted to submit the form via ajax as above but not much of luck.</p>
  
  <p>Could someone help me out with this?</p>
  
  <p>Thanks!</p>