Current File : /home/d/i/g/digitaw/Ycof/js/habitation1.js

var form_1 = document.querySelector(".form_1");
var form_2 = document.querySelector(".form_2");
var form_3 = document.querySelector(".form_3");



var form_1_btns = document.querySelector(".form_1_btns");
var form_2_btns = document.querySelector(".form_2_btns");
var form_3_btns = document.querySelector(".form_3_btns");



var form_1_next_btn = document.querySelector(".form_1_btns .btn_next");
var form_2_back_btn = document.querySelector(".form_2_btns .btn_back");
var form_2_next_btn = document.querySelector(".form_2_btns .btn_next");
var form_3_back_btn = document.querySelector(".form_3_btns .btn_back");



var form_2_progessbar = document.querySelector(".form_2_progessbar");
var form_3_progessbar = document.querySelector(".form_3_progessbar");


var btn_done = document.querySelector(".btn_done");
var modal_wrapper = document.querySelector(".modal_wrapper");
var shadow = document.querySelector(".shadow");

form_1_next_btn.addEventListener("click", function(){
    if (validatehabitation()== true && validatesituation()== true && validateconstruction() == true && validatevaleurbatiment() ==true ) {
    form_1.style.display = "none";
	form_2.style.display = "block";
    form_1_btns.style.display = "none";
	form_2_btns.style.display = "flex";
    form_2_progessbar.classList.add("active");
   }
   else{
    validatehabitation();
    validatesituation();
    validateconstruction();
    validatevaleurbatiment();
}
});

form_2_back_btn.addEventListener("click", function(){
	form_1.style.display = "block";
	form_2.style.display = "none";

	form_1_btns.style.display = "flex";
	form_2_btns.style.display = "none";

	form_2_progessbar.classList.remove("active");
});

form_2_next_btn.addEventListener("click", function(){
    if (validateNom()== true && validatePrenom()== true  && validatePhone() == true && validateEmail() == true ) {
        
    form_2.style.display = "none";
	form_3.style.display = "block";

	form_3_btns.style.display = "flex";
	form_2_btns.style.display = "none";

    form_3_progessbar.classList.add("active");
}else{
    validateNom();
    validatePrenom();
    validatePhone();
    validateEmail();

}
});

form_3_back_btn.addEventListener("click", function(){
	form_2.style.display = "block";
	form_3.style.display = "none";

	form_3_btns.style.display = "none";
	form_2_btns.style.display = "flex";

	form_3_progessbar.classList.remove("active");
});

btn_done.addEventListener("click", function(){
	modal_wrapper.classList.add("active");
})

shadow.addEventListener("click", function(){
	modal_wrapper.classList.remove("active");
})

function validatehabitation() {
    const habitation =document.querySelector("#habitation").value;
    var habitationError = document.querySelector("#habitation-error");
    if (habitation ==""){
        habitationError.style.color = "red";
        habitationError.innerHTML = "l'habitation est obligatoire";
        return false;
    }
    habitationError.style.color = "green";
    habitationError.innerHTML = "valide";
    return true;
    
    
}

function validatesituation() {
    const situation =document.querySelector("#situation").value;
    var situationError = document.querySelector("#situation-error");
    if (situation ==""){
        situationError.style.color = "red";
        situationError.innerHTML = "la situation est obligatoire";
        return false;
    }
    situationError.style.color = "green";
    situationError.innerHTML = "valide";
    return true;

    
}
function validateconstruction() {
    const construction =document.getElementById("construction").value;
    var constructionError = document.getElementById("construction-error");
    if(construction ==""){
        constructionError.style.color = "red";
        constructionError.innerHTML = "la construction est obligatoire";
        return false;
    }
    constructionError.style.color = "green";
    constructionError.innerHTML = "valide";
    return true;
   
}
function validatevaleurbatiment() {
    const batiment =document.querySelector("#batiment").value;
   
    var batimentError = document.getElementById("batiment-error");
    if(batiment ==""){
        batimentError.style.color = "red";
        batimentError.innerHTML = "le batiment est obligatoire";
        return false;
    }
    batimentError.style.color = "green";
    batimentError.innerHTML = "valide";
    return true;

    
}
function validatevaleurcontenue() {
    const contenue = document.querySelector("#contenue").value;

    var contenueError = document.getElementById("contenue-error");
    if (contenue == "") {
        contenueError.style.color = "red";
        contenueError.innerHTML = "le contenue est obligatoire";
        return false;
    }
    contenueError.style.color = "green";
    contenueError.innerHTML = "valide";
    return true;

}
function validateNom() {
    const nom = document.querySelector("#nom").value;
    var nomError = document.querySelector("#nom-error");
    if (nom == "") {
        nomError.style.color = "red";
        nomError.innerHTML = "Please enter your nom";
        return false;
    }
    nomError.style.color = "green";
    nomError.innerHTML = "valide";
    return true;


}
function validatePrenom(){
    const prenom = document.getElementById("prenom");
    var prenomError = document.getElementById("prenom-error");
    var regex = /^[a-zA-Z\s]+$/;
    if(prenom.value.length < 3){
		prenomError.style.color="red";
        prenomError.innerHTML = "le prenom est obligatoire";
        return false;
    }
    if(!regex.test(prenom.value)){
		prenomError.style.color="red";
        prenomError.innerHTML = "Entrer un prenom valide";
        return false;
    }
	prenomError.style.color="green";
    prenomError.innerHTML = "valide";
    return true;
}
function validateEmail(){
    const email = document.getElementById("email");
    var emailError = document.getElementById("email-error");
    var regex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
    if(email.value.length < 3){
		emailError.style.color = "red";
        emailError.innerHTML = "l'email est obligatoire";
        return false;
    }
    if(!regex.test(email.value)){
		emailError.style.color = "red";
        emailError.innerHTML = "Entrer un email valide";
        return false;
    }
	emailError.style.color="green";
    emailError.innerHTML = "valide";
    return true;
}
function validatePhone(){
    const telephone = document.getElementById("telephone");
    var telephoneError = document.getElementById("telephone-error");
    var regex = /^[0-9]+$/;
	if(!regex.test(telephone.value)){
		telephoneError.style.color = "red";
        telephoneError.innerHTML = "Entrer un numero de telephone valide";
        return false;
    }
    if(telephone.value.length < 9){
		telephoneError.style.color = "red";
        telephoneError.innerHTML = "le numero de telephone est obligatoire";
        return false;
    }
    
	telephoneError.style.color="green";
    telephoneError.innerHTML = "valide";
    return true;
}

function loadData() {
    
    const telephone = document.querySelector("#telephone").value;
    const situation =document.querySelector("#situation").value;
  
    const contenue =document.getElementById("contenue").value;
    const construction =document.getElementById("construction").value;
    const batiment =document.getElementById("batiment").value;

    var telephoneRecap = document.querySelector("#telephone-recap");
    var situationRecap = document.querySelector("#situation-recap");
   
    var contenueRecap = document.querySelector("#contenue-recap");
    var constructionRecap = document.querySelector("#construction-recap");
    var batimentRecap = document.querySelector("#batiment-recap");

    telephoneRecap.innerHTML= telephone;
    situationRecap.innerHTML = situation;
   
    contenueRecap.innerHTML = contenue;
    constructionRecap.innerHTML = construction;
    batimentRecap.innerHTML = batiment;


}
// ENVOI DES INFORMATIONS AU SERVEUR
document.getElementById("send_habitation").addEventListener("submit", function(e) {
    var data = new FormData(this);
    var xmlhttp = new XMLHttpRequest();
    
    console.log(data.get("telephone"), data.get("situation"), data.get("contenue"), data.get("construction"), data.get("batiment"));
    xmlhttp.onreadystatechange = function () {
        
        if (this.readyState == 4 && this.status == 200) {
			//var msg="je crois que sa marche ";
			alert('votre devis a ete bien envoye');
			console.log(this.response);
		} else if (this.readyState == 4 && this.status != 200) {
			alert("une erreur s'est produit");
		}
    }
    xmlhttp.open("POST", "script_habit.php", true);
    xmlhttp.responseType = 'json';
    xmlhttp.send(data);

    
});