Wordpress联系表单 - ajax，wp_mail

Question

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 = [e-mail];

            $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

Answer 1

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