Question

我想创建一个简单的联系表单，使用jquery来验证表单，使用ajax将它传递给php和WP 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和fadeOut功能未显示

    $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 = me@test.co.uk;

            $subject = 'Request from'. $name;

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

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

        }   
    }

单击提交时，我在chrome dev工具的“网络”选项卡中找到[对象％20Object]的404 Not Found。

我怎样才能让它发挥作用

Answer 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函数发送信息：

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

Wordpress联系表单 - ajax，wp_mail

1 个答案: