Question

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

控制台给了我一个错误，“firstname未定义”，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, 如果能解决您的问题，请告诉我。如果没有，我会再看一遍。：）

Answer 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() {

Answer 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表单提交

3 个答案: