我完全迷失在这里。任何人都可以检查我在这里尝试创建的表单出了什么问题吗?它应该在 WP 自定义主题中使用 Ajax 发送数据,而不在数据库中记录任何内容。
控制台给我一个错误“firstname is not defined”,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();
最佳答案
认为可能只是这个错字:
var name = jQuery(".firstname").val();
传递给数据的变量
姓名:名字,
让我知道这是否能解决您的问题。如果没有,我会再看一遍。 :)
关于php - Wordpress 和 Ajax 表单提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43444309/