WordPress的前端簡單的Ajax表單不工作

Question

幾個小時我一直無法弄清楚這一點。我對Ajax非常青睞，我希望我只是錯過了一些明顯的東西。請保存我的頭髮！

在functions.php的

// Quote box 
function ajax_quotebox_init(){ 

    wp_register_script('ajax-quotebox-script', get_template_directory_uri() . '/ajax-quotebox-script.js', array('jquery')); 
    wp_enqueue_script('ajax-quotebox-script'); 

    wp_localize_script('ajax-quotebox-script', 'ajax_quotebox_object', array( 
     'ajaxurl' => home_url('wp-admin/admin-ajax.php'), 
     'redirecturl' => home_url(), 
     'loadingmessage' => __('Processing, please wait...') 
    )); 

    // Enable the user with no privileges to run ajax_quotebox() in AJAX 
    add_action('wp_ajax_nopriv_ajax_quotebox', 'ajax_quotebox'); 
} 
add_action('init', 'ajax_quotebox_init'); 

function ajax_quotebox() { 

    // First check the nonce, if it fails the function will break 
    //check_ajax_referer('ajax-quotebox-nonce', 'security'); 

    $first_name = sanitize_text_field($_POST['first_name']); 
    $last_name = sanitize_text_field($_POST['last_name']); 
    $vehicle = sanitize_text_field($_POST['vehicle']); 
    $phone = sanitize_text_field($_POST['phone']); 
    $zip = sanitize_text_field($_POST['zip']); 

    // Nonce is checked?? get the POST data and sign user on 
    if ($first_name !== 'Joe'){ 
     echo json_encode(array('message'=>__('Did not get "Joe" for first_name'))); 
    } else { 
     echo json_encode(array('message'=>__('Form successful, redirecting...'))); 
    } 

    die(); 
} 

形式：

<div class="quotebox-container"> 
    <h3 class="wow animate bounceIn">Get <span>Ca$h</span> Now!</h3> 
    <hr> 
    <form id="quotebox" action="quotebox" method="post"> 

    <div class="row"> 
     <div class="col-xs-6 col-sm-6 col-md-6"> 
      <div class="form-group"> 
       <input type="text" name="first_name" id="first_name" class="form-control input-sm" placeholder="First Name"> 
      </div> 
     </div> 
     <div class="col-xs-6 col-sm-6 col-md-6"> 
      <div class="form-group"> 
       <input type="text" name="last_name" id="last_name" class="form-control input-sm" placeholder="Last Name"> 
      </div> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-xs-12 col-sm-12 col-md-12"> 
      <div class="form-group"> 
       <input type="text" name="vehicle" id="vehicle" class="form-control input-sm" placeholder="Vehicle (ex: 2009 Honda Civic EX)"> 
      </div> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-xs-7 col-sm-7 col-md-7"> 
      <div class="form-group"> 
       <input type="text" name="phone" id="phone" class="form-control input-sm" placeholder="Phone Number"> 
      </div> 
     </div> 
     <div class="col-xs-5 col-sm-5 col-md-5"> 
      <div class="form-group"> 
       <input type="text" name="zip" id="zip" class="form-control input-sm" placeholder="Zip Code"> 
      </div> 
     </div> 
    </div> 

    <button type="submit" id="submit" name="submit" class="btn btn-primary btn-lg btn-block c-btn-square quote quotebox-submit" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Processing"><i class="fa fa-hand-o-right wow animate fadeIn"></i> Tell Me How Much</button> 

    <p class="status"></p> 

    <?php wp_nonce_field('ajax-quotebox-nonce', 'security') ?> 

    </form> 

    <div class="quote-help"> 
     We'll contact you promptly with an amazing quote! 
    </div> 
</div> 

在Ajax的quotebox-的script.js

jQuery(document).ready(function($) { 

    // Perform AJAX quotebox action on form submit 
    $('form#quotebox').on('submit', function(e){ 
     $('form#quotebox p.status').show().text(ajax_quotebox_object.loadingmessage); 
     $.ajax({ 
      type: 'POST', 
      dataType: 'json', 
      url: ajax_quotebox_object.ajaxurl, 
      data: { 
       'action': 'ajax_quotebox', //calls wp_ajax_nopriv_quote_box 
       'first_name': $('#first_name').val(), 
       'last_name': $('#last_name').val(), 
       'vehicle': $('#vehicle').val(), 
       'phone': $('#phone').val(), 
       'zip': $('#zip').val(), 
       'security': $('form#quotebox #security').val() }, 
      success: function(data){ 
       $('p.status').text(data.message); 
       $('.submit').button('reset'); 
      } 
     }); 
     e.preventDefault(); 
    }); 

}); 

我是從形式獲得的唯一數據：

action:ajax_quotebox 
first_name: 
last_name: 
vehicle: 
phone: 
zip: 
security:fcf393d8d8 

Answer 1

e.preventDefault（）;應該是這樣的函數的頂部：

jQuery(document).ready(function($) { 

    // Perform AJAX quotebox action on form submit 
    $('form#quotebox').on('submit', function(e){ 
     //At the top to prevent the default action before the form data is parsed. 
     e.preventDefault(); 

     $('form#quotebox p.status').show().text(ajax_quotebox_object.loadingmessage); 
     $.ajax({ 
      type: 'POST', 
      dataType: 'json', 
      url: ajax_quotebox_object.ajaxurl, 
      data: { 
       'action': 'ajax_quotebox', //calls wp_ajax_nopriv_quote_box 
       'first_name': $('#first_name').val(), 
       'last_name': $('#last_name').val(), 
       'vehicle': $('#vehicle').val(), 
       'phone': $('#phone').val(), 
       'zip': $('#zip').val(), 
       'security': $('form#quotebox #security').val() }, 
      success: function(data){ 
       $('p.status').text(data.message); 
       $('.submit').button('reset'); 
      } 
     }); 
    }); 
}); 

你也可以改變按鈕類型只是「按鈕」，因爲我們不需要提交行動，但可能不是可訪問的有效或最佳實踐即使它會起作用。

編輯 我查看了你的頁面源，並且你有多個輸入id =「first_name」。您不能在多個位置擁有ID。具有相同ID的附加字段似乎處於模式中，但由於它們具有相同的ID，它仍會造成混淆。這適用於所有的領域。