ajaxで送信フォームにエラーがあり、ワードプレスでメールを送信する

Question

header.phpで書かれたカスタムフォームをajaxで送信しようとしましたが、送信されたデータで特定のメールアドレスにメールを送信しようとしました。 tahtはjqueryファイルがロードされていることを意味しますが、ajaxurlを呼び出してメールを送信しようとすると404エラーが発生します。私は100％エラーがajax呼び出しであることを確認しています。メールを送信するためのfunction.phpで関数を作成する必要がありますが、解決できない人は誰でもこの問題を解決できますか？ header.phpの中function.phpでjqueryのファイルを呼び出す

<form id="wp_con_form" method="post"> 
    <ul class="form-list wp_contact_form_ul cf"> 
    <li> 
     <input type="text" name="name" id="name" placeholder="Name *" class="text-field wp_con_frm_name"> 
    </li> 
    <li> 
     <input type="text" name="phone" id="phone" placeholder="Phone *" class="text-field wp_con_frm_phone"> 
    </li> 
    <li> 
     <input type="text" name="email" id="email" placeholder="Email *" class="text-field wp_con_frm_email"> 
    </li> 
    <li> 
     <input type="text" name="agency" id="agency" placeholder="agency" class="text-field "> 
    </li> 
    <li class="full"> 
     <textarea name="message" id="message" placeholder="Message *" class="text-field wp_con_frm_message"></textarea> 
    </li> 
    <li class="form-button"> 
     <input type="submit" value="Send" id="wp_con_frm_btn" class="button" /> 
    </li> 
    <div class="wp_cont_form_msg"></div> 
    </ul> 
</form> 

がでメールを送信するための

wp_enqueue_style('themestyle', get_template_directory_uri() . '/assets/css/style.css',false,'1.1','all'); 

wp_localize_script("themestyle","the_ajax_theme", array("ajaxurl_anyName" => admin_url("admin-ajax.php"))); 

jQueryの検証とAJAX呼び出しのためのファイル

var j = jQuery.noConflict(); 

j(document).ready(function(){ 
function validateContact(){ 
     var output = true; 
     j('.wp_contact_form_ul li').removeClass('wp_cont_frm_err_msg'); 

     if(!(j(".wp_con_frm_name").val())){ 
      j(".wp_con_frm_name").parent().addClass('wp_cont_frm_err_msg'); 
      output = false; 
     } 

     if(!(j(".wp_con_frm_phone").val())){ 
      j(".wp_con_frm_phone").parent().addClass('wp_cont_frm_err_msg'); 
      output = false; 
     } 

     if(!j(".wp_con_frm_phone").val().match(/^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/)) 
     { 
      j(".wp_con_frm_phone").parent().addClass('wp_cont_frm_err_msg'); 
      output = false; 
     }   

     if(!(j(".wp_con_frm_email").val())){ 
      j(".wp_con_frm_email").parent().addClass('wp_cont_frm_err_msg'); 
      output = false; 
     } 

     if(!j(".wp_con_frm_email").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) 
     { 
      j(".wp_con_frm_email").parent().addClass('wp_cont_frm_err_msg'); 
      output = false; 
     }   

     if(!(j(".wp_con_frm_message").val())){ 
      j(".wp_con_frm_message").parent().addClass('wp_cont_frm_err_msg'); 
      output = false; 
     } 
     return output; 
    } 

    /* send contact form data to email */ 

    function afterSubmit(getobj) 
    { 
     if(getobj.status) 
     {   
      j('#wp_con_form')[0].reset(); 
      j('#wp_con_form .wp_cont_form_msg').html(getobj.message).slideDown().delay(5000).slideUp();    
     } 
     else 
     {        
      j('#wp_con_form .wp_cont_form_msg').html(getobj.message).slideDown().delay(5000).slideUp(5000);     
     } 
    } 

    j('#wp_con_frm_btn').click(function(){ 
     var output = validateContact(); 
     if(output){ 
      var dataString = j("#wp_con_form").serialize(); 
      j.ajax({ 
       type: "POST", 
       url: ajaxurl, 
       dataType:"json", 
       data: dataString,    
      }).always(function(data) 
      {   
       afterSubmit(data); 
      }); 
     } 
     return false; 
    }); 

}); 

コードです

フォームfunction.php

$name = $_POST['name']; 
$phone = $_POST['phone']; 
$email = $_POST['email']; 
$msg = $_POST['message']; 
$to  = 'yourname@example.com'; 

$subject = 'List Qwick'; 
$message = 'Name: '.$name. "\r\n" . 
      'Phone: '.$phone. "\r\n" . 
      'Email: '.$email. "\r\n" . 
      'Message: '.$msg. "\r\n" . 

$headers = "From: ".$email."\r\n" .'X-Mailer: PHP/' . phpversion(); 

if(wp_mail($to, $subject, $message, $headers)) 
{ 
    $getMessage = '<p class="success">Your Email Has Been Sent Successfully</p>';   
    echo json_encode(array('status'=>1,'message'=>$getMessage)); 
} 
else 
{ 
    $getMessage = '<p class="error">Mail function not working..</p>';   
    echo json_encode(array('status'=>0,'message'=>$getMessage)); 
} 

Answer 1

、あなたが実際にthe_ajax_themeと呼ばれるオブジェクトを作成している、とそのプロパティのいずれかがajaxurl_anyNameと呼ばれ、あなたのAjaxのURLが含まれています。あなたのAjax呼び出しで

wp_localize_script('themestyle', 'the_ajax_theme', array(
    'ajaxurl_anyName' => admin_url('admin-ajax.php') 
)); 

、あなたは存在しませんajaxurlにアクセスしようとしています。実際に定義している値を使用するには、wp_localize_script()で定義した名前を使用する必要があります。だから、あなたのAjaxの呼び出しは次のようになります。

j('#wp_con_frm_btn').click(function(){ 
    var output = validateContact(); 
    if(output){ 
     var dataString = j("#wp_con_form").serialize(); 
     j.ajax({ 
      type: "POST", 
      url: the_ajax_theme.ajaxurl_anyName, 
      dataType:"json", 
      data: dataString,    
     }).always(function(data) 
     {   
      afterSubmit(data); 
     }); 
    } 
    return false; 
}); 

私はthemeSlug.ajaxURLような名前を短く使用することをお勧めします。

Answer 2

ajaxurlが設定されていないように見えるので、「未定義」URLに404が表示されます。その値を設定し、設定する必要があります。あなたがJavaScriptのためのAjaxのURLが利用できるようにすると

Answer 3

actionの形式のWordPressのadmin-ajax.phpファイルが必要な場合があります。あなたはJavaScriptでajaxurlを定義しているよう

<form action="<?php echo admin_url('admin-ajax.php') ?>" method="post"> 

また、それは見ていません。

var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>"; 

既存のコードでは、この行の上または下にそれを追加します：これを追加してみてください

var dataString = j("#wp_con_form").serialize();