Formulaires Bootstrap et javascript¶

Voici quelques exemples de création de champs formulaire en Bootstrap, ainsi que du code javascript d'appel à ces champs.

Traitement d'un formulaire¶

Voici quelques exemples de traitement de champs d'un formulaier.

Noter la différence entre les événements détectés et le traitement à faire selon le type de champ.

Lecture des champs d'un formulaire¶

Lorsque vient le temps de traiter un formulaire et ses champs, quelques options se présentent à nous pour lire les valeurs des champs.

En voici deux.

Option 1 : getElementById()

Comme nous l'avons vu, il est possible d'associer un identitifant aux balises des champs et d'accéder au contenu via cet identitifant.

HTML

<form>
    <input id="txtPrenom" class="form-control" type="text" name="prenom" placeholder="Veuillez inscrire votre prénom">
    <button type="button" class="btn btn-primary" onclick="afficheBonjour()">Bonjour</button>
</form>

Javascript

//Extraire la valeur contenue dans le champ
let prenom = document.getElementById("txtPrenom").value;

Option #2 : à partir du formulaire

Toutefois, lorsque le formulaire contient plusieurs champs à traiter, plutôt que de donner un identifiant à chaque champ, il sera facilitant de :

donner un identifiant au formulaire
aller chercher cet identifiant dans le javascript
accéder aux champs via le formulaire obtenu

HTML

<form id="formBonjour">
    <input class="form-control" type="text" name="prenom" placeholder="Veuillez inscrire votre prénom">
    <button type="button" class="btn btn-primary" onclick="afficheBonjour()">Bonjour</button>
</form>

let formulaire = document.getElementById("formBonjour");
let prenom = formulaire.prenom.value;

Autre méthode

Une autre méthode standardisée est d'utiliser l'objet forms avec l'id :

    let formulaire = document.forms["formBonjour"];

Champ texte et champ numérique¶

Voici ici un champ texte et un champ numérique :

HTML

<form class="my-5" id="formTxtVSNum">
    <input class="form-control" type="text" name="message" >
    <input class="form-control" type="number" name="nombre">

    <button type="button" class="btn btn-primary" onclick="afficherTypes()">Bonjour</button>
</form>

Le type de de la balise <input> permet à la plateforme (un mobile, par exemple) d'identifier quel clavier afficher pour faciliter l'entrée de données.

Toutefois, il est important de comprendre que le HTML n'a pas de notion de "type" de données (string, int, char, etc.).

Ainsi, ces deux champs, en javascript, sont tout de même vus comme des chaînes de caractères :

function afficherTypes()
{
/*Si formulaire pas valide, stopper le traitement de la fonction*/
    let formulaire = document.getElementById("formTxtVSNum");

    let valide = formulaire.reportValidity();

    if(valide == false)
    {
        return;
    }

/*Si on se rend ici, alors le formulaire est valide*/
    let champTxt = formulaire.message.value;
    let champNum = formulaire.nombre.value;

    console.log(typeof(champTxt));
    console.log(typeof(champNum));

    console.log(champTxt + 5);
    console.log(champNum + 5);

    let valeurNumerique = parseInt(champNum);

    console.log(typeof(valeurNumerique));
    console.log(valeurNumerique + 5);

}

Console

console

oninput VS onchange¶

Ici, faisons la distinction entre les événements oninput et onchange.

L'événement oninput est déclenché dès que la valeur d'un champ change.

L'événement onchange est déclenché en général lorsque le champ perd le focus.

Ainsi, pour un gradateur, l'événement oninput est plus intéressant, alors que pour un champ de sélection de couleur qui affiche une autre fenêtre et change de valeur uniquement sur la confirmation de l'utilisateur, l'événement onchange est préférable.

HTML

<input type="range" class="form-range" min="0" max="255" name="rouge" value="0" oninput="changerCouleur()">

<input type="color" class="form-control" name="selecteur" value="#ffffff" onchange="selectCouleur()">

Cases à cocher¶

Pour vérifier si une case à cocher est cochée, la propriété checked nous sera utile.

true = cochée

false = décochée

HTML

<form id="casesCocher">
    <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="enfant" name="kid">
        <label class="form-check-label" for="enfant">Enfant</label>
    </div>
    <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="adulte" name="adult">
        <label class="form-check-label" for="adulte">Adulte</label>
    </div>

    <button type="button" class="btn btn-primary" onclick="afficherCategorie()">Afficher catégorie</button>
</form>

Javascript

function afficherCategorie()
{
    let formulaire = document.getElementById("casesCocher");

    if(formulaire.kid.checked == true)
    {
        alert("Enfant sélectionné");
    }
    if (formulaire.adult.checked == true) {
        alert("Adulte sélectionné");
    }
    if (formulaire.kid.checked == true  && formulaire.adult.checked == true) {
        alert("Enfant et adulte sélectionnés");
    }
}

Boutons radio¶

Pour vérifier lequel des boutons radio est sélectionné, deux options sont possibles :

Vérifier lequel des boutons a l'attribut checked
Utiliser le formulaire pour nous indiquer la valeur du bouton coché :
- Utiliser le formulaire et le name des boutons radio mutuellement exclusifs
- Utiliser le value pour connaître la valeur du bouton sélectionné

HTML

<form id="formRadio">
    <div class="form-check">
        <input class="form-check-input" type="radio" name="classe" id="classeEcono" value="economique">
        <label class="form-check-label" for="classeEcono">
            Classe économique
        </label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="classe" id="classeAffaires" value="affaires">
        <label class="form-check-label" for="classeAffaires">
            Classe affaires
        </label>
    </div>
</form>

Javascript

function afficherClasse()
{
    /*Option 1*/

    if(document.getElementById("classeEcono").checked == true)
    {
        alert("Classe économique");
    }
    if (document.getElementById("classeAffaires").checked == true) {
        alert("Classe affaires");
    }

    /*Option 2*/

    let formulaire = document.getElementById("formRadio");

    alert("Classe " + formulaire.classe.value);
}