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" >

L'idée n'est pas de vérifier si le pseudo existe déjà après l'enregistrement, mais de vérifier l'existence d'un pseudo au fur et à mesure que l'utilisateur le crée. Il s'agit donc d'une vérification instantanée de la base de données. Pour vérifier en temps réel si un pseudo existe déjà dans votre base de données, il est nécessaire de créer deux fichiers. Le premier sera le formulaire. Le second sera un fichier appelé à chaque fois que l'utilisateur ajoute une lettre dans le champs du formulaire. Voici les éléments indispensables à mettre dans le fichier contenant le formulaire. Vous placerez le script dans la partie head et le champs input entre les balises <form> </form>

<script>
function writediv(texte) 
{ 
document.getElementById('namebox').innerHTML = texte; 
}

function verifnom(nom) 
{
	if(nom.length>4) {
	texte = file('verifnom.php?nom='+escape(nom))
	writediv(texte); 
		}
}


function file(fichier) 
{ 
if(window.XMLHttpRequest) // FIREFOX 
xhr_object = new XMLHttpRequest(); 
else if(window.ActiveXObject) // IE 
xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); 
else 
return(false); 
xhr_object.open("GET", fichier, false); 
xhr_object.send(null); 
if(xhr_object.readyState == 4) return(xhr_object.responseText); 
else return(false); 
} 
</script>


<input type="text" class="form-control" name="nom" id="nom" required="required" onKeyUp="verifnom(this.value)">
<div id="namebox"></div>

Le champs input lance la fonction verifnom() à chaque ajout d'une lettre dans le champs. la fonction va appeler un fichier php contenant la requete de vérification du nom dans la base de données. La fonction va alors récupérer le résultat et l'écrire dans la div "namebox". Nous noterons que la fonction se déclenche uniquement à partir du longeur de 4 lettres. Cela évite de procéder à quelques vérifications inutiles. Procédons maintenant au contenu du fichier verifnom.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>verification existence du pseudo</title> 
</head> 

<body><?php 
include('bdd-connect.php');
$compte="SELECT `nom_user` FROM `tbl_user` WHERE `nom_user` ='".$_GET["nom"]."'";
$calcul = $bdd->prepare($compte);
$calcul->execute();
$count = $calcul->rowCount();
if ($count>=1) 
	echo '<span style="color:#cc0000">Le pseudo existe déjà dans la base<span>'; 
else 
echo 'le pseudo est disponible';
?> 
</body> 
</html>

Ce fichier est utilisé pour se connecter à la base de données. Pensez à y noter vos informations de connections. ici, le fichier inclus bdd-connect.php le représente. Puis, vous allez modifier la requête pour qu'elle convienne à la vérification du pseudo dans vos tables. Le code demande simplement de compter l'existence du pseudo. Si un ou pseudo identique existe déjà, un message l'indiquant sera envoyé au fichier contenant le formulaire. Le principe est assez intuitif puisque le fichier contenant le formulaire va afficher le retour du contenu du fichier verifnom.php.



Vous notre contenu ?

Lisez toute l'info de Formaweb avec votre café


Laissez nous un commentaire...