Wordpress 和 Ajax 表单提交

Posted

技术标签:

【中文标题】Wordpress 和 Ajax 表单提交【英文标题】:Wordpress and Ajax form submission 【发布时间】: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 教程。我什至在这里做到了:***.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 中的指定电子邮件发送任何数据。 【参考方案1】:

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

【讨论】:

【参考方案2】:

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

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

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

第二个问题是动作。您的 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"]);

【讨论】:

以上是关于Wordpress 和 Ajax 表单提交的主要内容,如果未能解决你的问题,请参考以下文章

陷阱 Ajax 表单提交事件

我可以使用 Ajax 和 Visual Composer(原始 HTML 和原始 JS)提交 HTML Salesforce 表单吗

通过 AJAX 更新 wordpress 表单第二次不起作用

WordPress NinjaForms JavaScript API 提交前

ajax表单提交成功后,为何表单里还有上次填入的数据,如何解决

一个页面中可不可以同时使用submit提交表单和ajax提交表单