Tutos et astuces javascript

Formaweb met à votre disposition sur cette page, une série de script javascript pour des résultats très variés. Vous trouverez les exemples et le résultat de chaque script javascript.

J'ai eu besoin pour un autre projet de faciliter le travail de l'utilisateur lorsqu'il rempli une zone de texte. Cela évite ainsi les fautes de frappes et accélère la rapidité d'utilisation. Pour ce projet, J'ai besoin de créer une fonction qui se déclenche lorsqu'on clique sur la case à cocher (checkbox). j'ai besoin de vérifier qu'une case checkbox était cochée afin de remplir une fonction. J'ai également besoin d'ajouter du texte à un textarea. Enfin j'ai besoin de supprimer le texte s'il la checkbox était décochée. Et tout cela en javascript car ce doit être instantané.

Objectif 1 : Comment vérifier qu'une checkbox est cochée en javascript ?

Pour cela, il est nécessaire de récupérer le statut checked d'un input possédant un id. Voici le code javascript :

 if(document.getElementById(ide).checked == true) 
{...}
else
{...}

ide représente bien évidemment l'id de la checkbox. <input type="checkbox" name="action" id="mange des pistaches" value="1" >mange des pistaches

Objectif 2 : Comment ajouter du texte à une zone de texte (textarea) en javascript ?

Tout d'abord, je crée ma zone de texte avec un id : <textarea cols="21" class="form-control" rows="2" name="action" id="action" required="required" placeholder="exprimez-vous" >... </textarea> Il est toujours nécessaire en javascript de mettre un id. C'est la meilleure méthode pour cibler un élément. Je peux ainsi cibler ce textarea via l'id "action" grâce au code : chaine=document.getElementById('action').value Puis je crée une variable chaine à laquelle je demande d'ajouter du contenu. Et je lui demande de rajouter ce contenu à l'élément portant cet id.

var chaine="";
chaine=document.getElementById('action').value + ide +" ";
document.getElementById('action').value = chaine;	

Cet exemple va rajouter à la zone de texte la valeur de l'id de la case cochée.

Objectif 3 : Comment supprimer du texte en javascript ?

Au lieu de penser supprimer, j'ai pensé remplacer. J'ai donc remplacer un mot par rien. Voici la fonction javascript pour remplacer: chaine=chaine.replace("mot à supprimer",""); Il faut donc commencer par cibler le texte sur lequel agir grâce à son id. Puis le lire et remplacer les mots souhaités. En associant cela à mon début de code, cela donne :

chaine=document.getElementById('action').value;
chaine=chaine.replace(ide,"");
document.getElementById('action').value = chaine;

Dernier objectif : Comment réaliser cette action lorsqu'on coche ou décoche la case ?

Pour cela, il faut donc penser au clic puisqu'on clic pour cocher. Dans les paramètres de l'input, il est donc intéressant de demander la réalisation d'une fonction au clic. Cela donne : <input type="checkbox" name="action" id="mange des pistaches" onclick="add('mange des pistaches')" value="1" > Dans cet exemple, je lance la fonction add() avec le paramètre 'mange des pistaches' lorsque je clic sur la case. Vous avez tout compris ? Je vous donne le code entier :

<script>
var chaine="";
function add(ide)
{
if(document.getElementById(ide).checked == true)
		{
		chaine=document.getElementById('action').value + ide +" ";
		document.getElementById('action').value = chaine;	
		}
		else 
		{	
	chaine=document.getElementById('action').value;
	chaine=chaine.replace(ide,"");
	document.getElementById('action').value = chaine;
		}
};
</script>
<p>
<input type="checkbox" name="action" id="mange des pistaches" onclick="add('mange des pistaches')" value="1" >mange des pistaches
<input type="checkbox"name="action" id="bois" onclick="add('bois')" value="2" >bois
<input type="checkbox" name="action" id="dors à poing fermé" onclick="add('dors à poing fermé')" value="3" >dors à poing fermé
<textarea cols="21"  class="form-control" rows="2"  name="action" id="action"  required="required" placeholder="exprimez-vous" >laissez moi tranquille,je </textarea>

Cela donne : mange des pistaches bois dors à poing fermé

Surcharger une page de contenu n'est pas forcément la meilleure idée. Il existe plusieurs méthodes pour rendre la lecture plus fluide telle que celle que j'utilise sur cette page. En effet, pouvoir dérouler la réponse à une question telle une FAQ permet d'avoir une page claire et des réponses rapidement accessibles. Mais cette méthode attribuée aux tabs de Jquery n'est pas la seule solution. Vous pouvez également créer un contenu dans une div masquée puis, à l'aide d'un bouton, afficher cette zone. Dans cet objectif, le bouton peut alors, de manière alternative, afficher ou masquer le contenu. Pour aller plus rapidement, nous allons créer une fonction qui sera fonctionnelle pour n'importe quelle zone tant que son id existe. Nous allons donc créer une zone ayant un display précis :

Je vais être affiché puis masqué à tour de role. Voici le code de cette div : <div id="test" style="display:inline;" > Je vais être affiché puis masqué à tour de role.</div> vous noterez que le plus important est l'id de la div.

Le code du bouton : <button type="button" id="open" onclick="affichercacher('test');" >Afficher / masquer </button> Et voici le code javascript :

<script>
function affichercacher(id) {
    var x = document.getElementById(id);
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>

Ce code javascript va fonctionner avec tous les identifiants tant qu'ils sont notés dans le lancement de la fonction au sein du bouton. Bien évidemment, vous pourrez créer une fonction pour un id précis mais quel intéret lorsqu'on a une fonction qui s'applique à toutes les situations pour afficher ou masquer une div ?

Les champs input type="password" sont par défaut masqués. Pour des raisons qui vous sont propres, vous pouvez permettre à votre utilisateur de voir son mot de passe. Vous pouvez réaliser cette opération en créant un bouton pour changer le type d'input. <button id="open" type="button" style="display:inline" onclick="afficher();" >afficher</button> Pour être plus simple dans votre démarche, vous créerez alors un second bouton, avec l'effet inverse : masquer la valeur. <button id="close" type="button" style="display:inline" onclick="masquer();" >masquer</button> Il ne s'agit pas ici de masquer le champs input mais bien de lui redonner un type input. Et voici le code javascript :

<script>
function masquer(){
document.getElementById("password").type="password";
document.getElementById("close").style.display = 'none';
document.getElementById("open").style.display = 'inline';
}

function afficher(){
document.getElementById("password").type="text";
document.getElementById("open").style.display = 'none';
document.getElementById("close").style.display = 'inline';
}
</script>

Vous remarquerez que j'ai rajouter 2 lignes dans chacune des fonctions pour jouer sur le display "none" ou "inline". Ces deux lignes sont utiles pour aficher ou masquer les boutons lorsque qu'ils sont inutiles. En effet, un bouton pour afficher le mot de passe alors qu'il est déjà affiché est inutile et vice-versa.

Dans certain formulaire, il suffit de cocher une case puis de valider. Cette astuce va permettre à l'utilisateur de sauter une étape. Voici comment créer un bouton qui va checker la case avant de valider le formulaire. Avant de poursuivre, il est intéressant de savoir qu'un bouton qui n'a pas de type ( button/ submit/reset) et présent au sein d'un formulaire va d'abord lancer l'action qui lui est attribuée puis valider le formulaire. Nous avons, avec cette simple explication, expliqué la solution. Il nous suffit désormais de créer une fonction pour cocher une case de type checkbox. Cette fonction est simplifiée avec Jquery.

<script>
function valideok() {
$("#ok").prop("checked", true);
}
</script>

Voici le code du bouton : <button name="appoui" id="appoui" onclick="valideok();" >coche</button> Et le code du champs input. Pour le rendre invisible, vous aurez simplement à modifier le display pour mettre "none" à la place de "inline". <input style="display:inline" type="radio" class="form-control" style="text-align:left;" name="apport" id="ok" value="2" > Enfin, pensez à bien mettre le bouton ainsi que la case à cocher dans votre formulaire, entre les balises <form> et </form>

Cette fonction est simplifiée avec Jquery.

<script>
function insertnum(num) {
	$("#nombre").val(num);
}
</script>

Voici le code du bouton : <button name="app" id="app" onclick="insertnum(5)" >insert 5</button> Et le code du champs input. Pour le rendre invisible, vous aurez simplement à modifier le display pour mettre "none" à la place de "inline". <input style="display:inline" type="text" class="form-control" style="text-align:left;" name="gain" id="nombre" value="2" aria-describedby="basic-addon3" >



Vous notre contenu ?

Lisez toute l'info de Formaweb avec votre café

Erreur : SQLSTATE[HY000] [2002] php_network_getaddresses: getaddrinfo failed: Name or service not known