doudi1750
2014-10-11 13:04
浏览 86
已采纳

Wordpress联系表单 - ajax,wp_mail

I'm tring to create a simple contact form using jquery to validate the form and ajax to pass it to php and WP wp_mail to send it.

I have a simple form like this.

    <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 to validate the inputs and send to php

//IsEmail and fadeOut functions aren't shown

    $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;
    }   

And the php in the function.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 = me@test.co.uk;

            $subject = 'Request from'. $name;

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

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

        }   
    }

I'm getting a 404 Not Found for [object%20Object] in the Network tab of chrome dev tools when the submit is clicked.

How can I get this to work

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dongnao2048 2014-10-11 14:08
    已采纳

    you need to enqueue some scripts:

    Let's say you validation script is in a file called 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' );
    

    Also you need to add this action hook:

    add_action('wp_ajax_amc_form_fr', 'my_action_callback');
    

    Then, use ajax jquery function to send info:

    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 
       }
    

    If im not wrong, i think that is. And check this link

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题