Ajax表單提交的WordPress

Question

所以，這裏是我的代碼：

形式，checkout.php

<form id="rh_checkout_ajax" name="checkout" method="post" class="checkout woocommerce-checkout" enctype="multipart/form-data"> 

<?php if (sizeof($checkout->checkout_fields) > 0) : ?> 

    <?php do_action('woocommerce_checkout_before_customer_details'); ?> 

    <div class="col2-set" id="customer_details"> 
     <div class="col-1"> 
      <?php do_action('woocommerce_checkout_billing'); ?> 
     </div> 

     <div class="col-2"> 
      <?php do_action('woocommerce_checkout_shipping'); ?> 
     </div> 
    </div> 

    <?php do_action('woocommerce_checkout_after_customer_details'); ?> 


<?php endif; ?> 

<?php do_action('woocommerce_checkout_before_order_review'); ?> 

<div id="order_review" class="woocommerce-checkout-review-order"> 
    <?php do_action('woocommerce_checkout_order_review'); ?> 
</div> 

<?php do_action('woocommerce_checkout_after_order_review'); ?> 

<input value="send" type="submit" name="buy_product" style="display:none;" id="rh_product_add_done_click"></input> 
</form> 

my_js.js

//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); 

    } 
}); 

}); 

的functions.php

//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'];  
} 

會發生什麼情況正常

所以，當購買的產品，然後將用戶重定向到order-detail網頁，其中顯示了他/她剛剛買了。

我希望它發生什麼：

我試圖讓這個形式是通過AJAX提交，用戶不是重定向到訂單詳細信息頁面，而是停留在產品頁面（所以，不刷新也不重定向）。

我試圖通過上面的ajax提交表單，但沒有太大的好運。

有人可以幫我解決這個問題嗎？

謝謝！

Answer 1

您必須防止表單正常提交。在您的js文件中，添加e.preventDefault()。像這樣：

jQuery('#rh_checkout_ajax').submit(function(e){ 
    e.preventDefault(); 
    var name = jQuery(this).attr('name'); 

    jQuery.ajax({ 
     data: {action: 'contact_form', name:name}, 
     type: 'post', 
     url: ajaxurl, 
     success: function(data) { 
      alert(data); 

     } 
    }); 

});