Submitting html form and send it via email (PHP, AJAX, HTML)

Question

I'm a beginner developper i'm trying to create a form that the customers will fill, and send it via email and i'm stuck with two problems 1) The sucess message made with AJAX appear with the errors, when the cust click on submit button the error message appear as well as the sucess message ! 2) Nothing happen after submitting the form : no email sending even after the sucess of the form! here is the codage !

HTML;

  function validateText(id){ if($("#"+id).val() == null || $("#"+id).val() == ""){ $(".error-messages").fadeIn(); var input = $("#"+id); var select = $("#"+id); input.addClass("is-invalid"); select.addClass("is-invalid"); return false; } else { $(".error-messages").fadeOut(); var input = $("#"+id); var select = $("#"+id); input.removeClass("is-invalid"); select.removeClass("is-invalid"); return true; } } $(function() { $('.text-danger').hide(); $("#submitbtn").click(function() { // validate and process form here validateText("nom") validateText("prenom") validateText("email") validateText("tel") validateText("cell") validateText("adresse") validateText("gren") validateText("habitat") validateText("chauffage") validateText("climat") validateText("sousol") validateText("facture") var dataString = 'nom='+ nom + '&email=' + email + '&tel=' + tel + '&cell=' + cell + '&adresse=' + adresse + '&gren=' + gren + '&habitat=' + habitat + '&chauffage=' + chauffage + '&climat=' + climat + '&sousol=' + sousol + '&tel=' + facture; //alert (dataString);return false; $.ajax({ type: "POST", url: "formulaire.php", data: dataString, cache: false, success: function(html) { $(".sucess-messages").show(); } }); return false; }); }); 

 <div id="formulaire" class="contact-clean" action=""> <div class="container"> <h2 class="text-center"><i class="fa fa-users"></i>&nbsp;Formulaire d'inscription&nbsp;<i class="fa fa-users"></i></h2> <p class="text-center">Veuillez remplir le formulaire ci-dessous pour bénéficier de nos consultations gratuites<br></p> <div class="row"> <div class="col"> <form method="post" id="formulaire"> <div class="form-group"> <label id="form" class="form">Nom</label> <small id="errormsg" class="form-text text-danger" data-aos="fade-right">Veuillez entrer votre nom</small> <input id="nom" class="form-control" type="text" name="nom" required="" placeholder="Veuillez entrer votre nom" maxlength="50" minlength="2"> </div> <div class="form-group"> <label id="form" class="form">Prénom</label> <small id="errormsg" class="form-text text-danger" data-aos="fade-right">Veuillez entrer votre prénom</small> <input id="prenom" class="form-control" type="text" name="prenom" required="" placeholder="Veuillez entrer votre prénom" maxlength="50" minlength="2"> </div> <div class="form-group"> <small id="errormsg" class="form-text text-danger" data-aos="fade-right">Veuillez entrer une adresse email valide.</small> <label id="form" class="form">Email</label> <input id="email" class="form-control" type="email" name="email" required="" placeholder="Veuillez entrer votre adresse email" inputmode="email"> </div> <div class="form-group"> <small id="errormsg" class="form-text text-danger" data-aos="fade-right">Veuillez entrer votre num de téléphone</small> <label id="form" class="form">Numéro de téléphone</label> <input id="tel" class="form-control" type="text" name="tel" required="" placeholder="Veuillez entrer votre numéro de téléphone" minlength="10" inputmode="tel"> </div> <div class="form-group"> <small id="errormsg" class="form-text text-danger" data-aos="fade-right">Veuillez entrer votre num de cellulaire<br></small> <label id="form" class="form">Numéro de cellulaire</label> <input id="cell" class="form-control" type="text" name="cell" required="" placeholder="Veuillez entrer votre numéro de cellulaire" minlength="10" inputmode="tel"> </div> <div class="form-group"> <small id="errormsg" class="form-text text-danger" data-aos="fade-right">Veuillez entrer une adresse &nbsp;valide</small> <label id="form" class="form">Adresse</label> <input id="adresse" class="form-control" type="text" name="adresse" required="" placeholder="Veuillez entrer votre adresse" minlength="5" autofocus=""> </div> <div class="form-group"> <small id="errormsg" class="form-text text-danger" data-aos="fade-right">Veuillez entrer une mesure valide</small> <label id="form" class="form">Hauteur de grenier au milieu&nbsp;<br></label> <label id="form" class="form" style="color:#a30e0e;">(en mètre)<br></label> <input id="gren" class="form-control" type="text" name="gren" placeholder="Veuillez entrer l'hauteur sans sign de (mètres)" maxlength="5" minlength="1" autofocus="" inputmode="numeric"> </div> <div class="form-group"> <small id="errormsg" class="form-text text-danger" data-aos="fade-right">Veuillez choisir le type d'habitation</small> <label id="form" class="form">Type d'habitation</label> <select id="habitat" class="form-control" name="habita"> <optgroup label="Veuillez selectionner le type de votre habitation"> <option value="1" selected="">Maison</option> <option value="2">Appartement</option> <option value="3">Villa</option> </optgroup> </select> </div> <div class="form-group"> <small id="errormsg" class="form-text text-danger" data-aos="fade-right">Veuillez identifier votre moyen de chauffage</small> <label id="form" class="form">Moyen de chauffage</label> <input id="chauffage" class="form-control" type="text" name="chauffage" placeholder="Veuillez entrer votre moyen de chauffage" minlength="5" autofocus=""> </div> <div class="form-group"> <small id="errormsg" class="form-text text-danger" data-aos="fade-right">Veuillez identifier votre moyen de climatisation<br></small> <label id="form" class="form">Moyen de climatisation</label> <input id="climat" class="form-control" type="text" name="climat" placeholder="Veuillez entrer votre moyen de climatisation" minlength="5" autofocus=""> </div> <div class="form-group"> <small id="errormsg" class="form-text text-danger" data-aos="fade-right">Veuillez choisir le type de votre sous sol<br></small> <label id="form" class="form">Type de sous sol</label> <select id="sousol" class="form-control" name="sousol" required=""> <optgroup label="Veuillez selectionner le type de votre habitation"> <option value="oui" selected="">Fini</option> <option value="non">Non fini</option> </optgroup> </select> </div> <div class="form-group"> <small id="errormsg" class="form-text text-danger" data-aos="fade-right">Veuillez saisir un montant valide</small> <label id="form" class="form">Combien vous payez votre facture énérgétique par an?&nbsp;<br></label> <label id="form" class="form" style="color:#a30e0e;">(en $)</label> <input id="facture" class="form-control" type="text" name="facture" placeholder="Veuillez saisir le montant sans marque de monnaie" minlength="2" autofocus="" inputmode="numeric"> </div> <div class="form-group"> <textarea id="observations" class="form-control" rows="14" name="observations" placeholder="Autres observations"></textarea> </div> <div class="form-group"> <button id="submitbtn" class="btn btn-primary" type="button">Envoyer</button> </div> <div class="form-group danger" id="formdanger" > <div class="error-messages" role="alert"><span><strong>ERRUR: </strong>Veuillez vérifier les informations en <strong>rouge</strong><br></span></div> </div> <div class="form-group" id="formsucess"> <div id="sucess-messages" class="sucess-messages" role="alert"><span><strong>Vôtre demande a été transmite, MERCI</strong><br></span></div> </div> </form> 

<?php

   $nom = $_POST['nom'];
   $prénom = $_POST['prenom'];
   $email = $_POST['email'];
   $tel = $_POST['tel'];
   $cell = $_POST['cell'];
   $adresse = $_POST['adresse'];
   $gren = $_POST['gren'];
   $habitat = $_POST['habitat'];
   $chauffage = $_POST['chauffage'];
   $climat = $_POST['climat'];
   $sousol = $_POST['sousol'];
   $facture = $_POST['facture'];
   $observations = $_POST['observations'];

   // To send HTML mail, the Content-type header must be set
   $headers  = 'MIME-Version: 1.0' . "\r\n";
   $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
   $headers = "From: contact@oyacg.com\n"; // This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com.
   $headers .= "Reply-To: $email";


$email_subject = "Nouvelle Inscription OYA Formulaire";

  $email_from = "$email";
  $email_body = "Vous avez reçu une nouvelle inscriptio OYAFormulaire.\n".
                            "Nom:\n $nom".
                            "prénom:\n $prenom".
                            "email:\n $email".

  $to = "haymacproduction@gmail.com";
  $headers = "From: $email_from \r\n";
  $headers .= "Reply-To: $email \r\n";

  mail($to,$email_subject,$email_body,$headers);

  echo "THANK TOU PEACEFUKKT";
?>

Answer 1

The JavaScript variables to be sent via Ajax are all undefined.

In your Ajax call, serialize the form and send

Also you have an id duplicate issue. Both form and div are using the same id. Change form tag to something else. formID .

Change this

<form method="post" id="formulaire">

To

<form method="post" id="formID">

Also

Change

data: dataString

To

data : $('#formID').serialize(),