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

     } 
    }); 

});