Wordpress and Ajax form submission - php

Question

I'm totally lost here. Can anyone check what is going wrong with the form I'm trying to create here? It should send data with Ajax in WP custom theme without storying anything in the DB.
The console gives me an error that "firstname is not defined", line 67 of jQuery - data:{name:firstname, email:email, message:comment,action:'validate_form'} , but truly, I believe it will be more than that.
<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>
And some 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);
}
});
}
});
});
PHP in the functions.php file:
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();
}
UPDATE
Attached is the fresh version in codepen. PHP is down below.
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

Think it may just be this typo:
var name = jQuery(".firstname").val();
The variable passed to data
name:firstname,
Let me know if that solves your problem. If not, I will look again. : )

Answer 2

The first issue with the code you've posted, as you've already identified, is the error in the console.
You're creating a variable name (ln 4) and then trying to reference it as firstname (ln 19). You're doing the same thing in the PHP callback. The object in the AJAX request sets the value as name yet you're trying to retrieve it with firstname.
The same problem applies to comment. The best approach would be to pick a label and use it consistently. Mixing comment and message will only lead to confusion.
The second issue is with the action. Your JS code sets the action as validate_form but your callback fires on myaction.
JS Updates:
. . .
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 Updates:
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

Hello your data parameter need to be instead like this, you have inverted the way is suppose to be writting, your variable should be on the right side and the name you are going to use to call it in the php code should be in the left side:
data:{firstname:name, email:email, comment:message, action:'validate_form'},
remember that your variable your are passing are:
var name = jQuery(".firstname").val(); var email = jQuery(".email").val(); var message = jQuery(".textarea").val();
and in your php you are going to call like this:
$name= trim($_POST["firstname"]); $email = trim($_POST["email"]); $comment = trim($_POST["comment"]);