Wordpress 和 Ajax 表单提交答案

【问题标题】：Wordpress and Ajax form submissionWordpress 和 Ajax 表单提交
【发布时间】：2017-09-12 15:33:04
【问题描述】：

我完全迷路了。谁能检查我在这里尝试创建的表单出了什么问题？它应该在 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();

}

【问题讨论】：

WordPress 中有数以千计的 ajax 教程。我什至在这里做到了：stackoverflow.com/questions/31587210/…。首先，永远不要那样称呼ajaxurl。将其本地化。其次，data 对象中的变量 firstname 在哪里？最后，你为什么不使用$ 而不是到处粘贴jQuery。把它放在你的`jQuery(document).ready(function($){. Is your jquery in a separate script, dependent on jQuery`?
嘿，伙计。感谢您的回复。问题是我不是技术人员。我花了 3 天时间才让我上面提交的代码至少可以通过验证工作。现在我不知道我应该去哪里。这就是我寻求帮助的原因。 WP 的 Codex 文档对我没有任何帮助。
@zametsv - 现在的实际问题是什么？（CodePen 只是表明没有 jQuery 存在，因此不工作）
@bestprogrammerintheworld 现在的问题是，即使我在表单字段中有数据，它仍然会验证它，如果没有任何内容，并显示错误消息。而且，它不会向 PHP 中的指定电子邮件发送任何数据。

标签： php jquery ajax wordpress

【解决方案1】：

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

【讨论】：

【解决方案2】：

正如您已经确定的那样，您发布的代码的第一个问题是控制台中的错误。

您正在创建一个变量 name (ln 4)，然后尝试将其引用为 firstname (ln 19)。你在 PHP 回调中做同样的事情。 AJAX 请求中的对象将值设置为name，但您尝试使用firstname 检索它。

同样的问题也适用于comment。最好的方法是选择一个标签并始终如一地使用它。混合使用comment 和message 只会导致混淆。

第二个问题是动作。您的 JS 代码将操作设置为 validate_form，但您的回调会在 myaction 上触发。

JS 更新：

. . .

var firstname = jQuery( ".firstname" ).val();
var email = jQuery(".email").val();
var comment = jQuery(".textarea").val();

. . .

method:"POST",
data: {
    firstname: firstname, 
    email: email,
    comment: comment,
    action: 'validate_form'
},

PHP 更新：

add_action( 'wp_ajax_validate_form', 'validate_form_callback' );
add_action( 'wp_ajax_nopriv_validate_form', 'validate_form_callback' );

function validate_form_callback() {

【讨论】：

内森，谢谢。所以我添加了你建议的所有更改，现在，控制台中的这个错误消失了，但是表单无论如何都不会发送数据，另外，即使所有字段都已填写，当我按下提交按钮时，它显示验证错误（如果未填写）。
@zametsv - 请更新您在原始问题中所做的工作，以便我们进一步帮助您:-)
@bestprogrammerintheworld 我更新了上面的代码。请看一下。
您确实更新了验证行，对吗？ if(name === "" || email === "" || message === "") { 应该是 if ( firstname ... comment ....

【解决方案3】：

您好，您的数据参数需要改为这样，您已经反转了假设写入的方式，您的变量应该在右侧，并且您将用于在 php 代码中调用它的名称应该是在左侧： data:{firstname:name, email:email, comment:message, action:'validate_form'},

请记住，您传递的变量是： var name = jQuery(".firstname").val(); var email = jQuery(".email").val(); var message = jQuery(".textarea").val();

在你的 php 中你会这样调用：

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

【讨论】：