Réponse "non définie" lors de la soumission du formulaire de contact sans actualisation de la page

Question

Je suis en train de créer un formulaire de contact de base (trois champs) pour mon site. J'ai le formulaire construit en HTML et CSS; tout ce que je devais faire était de construire le PHP pour que les réponses du formulaire soient envoyées à mon email. J'ai trouvé un tutoriel et construit le fichier PHP (qui a fonctionné), mais je voulais que le formulaire soit soumis en arrière-plan et ne laisse pas la page d'origine. J'ai trouvé un online tutorial pour le faire en utilisant Ajax, et après quelques ajustements, je l'ai eu principalement au travail. Le seul problème que j'ai maintenant est que quand je reçois l'email avec la réponse, le champ de message revient comme "non défini." J'ai une bonne compréhension de HTML et CSS, mais PHP et JS sont nouveaux pour moi (je viens de commencer à les apprendre pour ce projet), donc toute aide sur la façon de résoudre ce problème et de corriger éventuellement un mauvais code serait un énorme aide. J'ai inclus le formulaire HTML, PHP et JS ci-dessous (PHP et JS sont tous deux nommés «contact. [Filetype].

HTML

<div id="contact_form"> 
    <form name="contact" action=""> 
    <div class="field"> 
     <label for="name">Name</label> 
     <input type="text" name="name" id="name" required/> 
    </div> 
    <div class="field"> 
     <label for="email">Email</label> 
     <input type="text" name="email" id="email" required/> 
    </div> 
    <div class="field"> 
     <label for="comments">Comments</label> 
     <textarea name="comments" id="comments" rows="3"></textarea> 
    </div> 
    <ul class="actions"> 
     <li><input type="submit" name="submit" class="button" id="submit_btn" value="Send Message" /></li> 
    </ul> 
    </form> 
</div> 

PHP

<?php 
$name = $_POST['name']; 
$email = $_POST['email']; 
$comments = $_POST['comments']; 
$formcontent="From: $name \n Message: $comments \n"; 
$recipient = "alltheladsmedia@gmail.com"; 
$subject = "Message From Website"; 
$mailheader = "From: $email \r\n"; 
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!"); 
echo "Thank You!" . " -" . "<a href='index.html' target='_blank' style='text-decoration:none;color:#505050;'> Return Home</a>"; 
?> 

JS

$(function() { 
    $('.error').hide(); 
    $(".button").click(function() { 
    // validate and process form here 

    $('.error').hide(); 
    var name = $("input#name").val(); 
     if (name === "") { 
     $("label#name_error").show(); 
     $("input#name").focus(); 
     return false; 
    } 
     var email = $("input#email").val(); 
     if (email === "") { 
     $("label#email_error").show(); 
     $("input#email").focus(); 
     return false; 
    } 
     var message = $("input#message").val(); 
     if (message === "") { 
     $("label#message_error").show(); 
     $("input#message").focus(); 
     return false; 
    } 

$.ajax({ 
    type: "POST", 
    url: "contact.php", 
    data: {name:name,email:email,message:message}, 
    success: function() { 
    $('#contact_form').html("<div id='success'></div>"); 
    $('#success').html("<h2>Your message was successfully submitted!</h2>") 
    .append("<p>We will get back to you within 24-48 hours.</p>") 
    .hide() 
    .fadeIn(1500, function() { 
     $('#success'); 
    }); 
    } 
}); 
return false; 
    }); 
    }); 

Answer 1

Dans votre balisage, l'identifiant du champ est "commentaires" mais vous recherchez "message" dans votre JS et PHP

Answer 2

vous avez imprimer votre résultat mail

if(@mail($recipient, $subject, $formcontent, $mailheader)) 
    { 
     echo "Mail Sent Successfully"; 
    }else{ 
     echo "Mail Not Sent"; 
    } 

Answer 3

Faire quelques changements si vous utilisez jquery 3.

Modifier cette

$(".button").on("click", function() { 
    // Validation here 
    // Put ajax outside this block 
}); 

Modifier formulaire HTML comme ce code.

Vérifier la dév. outils si l'attribut d'action est ajouté correctement par le php.

<form id="contact" name="contact" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post" > 

Et appel ajax dans ce

$("#contact").on("submit", function(e) { 
    e.preventDefault(); // Now the page won't redirect 
    var url = $(this).attr("action"); 
    // Check console if contact is printed after the form is submitted 
    // If contact is printed the url is right 
    console.log(url); 
    $.ajax({ 
    type: "POST", 
    url: url, 
    data: $(this).serialiseArray(), // Found a typo here fixed 
    success: function() { 
     // Your stuffs 
    } 
    }); 
}); 

Ne pas mettre l'appel ajax dans la vérification du champ de saisie. Faites-moi savoir si vous trouvez un problème afin que je puisse réparer mon code.