2014-10-11 2 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 일 때 크롬 개발자 도구의 네트워크 탭에 [객체 % 20Object]에 대해 404를 찾을 수 없습니다. 핥아.

의 유효성 검사 스크립트 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'); 

또한 당신이 필요로 :

어떻게 당신은 몇 가지 스크립트를 대기열에해야 할이

+0

[문의 양식 7] (https://wordpress.org/plugins/contact-form-7/)과 같은 플러그인을 사용하지 않는 이유는 무엇입니까? 당신이 원하는 모든 것을 다룰 수 있습니다. –

+0

문의 양식 7은 보내지는 메일을 처리하거나 그냥 정보를 캡처하는 것입니까? 몇 가지 양식을 이메일을 보내고, 내부 응답을 보내고 있습니다. – ttmt

+0

그래도 전송을 처리합니다. –

답변

1

을 작동시킬 수 있습니다 이 동작 추가 후크 :

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