Wordpress 和 Ajax 表单提交

Question

我完全迷失在这里。任何人都可以检查我在这里尝试创建的表单出了什么问题吗？它应该在 WP 自定义主题中使用 Ajax 发送数据，而无需在数据库中讲述任何内容。

控制台给了我一个错误，即“名字未定义”，jQuery 的第 67 行 -data:{name:firstname, email:email, message:comment,action:'validate_form'}但确实，我相信它会不止于此。

<form class="form">
      <div class="form__item form__item_no-margin">
        <input type="text" name="firstname" placeholder="What's your name?*" class="firstname" required>
        <p class="error-message">This is field is required!</p>
      </div>
      <div class="form__item">
        <input type="text" name="email" placeholder="What's your email address?*" class="email" required>
        <p class="error-message">This is field is required!</p>
      </div>
      <div class="form__item">
        <textarea name="comment" placeholder="Please, leave a message!*" class="textarea" required></textarea>
        <p class="error-message">This is field is required!</p>
      </div>
      <div class="form__item">
        <input type="button" name="submit" value="Send" class="submit-btn">
        <p class="error-message error-message_main val-error">All the required fields have to be filled out.</p>
        <p class="success-message val-success">Thanks. I'll contact you ASAP!</p>
      </div>
    </form>

还有一些 jQuery：

 jQuery(document).ready(function(){
  jQuery(".submit-btn").click(function(e){
  e.preventDefault();
  var name = jQuery(".firstname").val();
  var email = jQuery(".email").val();
  var message = jQuery(".textarea").val();
  var ajaxUrl = "/wp-admin/admin-ajax.php";

if(name === "" || email === "" || message === "") {
  jQuery(".val-error, .error-message").show();
  jQuery("html, body").animate({
    scrollTop: jQuery(".val-error").offset().top
}, 700)
}
else {
  jQuery.ajax({
    url: ajaxUrl, 
    method:"POST",
    data:{name:firstname, email:email, message:comment,action:'validate_form'},
    success: function(data) {
      jQuery("form").trigger("reset");
      jQuery(".val-success").show(fast);
        }
      });
    }
  });
});

在functions.php文件中的PHP：

add_action('wp_ajax_myaction', 'my_action_callback');
add_action('wp_ajax_nopriv_myaction', 'my_action_callback');


function my_action_callback(){
 $name= trim($_POST["firstname"]);
 $email = trim($_POST["email"]);
 $comment = trim($_POST["comment"]);

 $page_title = "New form submission";
 $message = "Name: $name \nEmail: $email \nMessage: $comment";
 mail('some@email.com', $page_title, $message, "Content-type: text/plain; charset=\"utf-8\"\n From: some@email.com" );
wp_die();

}

更新

附件是codepen中的新版本。PHP 在下面。

https://codepen.io/anon/pen/RVWaJY

add_action('wp_ajax_myaction', 'validate_form_callback');
add_action('wp_ajax_nopriv_myaction', 'validate_form_callback');


function validate_form_callback(){
$name= trim($_POST["firstname"]);
$email = trim($_POST["email"]);
$comment = trim($_POST["comment"]);

$page_title = "New form submission";
$message = "Name: $name \nEmail: $email \nMessage: $comment";
mail('some@email.com', $page_title, $message, "Content-type: 
text/plain; charset=\"utf-8\"\n From: some@email.com" );
wp_die();

}

Answer 1

认为这可能只是这个错字： var name = jQuery(".firstname").val(); 传递给数据的变量 name:firstname, 让我知道这是否解决了您的问题。如果没有，我会再看一遍。:)