2014-10-11 132 views
0

我正在創建一個簡單的聯繫表單,使用jquery來驗證表單和ajax,並將它傳遞給php和WP wp_mail來發送它。Wordpress聯繫表格 - ajax,wp_mail

我有一個這樣的簡單形式。

<form role="form"> 
     <div class="form-group"> 
      <label class="">Name</label> 
      <input type="text" id="name" class="form-control" name" /> 
     </div> 

     <div class="form-group"> 
      <label class="">Email</label> 
      <input type="text" id="email" class="form-control" name="email" /> 
     </div> 

     <?php wp_nonce_field('atex_php', 'atex_nonce'); ?> 

     <button class="submit">Submit</button> 

    </form> 

jQuery來驗證輸入和發送到PHP

// ISEMAIL和淡出功能未示出

$atj(function(){ 
     $atj('submit').click(function(e) { 
     e.preventDefault(); 

     if(verfiyFields()) { 

      $atj.post({ 
      data : { 
       action : "request", 
       firstName : $atj("#name").val(), 
       email : $atj("#email").val(), 
      } 
      }) 
     } 
     }); 
    }) 

    //Verfiy 
    function verfiyFields() { 
     var flag = true; 

     var name =  $atj('#name'); 
     var email =  $atj('#email'); 

     if(name.val().indexOf(' ') === -1){ 
     name.parent().prepend('<p class="form-error">Please enter name, first space last</p>'); 
     fadeOut(); 
     flag = false; 
     } 
     if(!IsEmail(email.val())){ 
     email.parent().prepend('<p class="form-error">Please enter valid email address</p>'); 
     fadeOut(); 
     flag = false; 
     } 
     return flag; 
    } 

而在function.php PHP的

add_action('wp_ajax_nopriv_request', 'my_action_callback'); 

    function my_action_callback() { 

     if (isset($_POST['atex_nonce']) && wp_verify_nonce($_POST['atex_nonce'], 'atex_php')) { 
      $name = $_POST['firstName']; 
      $email = $_POST['email']; 

      $send_to = [email protected]; 

      $subject = 'Request from'. $name; 

      $success = wp_mail($send_to, $subject, $message); 

      if($success){ 
       return true; 
      }else{ 
       return false; 
      } 

     } 
    } 

當提交是c時,我在chrome開發工具的網絡選項卡中找到了404找不到[object%20Object]舔。

我怎樣才能得到這個工作

+0

爲什麼不使用像[聯繫表格7](https://wordpress.org/plugins/contact-form-7/)這樣的插件?它可以處理你想要完成的任何事 – 2014-10-11 14:13:50

+0

聯繫表單7是否處理髮送的郵件,或者只是捕獲信息。我有幾個表單發送電子郵件,有些發送內部回覆。 – ttmt 2014-10-11 15:04:35

+0

是的,它也處理髮送 – 2014-10-11 15:07:28

回答

1

需要排隊一些腳本:

比方說,你驗證腳本是在一個名爲validationForm.js

文件
function ajaxScript(){ 
    $params = array(
    'ajaxurl' => admin_url('admin-ajax.php') 
    ); 

    wp_enqueue_script('validation', get_template_directory_uri() . '/js/validationForm.js',  array(), '', true); 
    wp_localize_script('validation', 'ajax_object', $params); 
} 

add_action('wp_enqueue_scripts', 'ajaxScript'); 

還需要加入這一行動掛鉤:

add_action('wp_ajax_amc_form_fr', 'my_action_callback'); 

然後,使用AJAX的jQuery函數來發送在fo:

var dataString = $(form).serialize(); 

jQuery.ajax({ 
    type: "POST", 
    url: ajax_object.ajaxurl, 
    dataType : 'JSON', 
     data : 'action=jQuery.ajax({ 
     type: "POST", 
     url: ajax_object.ajaxurl, 
     dataType : 'JSON', 
     data : 'action=amc_form_fr&'+dataString,&'+dataString, 

    success: function(response) { 
    console.log(response); 
    // your code 
    } 

如果我沒有錯,我認爲是。 And check this link