KowalskiThomas · June 15, 2018 11:12
diff --git a/pay.html b/pay.html
 <!DOCTYPE HTML>
 <html>

 <head>
    <meta charset="utf-8" />
    <style>
        .hidden {
            display: none;
        }

        .block {
            display: block;
            transition: 250ms;
        }

        .error-box {
            background-color: salmon;
            border-radius: 5px;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            padding: 15px;
            margin-bottom: 25px;
        }

        * {
            box-sizing: border-box;
        }

        input {
            display: block;
            width: 100%;
            margin-bottom: 5px;
            padding: 8px;
        }

        button {
            display: block;
            width: 100%;
            padding: 8px;
        }

        form {
            width: 100%;
            margin-left: auto;
            margin-right: auto;
        }

        .center {
            text-align: center;
        }

        .wrapper {
            width: 30%;
            margin-left: auto;
            margin-right: auto;
        }

        .confirmation-paiement,
        .lien-paiement {
            text-align: center;
        }
    </style>
    <script>
        function sendDetails(firstname, surname, telephone, date) {
            var base = "https://docs.google.com/forms/d/e/";
            var formkey = "1FAIpQLSfdRnH84oIES8cPwlstnPC68sBT9hL66SeyVQj2JGXcAeMNAg";
            var suffix = "/formResponse";
            var req = new XMLHttpRequest();
            req.open("POST", base + formkey + suffix, true);
            req.onreadystatechanged = function () {
                if (this.readyState == 4 && this.status == 200) {
                    byId("form-pay").style.display = "none";
                    console.log("Données envoyées.");
                }
                else if (this.readyState == 4) {
                    console.log("Erreur :");
                    console.log(this.responseText);
                    var box = byId("error-box");
                    box.innerHTML = "Une erreur inattendue est survenue (statut )" + this.status + " / " + this.responseText;
                    show(box);
                }
            }
            req.onerror = function () {
                // Do nothing, we probably published to Google Forms without any problem.
            }
            req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            req.send("entry.1452879397=" + surname + "&entry.119117229=" + firstname + "&entry.343262180=" + telephone + "&entry.1774971025=" + date);
        }

        function hasClass(el, className) {
            if (el.classList)
                return el.classList.contains(className)
            else
                return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'))
        }

        function addClass(el, className) {
            if (el.classList)
                el.classList.add(className)
            else if (!hasClass(el, className)) el.className += " " + className
        }

        function removeClass(el, className) {
            if (el.classList)
                el.classList.remove(className)
            else if (hasClass(el, className)) {
                var reg = new RegExp('(\\s|^)' + className + '(\\s|$)')
                el.className = el.className.replace(reg, ' ')
            }
        }

        function toggleBlock(el) {
            if (hasClass(el, "hidden")) {
                removeClass(el, "hidden");
                addClass(el, "block");
            }
            else {
                removeClass(el, "block");
                addClass(el, "hidden");
            }
        }

        function show(el) {
            removeClass(el, "hidden");
            addClass(el, "block");
        }

        function hide(el) {
            removeClass(el, "block");
            addClass(el, "hidden");
        }

        function validateForm(firstname, lastname, telephone, date) {
            var box = byId("error-box");
            if (firstname == "" || lastname == "" || telephone == "" || date == "") {
                box.innerHTML = "Veuillez compléter tous les champs.";
                show(box);
                return false;
            }

            var regexPhone = RegExp(/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im);
            if (!regexPhone.test(telephone)) {
                box.innerHTML = "Le numéro de téléphone est invalide.";
                show(box);
                return false;
            }

            var regexDate = RegExp(/^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/);
            if (!regexDate.test(date)) {
                box.innerHTML = "La date est invalide.";
                show(box);
                return false;
            }

            hide(box);
            return true;
        }

        function generateCode(firstname, lastname, telephone, date) {
            telephone = Array.from(telephone);
            ascii0 = "0".charCodeAt(0);
            ascii9 = "9".charCodeAt(0);
            filteredTelephone = telephone.filter(chr => chr.charCodeAt(0) >= ascii0 && chr.charCodeAt(0) <= ascii9);

            dateComponents = date.split("/");

            year = dateComponents[2];
            month = dateComponents[1];
            day = dateComponents[0];

            var code = year + month;
            while (lastname.length < 10)
                lastname += " ";

            for (var i = 0; i < 9; i++)
                code = code + lastname.charCodeAt(i) % 10;

            code = code + filteredTelephone[filteredTelephone.length - 1] + filteredTelephone[filteredTelephone.length - 2];

            return code;
        }

        function byId(id) {
            return document.getElementById(id);
        }

        function submitForm() {
            var div = byId("div-result");
            var form = byId("form-pay");

            var firstname = byId("field-firstname").value;
            var lastname = byId("field-surname").value;
            var telephone = byId("field-phone").value;
            var date = byId("field-date").value;

            if (!validateForm(firstname, lastname, telephone, date))
                return false;

            code = generateCode(firstname, lastname, telephone, date);

            sendDetails(firstname, lastname, telephone, date);

            div.innerHTML = "<h2 class='confirmation-paiement'>Votre numéro de paiement : " + code + "</h2>";
            div.innerHTML += "<p class='center'><a class='lien-paiement' href='http://monlien.com?code=" + code + "'>Cliquez ici pour valider votre paiement.</a></p>";
            form.style.display = "none";

            return false;
        }
    </script>
 </head>

 <body>
    <h1 class="center">
        Formulaire de paiement
    </h1>
    <div class="wrapper">
        <div id="error-box" class="error-box hidden">
            Une erreur est survenue lors de la validation.
        </div>
        <div id="div-result">
        </div>
        <form id="form-pay" onSubmit="submitForm(); return false;">
            <input name="entry.1452879397" id="field-surname" type="name" placeholder="Nom" />
            <input name="entry.119117229" id="field-firstname" type="name" placeholder="Prénom" />
            <input name="entry.343262180" id="field-phone" type="phone" placeholder="Téléphone" />
            <input name="entry.1774971025" id="field-date" type="text" placeholder="Date" />
            <button type="submit">Payer</button>
        </form>
    </div>
 </body>

 </html>
	<!DOCTYPE HTML>
	<html>

	<head>
	<meta charset="utf-8" />
	<style>
	.hidden {
	display: none;
	}

	.block {
	display: block;
	transition: 250ms;
	}

	.error-box {
	background-color: salmon;
	border-radius: 5px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding: 15px;
	margin-bottom: 25px;
	}

	* {
	box-sizing: border-box;
	}

	input {
	display: block;
	width: 100%;
	margin-bottom: 5px;
	padding: 8px;
	}

	button {
	display: block;
	width: 100%;
	padding: 8px;
	}

	form {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	}

	.center {
	text-align: center;
	}

	.wrapper {
	width: 30%;
	margin-left: auto;
	margin-right: auto;
	}

	.confirmation-paiement,
	.lien-paiement {
	text-align: center;
	}
	</style>
	<script>
	function sendDetails(firstname, surname, telephone, date) {
	var base = "https://docs.google.com/forms/d/e/";
	var formkey = "1FAIpQLSfdRnH84oIES8cPwlstnPC68sBT9hL66SeyVQj2JGXcAeMNAg";
	var suffix = "/formResponse";
	var req = new XMLHttpRequest();
	req.open("POST", base + formkey + suffix, true);
	req.onreadystatechanged = function () {
	if (this.readyState == 4 && this.status == 200) {
	byId("form-pay").style.display = "none";
	console.log("Données envoyées.");
	}
	else if (this.readyState == 4) {
	console.log("Erreur :");
	console.log(this.responseText);
	var box = byId("error-box");
	box.innerHTML = "Une erreur inattendue est survenue (statut )" + this.status + " / " + this.responseText;
	show(box);
	}
	}
	req.onerror = function () {
	// Do nothing, we probably published to Google Forms without any problem.
	}
	req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	req.send("entry.1452879397=" + surname + "&entry.119117229=" + firstname + "&entry.343262180=" + telephone + "&entry.1774971025=" + date);
	}

	function hasClass(el, className) {
	if (el.classList)
	return el.classList.contains(className)
	else
	return !!el.className.match(new RegExp('(\\s\|^)' + className + '(\\s\|$)'))
	}

	function addClass(el, className) {
	if (el.classList)
	el.classList.add(className)
	else if (!hasClass(el, className)) el.className += " " + className
	}

	function removeClass(el, className) {
	if (el.classList)
	el.classList.remove(className)
	else if (hasClass(el, className)) {
	var reg = new RegExp('(\\s\|^)' + className + '(\\s\|$)')
	el.className = el.className.replace(reg, ' ')
	}
	}

	function toggleBlock(el) {
	if (hasClass(el, "hidden")) {
	removeClass(el, "hidden");
	addClass(el, "block");
	}
	else {
	removeClass(el, "block");
	addClass(el, "hidden");
	}
	}

	function show(el) {
	removeClass(el, "hidden");
	addClass(el, "block");
	}

	function hide(el) {
	removeClass(el, "block");
	addClass(el, "hidden");
	}

	function validateForm(firstname, lastname, telephone, date) {
	var box = byId("error-box");
	if (firstname == "" \|\| lastname == "" \|\| telephone == "" \|\| date == "") {
	box.innerHTML = "Veuillez compléter tous les champs.";
	show(box);
	return false;
	}

	var regexPhone = RegExp(/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im);
	if (!regexPhone.test(telephone)) {
	box.innerHTML = "Le numéro de téléphone est invalide.";
	show(box);
	return false;
	}

	var regexDate = RegExp(/^(0?[1-9]\|[12][0-9]\|3[01])[\/\-](0?[1-9]\|1[012])[\/\-]\d{4}$/);
	if (!regexDate.test(date)) {
	box.innerHTML = "La date est invalide.";
	show(box);
	return false;
	}

	hide(box);
	return true;
	}

	function generateCode(firstname, lastname, telephone, date) {
	telephone = Array.from(telephone);
	ascii0 = "0".charCodeAt(0);
	ascii9 = "9".charCodeAt(0);
	filteredTelephone = telephone.filter(chr => chr.charCodeAt(0) >= ascii0 && chr.charCodeAt(0) <= ascii9);

	dateComponents = date.split("/");

	year = dateComponents[2];
	month = dateComponents[1];
	day = dateComponents[0];

	var code = year + month;
	while (lastname.length < 10)
	lastname += " ";

	for (var i = 0; i < 9; i++)
	code = code + lastname.charCodeAt(i) % 10;

	code = code + filteredTelephone[filteredTelephone.length - 1] + filteredTelephone[filteredTelephone.length - 2];

	return code;
	}

	function byId(id) {
	return document.getElementById(id);
	}

	function submitForm() {
	var div = byId("div-result");
	var form = byId("form-pay");

	var firstname = byId("field-firstname").value;
	var lastname = byId("field-surname").value;
	var telephone = byId("field-phone").value;
	var date = byId("field-date").value;

	if (!validateForm(firstname, lastname, telephone, date))
	return false;

	code = generateCode(firstname, lastname, telephone, date);

	sendDetails(firstname, lastname, telephone, date);

	div.innerHTML = "<h2 class='confirmation-paiement'>Votre numéro de paiement : " + code + "</h2>";
	div.innerHTML += "<p class='center'><a class='lien-paiement' href='http://monlien.com?code=" + code + "'>Cliquez ici pour valider votre paiement.</a></p>";
	form.style.display = "none";

	return false;
	}
	</script>
	</head>

	<body>
	<h1 class="center">
	Formulaire de paiement
	</h1>
	<div class="wrapper">
	<div id="error-box" class="error-box hidden">
	Une erreur est survenue lors de la validation.
	</div>
	<div id="div-result">
	</div>
	<form id="form-pay" onSubmit="submitForm(); return false;">
	<input name="entry.1452879397" id="field-surname" type="name" placeholder="Nom" />
	<input name="entry.119117229" id="field-firstname" type="name" placeholder="Prénom" />
	<input name="entry.343262180" id="field-phone" type="phone" placeholder="Téléphone" />
	<input name="entry.1774971025" id="field-date" type="text" placeholder="Date" />
	<button type="submit">Payer</button>
	</form>
	</div>
	</body>

	</html>