Hi I'm trying to validate form with jquery before submit. The validation works fine, but never submit.
There is the form:
<form class="form-signin panel-body" role="form" action="addUser" method="post" id="register">
<h2 class="form-signin-heading">Sign Up</h2>
<div id="na" class="form-group">
<input type="text" id="name" name="name" class="form-control" placeholder="Name" required>
</div>
<div id="su" class="form-group">
<input type="text" id="surname" name="surname" class="form-control" placeholder="Surname" required>
</div>
<div id="user" class="form-group">
<input type="text" id="username" name="username" class="form-control" value="<%= request.getParameter("username1") %>" placeholder="Username" required>
</div>
<div id="mail" class="form-group">
<input type="email" id="email" name="email" class="form-control warning" value="<%= request.getParameter("email1") %>" placeholder="Email address" required>
</div>
<div id="pa" class="form-group">
<input type="password" id="password" name="password" class="form-control" value="<%= request.getParameter("password1") %>" placeholder="Password" required>
</div>
<select class="form-control" id="year" name="year">
<option value="">Year</option>
</select>
<select class="form-control" id="month" name="month">
<option value="">Month</option>
</select>
<select class="form-control" id="day" name="day">
<option value="">Day</option>
</select>
<div class="row">
<span> </span>
</div>
<label>
<select class="form-control" id="sex" name="sex">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</label>
<label>
By clicking Sign up, you are agree to our<a data-toggle="modal" href="#terms"> Terms and
Conditions</a> and have read our usage policy data, including ouruse of
<a data-toggle="modal" href="#cookies">cookies</a>.
</label>
<button id="send" class="btn btn-lg btn-primary btn-block" >Sign in</button>
</form>
Mainly I want refuse duplicate username's or email adress. There's my jquery script:
$(document).ready(function() {
$("#register").submit(function(event){
// $("#register").click(function(){
var $username = $("#username").val();
var $mail = $("#email").val();
// Evita que si alguna comprovacio retorna false s'envi el formulari
event.preventDefault();
// Funcio que valida que el nom no estigui en blanc
if($("#name").val().trim() == ""){
$("#na").addClass( "has-error");
return false;
}
// Funcio que valida que el cognom no estigui en blanc
if($("#surname").val().trim() == ""){
$("#su").addClass( "has-error");
return false;
}
// Funcio ajax per validar que el nom d'usuari no està en ús
$.ajax({
url: "/projCreditV1/rwsc/as/check-value/user_name/" + $username,
success: function(data){
// Si retorna TRUE vol dir que el nom d'usuari es valid perque no està en ús
if(data == "true"){
$("#mail").removeClass("has-error");
return true;
}
else{
$("#user").addClass("has-error");
return false;
}
}
});
// Funcio ajax per validar que el mail no està en ús
$.ajax({
url: "/projCreditV1/rwsc/as/check-value/mail/" + $mail,
success: function(data){
// Si retorna TRUE vol dir que el mail es valid perque no està en ús
if(data == "true"){
$("#mail").removeClass("has-error");
return true;
}
else{
$("#mail").addClass("has-error");
return false;
}
}
});
// Funcio que valida que la contrasenya no estigui en blanc
if($("#password").val().trim() == ""){
$("#pa").addClass( "has-error");
return false;
}
});
});
When some field doesn't meets the requirements return false. I think if whole form doesn't return false, should submit..
Thanks
please remove the event.preventDefault();.
if you use that code, it will never execute the form.
The reason the submit doesn't finish is the:
event.preventDefault(); line. The return doesn't work for the async request. Because it doesn't return the value back to the event.
A way to fix this would be:
Make a normal button instead of a submit button
make jquery do the
submit.
Related
I want to make a role in one login form for different admin users. But when I try to select finance in the dropdown menu I still get to enter the admin dashboard, not the finance dashboard. my db roles are called 'admin' and 'finance'.
This is my login form:
this is what I have so far:
<form method="post" name="login_form">
<div class="form-group">
<input class="form-control form-control-lg" id="username" alt="username" type="text" placeholder="Username" autocomplete="off">
</div>
<div class="form-group">
<input class="form-control form-control-lg" id="password" type="password" alt="password" placeholder="Password" autocomplete="off">
</div>
<div class="input-group mb-3">
<select type="text" class="form-control" name="type" required="">
<option value="" disabled="" disabled="" selected="true">--Select Role--</option>
<option value="admin">Admin</option>
<option value="finance">Finance</option>
</select>
</div>
<div class="form-group">
<label class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" id="remember" onclick="myFunction()"><span class="custom-control-label">Show Password</span>
</label>
</div>
<div class="form-group">
<button class="btn btn-lg btn-block button3" ;color: rgb(243, 245, 238) !important;" value="Sign in" id="btn-login" name="btn-login">Log in</button>
</div>
<div class="form-group" id="alert-msg">
</form>
am I missing something?
<script type="text/javascript">
jQuery(function(){
$('form[name="login_form"]').on('submit', function(e){
e.preventDefault();
var u_username = $(this).find('input[alt="username"]').val();
var p_password = $(this).find('input[alt="password"]').val();
// var s_status = 1;
if (u_username === '' && p_password ===''){
$('#alert-msg').html('<div class="alert alert-danger"> Required Username and Password!</div>');
}else{
$.ajax({
type: 'POST',
url: 'init/controllers/login_process.php',
data: {
username: u_username,
password: p_password
//status: s_status
},
beforeSend: function(){
$('#alert-msg').html('');
}
})
.done(function(t){
if (t == 0){
$('#alert-msg').html('<div class="alert alert-danger">Incorrect username or password!</div>');
}else{
$("#btn-login").html('<img src="assets/images/loading.gif" /> Signing In ...');
setTimeout(' window.location.href = "documents/index.php"; ',2000);
}
});
}
});
});
</script>
<script>
function myFunction() {
var x = document.getElementById("password");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>
I currently have a form in which a user can put his name, age and the message and then I have a button to submit the message and it is supposed to show an alert with the form information but when I put the information and click the button nothing is happening (the alert doesn't show). Here is the html form and javascript function code:
<form action="#" method="get">
<fieldset>
<legend>Informações do utilizador</legend>
<label for="nome">Nome:</label>
<input id="nome" name="nome" type="text" />
<br />
<label for="idade">Idade:</label>
<select id="idade" name="idade">
<option value="menor"><18</option>
<option value="jovem">18-21</option>
<option value="jovemadulto">22-29</option>
<option value="adulto">30-39</option>
<option value="adultoavancado">40-49</option>
<option value="idoso">>=50</option>
</select>
</fieldset>
<fieldset>
<legend>Ideias para tornar um campus mais sustentável</legend>
<label for="mensagem">Mensagem:</label><br />
<textarea id="mensagem" name="mensagem" rows="10" cols="50" placeholder="Introduza a sua ideia">
</textarea>
<br />
<input id="enviar" name="enviar" type="submit" onClick="submitForm()" value="Enviar">
<script>
function submitForm() {
var n = document.getElementById('nome').value;
var i = document.getElementById('idade').value;
var m = document.getElementById('mensagem').value;
alert("Nome: "+s+"\n Idade: "+i+"\n Mensagem: "+m);
}
</script>
<input id="limpar" name="limpar" type="reset" value="Limpar" />
</fieldset>
</form>
the correct way to do that...
const myForm = document.querySelector('#my-form') // use the form parent
// to refer each form elements
// think about how to write your code:
// easier to read again = less typing errors
myForm.onsubmit = evt =>
{
alert( 'Nome: ' + myForm.nome.value // access each element by his name
+ '\n Idade: ' + myForm.idade.value
+ '\n Mensagem: ' + myForm.mensagem.value
);
evt.preventDefault(); // for testing without page relaod
}
<form action="#" method="get" id="my-form"> <!-- have an id (or a name) here -->
<fieldset>
<legend>Informações do utilizador</legend>
<label for="nome">Nome:</label>
<input id="nome" name="nome" type="text" />
<br />
<label for="idade">Idade:</label>
<select id="idade" name="idade">
<option value="menor"><18</option>
<option value="jovem">18-21</option>
<option value="jovemadulto">22-29</option>
<option value="adulto">30-39</option>
<option value="adultoavancado">40-49</option>
<option value="idoso">>=50</option>
</select>
</fieldset>
<fieldset>
<legend>Ideias para tornar um campus mais sustentável</legend>
<label for="mensagem">Mensagem:</label><br />
<textarea id="mensagem" name="mensagem"
rows="10" cols="50" placeholder="Introduza a sua ideia"></textarea>
<br>
<button type="submit"> Enviar </button>
<button type="reset"> Limpar </button>
</fieldset>
</form>
This question already has answers here:
How can I validate an email address in JavaScript?
(79 answers)
Closed 1 year ago.
I did this function so that the form button enables when the inputs are different from empty, but I don't know how to do so that in the #email ID the input, in addition to being different from empty, must necessarily contain the character '"#" or the strings "# gmail.com", "# hotmail.com".
This is the function
$(function () {
$('#button').attr('disabled', true);
$('#textarea, #email, #name').change(function () {
if ($('#name').val() != '' && $('#email').val() != '' && $('#textarea').val() != '') {
$('#button').attr('disabled', false);
} else {
$('#button').attr('disabled', true);
}
});
});
This is the HTML
<form id="contact-form" method="POST" action="forms/contact-form-handler.php">
<span class="asterisco">*</span><input name="name" id="name" type="text" class="form-control" placeholder="Nombre" required>
<br>
<span class="asterisco">*</span><input name="email" id="email" type="email" class="form-control" placeholder="Dirección de correo electrónico" required>
<br>
<span class="asterisco">*</span><textarea style="resize: none;" id="textarea" name="message" class="form-control" placeholder="Mensaje" row="4" required></textarea>
<span class="texto-asterisco">Las celdas marcadas con * son obligatorias.</span>
<br>
<div id="button-container">
<button type="submit" id="button" disabled="disabled"></button>
</div>
</form>
Use a regex and test whether the value of the email input field matches it.
const re = /^(([^<>()[\]\\.,;:\s#"]+(\.[^<>()[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
$(function() {
$('#button').attr('disabled', true);
$('#textarea, #email, #name').change(function() {
if ($('#name').val() != '' && re.test($('#email').val()) != '' && $('#textarea').val() != '') {
$('#button').attr('disabled', false);
} else {
$('#button').attr('disabled', true);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="contact-form" method="POST" action="forms/contact-form-handler.php">
<span class="asterisco">*</span><input name="name" id="name" type="text" class="form-control" placeholder="Nombre" required>
<br>
<span class="asterisco">*</span><input name="email" id="email" type="email" class="form-control" placeholder="Dirección de correo electrónico" required>
<br>
<span class="asterisco">*</span><textarea style="resize: none;" id="textarea" name="message" class="form-control" placeholder="Mensaje" row="4" required></textarea>
<span class="texto-asterisco">Las celdas marcadas con * son obligatorias.</span>
<br>
<div id="button-container">
<button type="submit" id="button" disabled="disabled">Submit</button>
</div>
</form>
Im working with forms so need to customize validations with "setCustomValidity" function, the problem comes when i work with alerts and validations in the same.
The button that i use to send my data form got type="submit" when i use that kind my form is making validations correctly but that type makes a refresh so the alert never shows up.
If i switch the type to type="button" then makes the opposite. Validations are not working and alerts finally shows up.
Here is some of the form´s side code:
<div class="modal-dialog">
<div class="modal-content">
<div class="col-12 user-img">
<img src="../../images/nuevoConcesionario.png" alt="">
</div>
<span id="switching1" class="d-none">
<center>
<div class="alert alert-danger" role="alert" id="mensajeError" value="AA">
</div>
</center>
</span>
<form class="formu">
<div class="row">
<div class="form-group col-md-6">
<label for="nombre" class="col-form-label">Nombre Concesionario(*)</label>
<input type="text" class="form-control" id="nomConcesionario" placeholder="Nombre Concesionario" required>
</div>
<div class="form-group col-md-6">
<label for="Nif" class="col-form-label">NIF(*)</label>
<input type="text" class="form-control" id="nifConcesionario" placeholder="Ejemplo NIF: A58818501" required>
</div>
</div>
<div class="row">
<div class="form-group col-md-6" >
<label for="ciudad" class="col-form-label">Ciudad(*)</label>
<input type="text" class="form-control" id="nomCiudad" placeholder="Ciudad" required>
</div>
<div class="form-group col-md-6">
<label for="cp" class="col-form-label">Codigo Postal</label>
<input type="text" id="cpConcesionario" placeholder="Codigo Postal" class="form-control">
</div>
</div>
<div class="row">
<div class="form-group col-md-6" >
<label for="ciudad" class="col-form-label">Telefono Contacto</label>
<input type="tel" class="form-control" id="tlf" placeholder="Telefono Contacto">
</div>
<div class="form-group col-md-6">
<label for="nom_admin" class="col-form-label">Nombre Administrador(*)</label>
<input type="text" id="nomAdministrador" placeholder="Nombre Administrador" class="form-control" required>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label for="email" class="col-form-label">Email(*)</label>
<input type="email" id="emailConcesionario" placeholder="email" class="form-control" required>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label for="nom_admin" class="col-form-label">Dirección(*)</label>
<input type="text" id="direccion" placeholder="direccion" class="form-control" required>
</div>
</div>
<div class="row">
<div style="width: 100%; margin: 0 25% 0 25%">
<button type="button" id="bEnviar" class="btn btn-primary" onclick="altaConcesionario();">Dar de alta concesionario</button>
</div>
</div>
</form>
Here is altaConcesionario validation´s function:
function altaConcesionario() {
var nomConcesionario = document.getElementById('nomConcesionario');
var nifConcesionario = document.getElementById('nifConcesionario');
var nomCiudad = document.getElementById('nomCiudad');
var nomAdministrador = document.getElementById('nomAdministrador');
var cpConcesionario = document.getElementById('cpConcesionario');
var telefono = document.getElementById('tlf');
var direccion = document.getElementById('direccion');
var emailConcesionario = document.getElementById('emailConcesionario');
// TODO unificar este mismo patron
var nomConcesionarioPatt = /[A-Za-z0-9]{4,60}/;
var nomCiudadPatt = /[A-Za-z0-9]{4,60}/;
var nomAdminPatt = /[A-Za-z0-9]{4,60}/;
var addrPatt = /[A-Za-z0-9]{4,60}/;
var emailConcesionarioPatt = /^[a-zA-Z0-9._%+-]+#[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$/;
var elNif = checkNif(nifConcesionario.value);
var validate = true;
// Nombre concesionario
if (nomConcesionario.value) {
nomConcesionario.setCustomValidity("");
if (!nomConcesionarioPatt.test(nomConcesionario.value)) {
mostrarAlertaValidacion("Error en el ingreso. min[4] caracteres");
nomConcesionario.setCustomValidity("Error en el ingreso. min[4] caracteres");
validate = false;
}
} else {
nomConcesionario.setCustomValidity("Por favor, rellene campo 'nombre concesionario'");
mostrarAlertaValidacion("Por favor, rellene campo 'nombre concesionario'");
validate = false;
}
// Nif concesionario
if (nifConcesionario.value) {
nifConcesionario.setCustomValidity("");
if (!elNif) {
nifConcesionario
.setCustomValidity("El nif introducido no es correcto");
validate = false;
}
} else {
nifConcesionario
.setCustomValidity("Por favor, rellene campo 'NIF concesionario'");
validate = false;
}
// Nombre ciudad
if (nomCiudad.value) {
nomCiudad.setCustomValidity("");
if (!nomCiudadPatt.test(nomCiudad.value)) {
nomCiudad
.setCustomValidity("Error en el ingreso. min[4] caracteres");
validate = false;
}
} else {
nomCiudad.setCustomValidity("Por favor, rellene campo 'nombre ciudad'");
validate = false;
}
// Nombre administrador
if (nomAdministrador.value) {
nomAdministrador.setCustomValidity("");
if (!nomAdminPatt.test(nomAdministrador.value)) {
nomAdministrador
.setCustomValidity("Error en el ingreso. min[4] caracteres");
validate = false;
}
} else {
nomAdministrador
.setCustomValidity("Por favor, rellene campo 'nombre administrador'");
validate = false;
}
if (direccion.value) {
direccion.setCustomValidity("");
if (!addrPatt.test(direccion.value)) {
direccion
.setCustomValidity("Error en el ingreso. min[4] caracteres");
validate = false;
}
} else {
direccion.setCustomValidity("Por favor, rellene campo 'direccion'");
validate = false;
}
// Email concesionario
if (emailConcesionario.value) {
emailConcesionario.setCustomValidity("");
if (!emailConcesionarioPatt.test(emailConcesionario.value)) {
emailConcesionario
.setCustomValidity("El email introducido no es correcto. mail#dominio.com");
validate = false;
}
} else {
emailConcesionario
.setCustomValidity("Por favor, rellene campo 'email colaborador'");
validate = false;
}
// TODO falta validacion email
// TODO poner las rewdirecciones en su sitio
// Si estan todos los campos rellenos entra
if (validate) {
// POPUP
// SI TRUE
$
.ajax({
type : "POST",
url : '/proyecto/Api',
data : {
action : 'addConcesionario',
auth_token : auth_token,
usuario_sesion : usuario,
nomConcesionario : nomConcesionario.value,
nifConcesionario : nifConcesionario.value,
nomCiudad : nomCiudad.value,
nomAdministrador : nomAdministrador.value,
cpConcesionario : cpConcesionario.value,
telefono : telefono.value,
direccion : direccion.value,
email : emailConcesionario.value
},
success : function(response) {
alert("EXITO");
window.location.href = "/proyecto/administracion/administracion.jsp";
},
error : function(result) {
alert("ERROR");
window.location.href = "/proyecto/administracion/administracion.jsp";
}
});
}
so i would like to know if there is any reasonable way to make both works together as i need to give information to the final user and is really important for me both of functions.
Thanks in advance,
This happened because you need to prevent form submitting event.preventDefault(). Take a look at example below
const form = document.querySelector('#myForm');
form.addEventListener('submit', ev => {
ev.preventDefault();
//Your code here (validation, http etc)
console.log('Prevented');
})
<form id="myForm">
<div class="row">
<div class="form-group col-md-6">
<label for="nombre" class="col-form-label">Nombre Concesionario(*)</label>
<input type="text" class="form-control" id="nomConcesionario" placeholder="Nombre Concesionario" required>
</div>
<div class="form-group col-md-6">
<label for="Nif" class="col-form-label">NIF(*)</label>
<input type="text" class="form-control" id="nifConcesionario" placeholder="Ejemplo NIF: A58818501" required>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="ciudad" class="col-form-label">Ciudad(*)</label>
<input type="text" class="form-control" id="nomCiudad" placeholder="Ciudad" required>
</div>
<div class="form-group col-md-6">
<label for="cp" class="col-form-label">Codigo Postal</label>
<input type="text" id="cpConcesionario" placeholder="Codigo Postal" class="form-control">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="ciudad" class="col-form-label">Telefono Contacto</label>
<input type="tel" class="form-control" id="tlf" placeholder="Telefono Contacto">
</div>
<div class="form-group col-md-6">
<label for="nom_admin" class="col-form-label">Nombre Administrador(*)</label>
<input type="text" id="nomAdministrador" placeholder="Nombre Administrador" class="form-control" required>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label for="email" class="col-form-label">Email(*)</label>
<input type="email" id="emailConcesionario" placeholder="email" class="form-control" required>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label for="nom_admin" class="col-form-label">Dirección(*)</label>
<input type="text" id="direccion" placeholder="direccion" class="form-control" required>
</div>
</div>
<div class="row">
<div style="width: 100%; margin: 0 25% 0 25%">
<button type="submit" class="btn btn-primary">Dar de alta concesionario</button>
</div>
</div>
</form>
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> 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";
?>
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(),