Javascript et les formulaires

Contrôler l'envoi d'un formulaire

onsubmit() se met dans la balise form.

il faut de même ajouter return dans le onSubmit : onSubmit="return Verification()">
return false permet de bloquer l'envoi du formulaire









A compléter
Contrôler l'adresse email pour voir si il y a le signe "@" puis le "."
Controler le type pour un numéro de téléphone avec isNa() par exemple.
Pour afficher le texte à côté du champ, il faut le gérer avec des display inline et non en CSS.

HTML

<form name="monformulaire1" action="" method="post" onSubmit="return Verification()">
<label for="idNom">Nom <span class="text-danger">*</span></label>
<input type="text" name="nom" id="idNom">
<br><br>

<label for="idPrenom">Prénom</label>
<input type="text" name="prenom" id="idPrenom">
<br><br>

<label for="idEmail">Email <span class="text-danger">*</span></label>
<input type="text" name="email" id="idEmail">
<br><br>

<label for="idTel">Téléphone</label>
<input type="text" name="tel" id="idTel">
<br><br>

<input type="submit" name="valider" value="Envoyer">
</form>

Javascript

<script>

function validateEmail(email) {
var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
return re.test(email);
}

function Verification() {
// Récupérer lavaleur des champs nom et email
var Nom = document.getElementById('idNom').value;
var Email = document.getElementById('idEmail').value;

// Contrôle sur le nom
if(Nom==''){
alert('Vous devez compléter votre nom !');
document.getElementById('idNom').style.backgroundColor="red";
document.getElementById('idNom').style.color="#FFF";

// Permet de bloquer l'envoi du formulaire
return false;
}
else{
document.getElementById('idNom').style.backgroundColor="#9C6";
}

// Contrôle sur l'email
if(Email=='') {
alert('Vous devez compléter votre adresse email');
document.getElementById('idEmail').style.backgroundColor="red";
document.getElementById('idEmail').style.color="#FFF";
return false;
}

else{
document.getElementById('idEmail').style.backgroundColor="#9C6";
}
}
</script>

document.write('<span style=\'color:red\'>A compléter</span>'); ne fonctionne pas, il efface le contenu du formulaire.

Exercice

Changement en fonction d'une valeur saisie sur un input





HTML

<form name="monformulaire2" action="" method="post">
<label for="idHT">HT</label>
<input type="text" name="HT" id="idHT" onBlur="Calcul();">
<br><br>
<label for="idTTC">TTC</label>
<input type="text" name="TTC" id="idTTC" readonly>
<br><br>
<input type="submit" name="valider" value="Envoyer">
</form>

Javascript

<script>
function Calcul() {
// Récupérer la valeur du prix HT
PrixHT = document.getElementById('idHT').value;

// On clacul le prix TTC, on stocke le résultat dans la variable TTC
var PrixTTC = PrixHT*1.2;
// On affecte la valeur de la variable TTC à la valeur du champ idTTC
document.getElementById('idTTC').value= PrixTTC;
}
</script>

HTML

On utilise l'événement onBlur(), autrement dit lorsque l'on perd le focus sur le champ

On peut noter qu'il est bien sur le champ HT et non sur TTC.

Javascript

document.getElementById('idHT').value; permet de récupérer la valeur du champ HT.

document.getElementById('idTTC').value= PrixTTC; On affecte ici le résultat du calcul de la variable Prix TTC

Exercice identique avec test de la valeur saisie

Changement en fonction d'un select

A la différence de l'exemple précédent on utilisera onChange() sur le select.

<select id="idPrix" onChange="Calcul()">





HTML

<form name="monformulaire3" action="" method="post">
<label for="idHT">HT</label>
<select id="idPrix" onChange="Calcul()">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
<br><br>
<label for="idTTC">TTC</label>
<input type="text" name="TTC" id="idTTC" readonly>
<br><br>
<input type="submit" name="valider" value="Envoyer">
</form>

Javascript

<script>
function Calcul() {
// Récupérer la valeur du prix HT
PrixHT = document.getElementById('idHT').value;

// On clacul le prix TTC, on stocke le résultat dans la variable TTC
var PrixTTC = PrixHT*1.2;

// On affecte la valeur de la variable TTC à la valeur du champ idTTC
document.getElementById('idTTC').value= PrixTTC;
}
</script>

Exercice

Faire cohabiter les 2 formulaires en ajoutant des paramétres dans la fonction Calcul()

HTML

Formulaire 1

<form name="monformulaire1" action="" method="post">
<label for="idHT">HT</label>
<input type="text" name="HT" id="idHT" onBlur="Calcul(this.value,1)">
<br><br>

<label for="idTTC">TTC</label>
<input type="text" name="TTC" id="idTTC" readonly>
<br><br>
<input type="submit" name="valider" value="Envoyer">
</form>

Formulaire 2

<form name="monformulaire2" action="" method="post">
<label for="idHT">HT</label>
<select id="idPrix" onChange="Calcul(this.value,2)">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
<br><br>

<label for="idTTC">TTC</label>
<input type="text" name="TTC" id="idTTC1" readonly>
<br><br>

<input type="submit" name="valider" value="Envoyer">
</form>

Javascript

<script>
// function avec 2 paramètres
function Calcul(CalculTTC,Cas) {

// Calcul de la variable TTC en utilisant le 1er paramétre passé dans la fonction
var TTC = CalculTTC*1.2;

if(Cas==1) { // test du paramétre Cas
document.getElementById('idTTC').value= TTC;
}
else if(Cas==2){ // test du paramétre Cas
document.getElementById('idTTC1').value= TTC;
}
else {

}
}
</script>

Exercice

Afficher / Masquer

Avec un bouton radio

Constitue à changer la propriété CSS , soit sisplay:block, soit display:none

Afficher Masquer

Date

HTML

Afficher <input name="regle" type="radio" onClick="afficher();" value="Oui">
Masquer <input type="radio" name="regle" value="Non" onClick="cacher();">
<p id="champ_cache">Date <input type="text" name="date_regle" value=""></p>

Javascript

<script type="text/javascript">
document.getElementById("champ_cache").style.display = "none";
function afficher(){
document.getElementById("champ_cache").style.display = "block";
}
function cacher(){
document.getElementById("champ_cache").style.display = "none";
}
</script>

Afficher un élément ou un autre

avec une structure conditionnelle et un paramétre dans la fonction

Toujours sur des boutons radios

Chauffeur Sous Traitant


HTML

<form name="form1" action="" method="post">

<input type="radio" name="personne" id="ouiCli" value="oui" onchange="choixPersonne('cacher1')"> Chauffeur

<input type="radio" name="personne" id="nonCli" value="non" onchange="choixPersonne('cacher2')"> Sous Traitant

<br><br>

<!-- Champs cachés -->
<div id="chauffeur" style="display:none">
<label for="nom_chauffeur">Nom</label>
<input name="nom_chauffeur" id="nom_chauffeur" type="text"><br><br>

<label for="num_cin_chauffeur">N° CIN</label>
<input name="num_cin_chauffeur" id="num_cin_chauffeur" type="text">
</div>

<div id="sous_traitant" style="display:none">
<label>Nom sous-Traitant</label>
<input name="nom_sous_traitant" id="nom_sous_traitant" type="text">
</div>
<!-- Fin des champs cachés -->

<br>

<input type="submit" name="button" id="button" value="Envoyer">

</form>

Javascript

<script>
function choixPersonne(chaine){
var a = document.getElementById("chauffeur");
var b = document.getElementById("sous_traitant");

if (chaine == 'cacher1'){
    // Contraction du code commenté ci dessous
    a.style.display = "block";
    b.style.display = "none";
    /*var a = document.getElementById("chauffeur").style.display="block";
    var b = document.getElementById("sous_traitant").style.display="none";*/
}
else if (chaine == 'cacher2'){
    // Contraction du code commenté ci dessous
    a.style.display = "none";
    b.style.display = "block";
    /*var a = document.getElementById("chauffeur").style.display="none";
    var b = document.getElementById("sous_traitant").style.display="block";*/ }
}
</script>
LC Formateur