Übermittlung von WordPress- und Ajax-Formularen

Ich bin hier total verloren. Kann jemand überprüfen, was mit dem Formular, das ich hier zu erstellen versuche, schief geht? Es sollte Daten mit Ajax im benutzerdefinierten WP-Design senden, ohne etwas in der DB zu erzählen.

Die Konsole gibt mir einen Fehler, dass “firstname is not defined”, Zeile 67 von jQuery – data:{name:firstname, email:email, message:comment,action:'validate_form'} aber wirklich, ich glaube, es wird mehr als das sein.

<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>

Und etwas 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 der Datei functions.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('[email protected]', $page_title, $message, "Content-type: text/plain; charset=\"utf-8\"\n From: [email protected]" );
wp_die();

}

AKTUALISIEREN

Beigefügt ist die frische Version in Codepen. PHP ist unten.

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('[email protected]', $page_title, $message, "Content-type: 
text/plain; charset=\"utf-8\"\n From: [email protected]" );
wp_die();

}

Denke es könnte nur dieser Tippfehler sein:
var name = jQuery(".firstname").val();
Die an data übergebene Variable
name:firstname,
Lassen Sie mich wissen, ob das Ihr Problem löst. Wenn nicht, schaue ich nochmal. 🙂

Das erste Problem mit dem von Ihnen geposteten Code ist, wie Sie bereits festgestellt haben, der Fehler in der Konsole.

Sie erstellen eine Variable name (ln 4) und dann versuchen, es als zu referenzieren firstname (ln 19). Das Gleiche machen Sie im PHP-Callback. Das Objekt in der AJAX-Anforderung legt den Wert fest als name dennoch versuchen Sie, es mit abzurufen firstname.

Das gleiche Problem gilt für comment. Der beste Ansatz wäre, ein Etikett auszuwählen und es konsequent zu verwenden. Mischen comment und message wird nur zu Verwirrung führen.

Das zweite Problem betrifft die Aktion. Ihr JS-Code legt die Aktion als fest validate_form aber Ihr Rückruf wird ausgelöst 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() {

Hallo, Ihr Datenparameter muss stattdessen so sein, Sie haben die Schreibweise umgekehrt, Ihre Variable sollte auf der rechten Seite sein und der Name, den Sie verwenden werden, um sie im PHP-Code aufzurufen, sollte auf der linken Seite stehen Seite:
data:{firstname:name, email:email, comment:message, action:'validate_form'},

Denken Sie daran, dass Ihre Variable, die Sie übergeben, Folgendes ist:
var name = jQuery(".firstname").val(); var email = jQuery(".email").val(); var message = jQuery(".textarea").val();

und in deiner php rufst du so auf:

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