Wordpress Frontend Простая форма 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> 

в АЯКС-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'); 
      } 
     }); 
    }); 
}); 

Вы можете также изменить тип кнопки просто «кнопка», так как мы не нужны представить действие, но это не может быть действительной или наилучшей практикой для обеспечения доступности даже если он будет работать.

EDIT Я посмотрел ваш источник страницы, и у вас есть несколько входов с id = "first_name". У вас не может быть ID в нескольких местах. Дополнительные поля с одинаковыми идентификаторами кажутся модальными, но поскольку они имеют одинаковый идентификатор, это все равно вызовет путаницу. Это относится ко всем полям.