Commit 1c4c3c70 authored by Mohamed Hernouf's avatar Mohamed Hernouf
Browse files

JS script that pre-fills registration mail, checks inputs validity and reports...

JS script that pre-fills registration mail, checks inputs validity and reports if one of them is invalid
parent a0def7aa
...@@ -4,22 +4,22 @@ ...@@ -4,22 +4,22 @@
Registration form to participate in the training courses. Registration form to participate in the training courses.
<hr> <hr>
<form> <form id="registration" onsubmit="return validateFormOnSubmit();">
<label for="fcourse">Course:</label><br> <label for="fcourse">Course:</label><br>
<select class="small-text" id ="fcourse"> <select class="small-text" id ="fcourse">
<option>OCaml Development</option> <option value="OCaml Development">OCaml Development</option>
<option>OCaml Expert</option> <option value="OCaml Expert">OCaml Expert</option>
<option>OCaml Code Optimization</option> <option value="OCaml Code Optimization">OCaml Code Optimization</option>
<option>Rust Vocational Training</option> <option value="Rust Vocational Training">Rust Vocational Training</option>
<option>Mastering OPAM &amp; OCaml Tools</option> <option value="Mastering OPAM & OCaml Tools">Mastering OPAM &amp; OCaml Tools</option>
<option class="course">Custom Training</option> <option value="Custom Training">Custom Training</option>
</select><br> </select><br>
<label for="fname">Name:</label><br> <label for="fname">Name:</label><br>
<input class="small-text" type="text" id="fname" name="fname"><br> <input class="small-text" type="text" id="fname" name="fname" onkeyup="return updateInput(this)"><br>
<label for="femail">Email:</label><br> <label for="femail">Email:</label><br>
<input class="small-text" type="email" id="femail" name="femail"><br> <input class="small-text" type="email" id="femail" name="femail" onkeyup="return updateInput(this)"><br>
<label for="ftel">Telephone:</label><br> <label for="ftel">Telephone:</label><br>
<input class="small-text" type="tel" id="ftel" name="ftel"><br> <input class="small-text" type="tel" id="ftel" name="ftel" onkeyup="return updateInput(this)"><br>
<small><span id="warning">Warning</span> : this pre-registration will only be confirmed upon signature of the training agreement by both sides.</small><br> <small><span id="warning">Warning</span> : this pre-registration will only be confirmed upon signature of the training agreement by both sides.</small><br>
<input type="submit" value="Send"> <input type="submit" value="Send">
</form> </form>
...@@ -35,4 +35,59 @@ Registration form to participate in the training courses. ...@@ -35,4 +35,59 @@ Registration form to participate in the training courses.
#warning{ #warning{
color:red; color:red;
} }
.invalid-input {
background-color: #ffa5a5;
}
</style> </style>
<script>
/* converts input to a valid string */
function validInput(str) {
return encodeURIComponent(str.trim());
}
/* sends pre-filled mail to contact@ocamlpro.com */
function mailto(name,email,tel){
let new_line = "%0D%0A";
let course = document.getElementById("fcourse").value;
let subject = course + " pre-registration by " + name;
let body =
"Name: " + name + new_line +
"Email: " + email + new_line +
"Telephone: " + tel;
let url =
"mailto:contact@ocamlpro.com?subject=" + subject + "&body=" + body;
window.open(url);
}
/** form onsubmit handler */
function validateFormOnSubmit() {
let nameInput = document.getElementById("fname");
let name = validInput(nameInput.value);
/* Colors input to colar color if input is empty */
if(!name) {
nameInput.classList.add("invalid-input");
}
let emailInput = document.getElementById("femail");
let email = validInput(emailInput.value);
if(!email) {
emailInput.classList.add("invalid-input");
}
let telInput = document.getElementById("ftel");
let tel = validInput(telInput.value);
if(!tel) {
telInput.classList.add("invalid-input");
}
if (name && email && tel) {
mailto(name,email,tel);
}
return false;
}
/** Updates input color when entering new letter */
function updateInput(input) {
input.classList.remove("invalid-input");
return false;
}
</script>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment