我是初学者 我正在尝试创建一个将由客户填写的表格，并通过电子邮件发送，而我遇到了两个问题 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> Formulaire d'inscription <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 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 <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? <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";
?>
答案 0 :(得分：0)
要通过Ajax发送的JavaScript变量都未定义。
在您的Ajax调用中，序列化表格并发送
您还有一个id重复的问题。表格和div都使用相同的ID。将表单标签更改为其他内容。 formID。
更改此
<form method="post" id="formulaire">
收件人
<form method="post" id="formID">
也
更改
data: dataString
收件人
data : $('#formID').serialize(),