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

形式：AJAX-quotebox-script.jsで

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

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を持つことはできません。同じIDを持つ追加のフィールドはモーダルに表示されますが、IDが同じであるため混乱の原因となります。これはすべてのフィールドに適用されます。