Отправка HTML-формы и отправка ее по электронной почте (PHP, AJAX, HTML) - PullRequest
0 голосов
/ 08 сентября 2018

Я начинающий разработчик я пытаюсь создать форму, которую клиенты будут заполнять, и отправить ее по электронной почте, и я застрял с двумя проблемами 1) Сообщение об успехе, сделанное с помощью AJAX, появляется с ошибками, когда пользователь нажимает кнопку «Отправить», появляется сообщение об ошибке, а также сообщение об успехе! 2) После отправки формы ничего не происходит: отправка электронной почты невозможна даже после успешной отправки формы! вот кодаж!

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";
?>

1 Ответ

0 голосов
/ 09 сентября 2018

Все переменные JavaScript для отправки через Ajax не определены.

При вызове Ajax сериализуйте форму и отправьте

Также у вас есть проблема с id дубликатом. И форма, и div используют один и тот же идентификатор. Измените тег формы на что-то другое. formID.

Изменить это

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

К

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

Также

Изменить

data: dataString

К

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

...