Soutenez-nous

FAQ JavaScriptConsultez toutes les FAQ

Nombre d'auteurs : 43, nombre de questions : 176, dernière mise à jour : 19 décembre 2013 

 
OuvrirSommaireLes formulairesLes autres objets du formulaire

Pour envoyer automatiquement un formulaire, on utilise la méthode submit de l'objet formulaire. Dans l'exemple ci-dessous, le formulaire sera envoyé 2500 millisecondes après l'appel à la fonction.

 
Sélectionnez
setTimeout(function(){document.getElementById("idFormulaire").submit();},2500);
Mis à jour le 19 décembre 2013  par simone.51, Auteur, NoSmoking

Vous souhaitez, pour des raisons esthétiques (ou autres), que votre formulaire soit soumis non pas par appui sur un bouton ou une image, mais par un clic sur un simple lien HTML. Il suffit pour cela de déclencher la soumission avec l'appel de la méthode submit() de l'objet formulaire, et d'ajouter le mot-clé javascript pour prévenir le navigateur de considérer le lien comme étant une instruction JavaScript.

 
Sélectionnez
<a href="javascript:document.getElementById('idFormulaire').submit()">valider</a>

Lorsqu'un formulaire est soumis par sa méthode JavaScript submit(), le gestionnaire d'événement du formulaire onsubmit n'est pas déclenché !
De par la présence d'une pseudo-url, l'utilisation de ce code n'est toutefois pas recommandée.

Mis à jour le 19 décembre 2013  par Jérôme, Auteur

Lien : A quoi sert "javascript:" dans une balise HTML ?

En fait, il ne s'agit pas de deux boutons submit mais de deux boutons simples auxquels on affecte une action.
Voici le formulaire HTML :

 
Sélectionnez
<form name="formulaire" method="post" action="" onsubmit="return testsubmit()">
...
<input type="button" value="envoyer page A" onclick="gopage('pageA.asp')" />
<input type="button" value="envoyer page B" onclick="gopage('pageB.asp')" />
</form>

Et voici le script :

 
Sélectionnez
// fonction pour le cas d'appui sur la touche entrée
function testsubmit() {
    return !!document.formulaire.action;
}
 
//fonction pour choisir l'action
function gopage(page)
{
    document.formulaire.action = page;
    document.formulaire.submit();
}
En HTML5, divers nouveaux attributs ont été ajoutés pour les éléments de formulaire. En particulier, l'attribut formaction permet de modifier l'attribut action du formulaire. L'exemple précédent deviendrait alors :
 
Sélectionnez
<form name="formulaire" method="post" action=""">
...
<input type="submit" value="envoyer page A" formaction="pageA.asp" />
<input type="submit" value="envoyer page B" formaction="pageB.asp" />
</form>
Vous remarquerez qu'il n'est plus nécessaire d'utiliser JavaScript.
Mis à jour le 5 novembre 2013  par Jérôme, Bovino

Lien : Créez des formulaires fabuleux avec HTML5

Vous voulez vérifier qu'un utilisateur a bien saisi une valeur dans un des champs de votre formulaire (le champ nom par exemple) :

 
Sélectionnez
function verification(){
    if(document.getElementById('nom').value == ""){
        alert ('Vous avez oublié de saisir un champ !');
        return false;
    }
	return true;
}

Et maintenant, le code de la balise <form> :

 
Sélectionnez
<form action="page.html" method="post" onsubmit="return verification();">
<input type="text" name="nom" id="nom" />
En HTML5, divers nouveaux attributs ont été ajoutés pour les éléments de formulaire. En particulier, l'attribut required permet d'indiquer qu'un champ est requis et l'attribut pattern permet de définir le format souhaité pour la valeur d'un champ. Notez aussi que de nouveaux types de champs sont apparus.
L'exemple précédent deviendrait alors :
 
Sélectionnez
<input type="text" name="nom" id="nom" required="required" />
Vous remarquerez qu'il n'est plus nécessaire d'utiliser JavaScript.
Mis à jour le 5 octobre 2013  par simone.51, Bovino

Lien : Créez des formulaires fabuleux avec HTML5

 
Sélectionnez
var inputList = document.getElementById("idFormulaire").elements;
var alertTxt = "";
var n = inputList.length;
var i;
 
for (i=0; i<n; i++)
{
    if (inputList[i].type.toLowerCase()=="text" && inputList[i].value.length==0)
    {
        alertTxt += "Le champ " + inputList[i].name + " n'a pas été rempli \n";
    }
}
alert(alertTxt);

Le code ci-dessus peut être généralisé à d'autres types d'input (par exemple : checkbox, radio).

Pour le textarea, la condition est différente car ce n'est pas une balise de type input. La condition portera donc sur l'attribut tagName :

 
Sélectionnez
if (inputList[i].tagName=="TEXTAREA" && inputList[i].value.length==0)

Remarques :

  • toLowerCase() est une méthode de l'objet String qui convertit les caractères alphabétiques d'une chaîne en minuscules. Cette transformation nous permet donc de s'affranchir de la façon dont un navigateur traite l'information contenue dans l'attribut type ;
  • tagName retournera toujours une chaine en majuscules, il y a lieu de mettre le nom de la balise en majuscules.
    Voir : DOM CoretagName
Mis à jour le 19 décembre 2013  par SpaceFrog, denisC, Auteur, NoSmoking

Voici un exemple :

 
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>AutoTab Page</title>
<script>
function Autotab(box, longueur, texte)
{
    if (texte.length > longueur-1) 
    {
        document.getElementById('TB'+box).focus();
    }
}
</script>
</head>
<body>
<div>
    <input type="text" size="5" maxlength="5" name="TB1" id="TB1" tabindex="1" onkeyup="Autotab(2, this.size, this.value)" />
    <input type="text" size="2" maxlength="2" name="TB2" id="TB2" tabindex="2" onkeyup="Autotab(3, this.size, this.value);" />
    <input type="text" maxlength="5" name="TB3" id="TB3" tabindex="3" />
</div>
</body>
</html> 
Mis à jour le 19 décembre 2013  par SpaceFrog, Auteur

Il existe plusieurs manières pour lier des listes déroulantes entre elles. Celle que nous décrivons ici peut convenir pour des petites listes. Et le nombre de listes peut être variable. Le code suivant gère trois listes.

Voici le code HTML du formulaire :

 
Sélectionnez
<form name="a_fond_la_forme">
    <p>
      <label for="listepays">Choisir un pays</label>
      <select id="listepays" name="listepays" onchange='fillSelect(this.id, this.value)'></select>
    </p>
    <p>
      <label for="listeville">Choisir une ville</label>
      <select id="listeville" name="listeville" onchange='fillSelect(this.id, this.value)'></select>
    </p>
    <p>
      <label for="listerue">Choisir une rue</label>
      <select id="listerue" name="listerue"></select>
    </p>
  </form>

Voici la déclaration des données, par exemple à la manière d'une structure JSON :

 
Sélectionnez
/**
* déclaration des données pour les SELECT
**/
var pays = [
	{'valeur': 'p0', 'texte': 'pays 0'},
	{'valeur': 'p1', 'texte': 'pays 1'},
	{'valeur': 'p2', 'texte': 'pays 2'}
];
var ville = {
	'p0' :  // clé sur data pays
	[
		{ 'valeur': 'p0v0', 'texte': 'pays_0 ville_0'},
		{ 'valeur': 'p0v1', 'texte': 'pays_0 ville_1'},
		{ 'valeur': 'p0v2', 'texte': 'pays_0 ville_2'}
	],
	'p1' :
	[
		{ 'valeur': 'p1v0', 'texte': 'pays_1 ville_0'},
		{ 'valeur': 'p1v1', 'texte': 'pays_1 ville_1'},
		{ 'valeur': 'p1v2', 'texte': 'pays_1 ville_2'}
	],
	'p2' :
	[
		{ 'valeur': 'p2v0', 'texte': 'pays_2 ville_0'},
		{ 'valeur': 'p2v1', 'texte': 'pays_2 ville_1'},
		{ 'valeur': 'p2v2', 'texte': 'pays_2 ville_2'}
	]
};

var rue = {
	'p0v0' :  // clé sur data ville
	[
		{ 'valeur': 'p0v0r0', 'texte': 'pays_0 ville_0 rue_0'},
		{ 'valeur': 'p0v0r1', 'texte': 'pays_0 ville_0 rue_1'},
		{ 'valeur': 'p0v0r2', 'texte': 'pays_0 ville_0 rue_2'}
	],
	'p0v1' :
	[
		{ 'valeur': 'p0v1r0', 'texte': 'pays_0 ville_1 rue_0'},
		{ 'valeur': 'p0v1r1', 'texte': 'pays_0 ville_1 rue_1'},
		{ 'valeur': 'p0v1r2', 'texte': 'pays_0 ville_1 rue_2'}
	],
	'p0v2' :
	[
		{ 'valeur': 'p0v2r0', 'texte': 'pays_0 ville_2 rue_0'},
		{ 'valeur': 'p0v2r1', 'texte': 'pays_0 ville_2 rue_1'},
		{ 'valeur': 'p0v2r2', 'texte': 'pays_0 ville_2 rue_2'}
	],
	'p1v0' :
	[
		{ 'valeur': 'p1v0r0', 'texte': 'pays_1 ville_0 rue_0'},
		{ 'valeur': 'p1v0r1', 'texte': 'pays_1 ville_0 rue_1'},
		{ 'valeur': 'p1v0r2', 'texte': 'pays_1 ville_0 rue_2'}
	],
	'p1v1' :
	[
		{ 'valeur': 'p1v1r0', 'texte': 'pays_1 ville_1 rue_0'},
		{ 'valeur': 'p1v1r1', 'texte': 'pays_1 ville_1 rue_1'},
		{ 'valeur': 'p1v1r2', 'texte': 'pays_1 ville_1 rue_2'}
	],
	'p1v2' :
	[
		{ 'valeur': 'p1v2r0', 'texte': 'pays_1 ville_2 rue_0'},
		{ 'valeur': 'p1v2r1', 'texte': 'pays_1 ville_2 rue_1'},
		{ 'valeur': 'p1v2r2', 'texte': 'pays_1 ville_2 rue_2'}
	],
	'p2v0' :
	[
		{ 'valeur': 'p2v0r0', 'texte': 'pays 2 ville_0 rue_0'},
		{ 'valeur': 'p2v0r1', 'texte': 'pays 2 ville_0 rue_1'},
		{ 'valeur': 'p2v0r2', 'texte': 'pays 2 ville_0 rue_2'}
	],
	'p2v1' :
	[
		{ 'valeur': 'p2v1r0', 'texte': 'pays 2 ville_1 rue_0'},
		{ 'valeur': 'p2v1r1', 'texte': 'pays 2 ville_1 rue_1'},
		{ 'valeur': 'p2v1r2', 'texte': 'pays 2 ville_1 rue_2'}
	],
	'p2v2' :
	[
		{ 'valeur': 'p2v2r0', 'texte': 'pays 2 ville_2 rue_0'},
		{ 'valeur': 'p2v2r1', 'texte': 'pays 2 ville_2 rue_1'},
		{ 'valeur': 'p2v2r2', 'texte': 'pays 2 ville_2 rue_2'}
	]
};

Pour la gestion des listes, nous vous proposons ces deux méthodes (attention à la récursivité) :

 
Sélectionnez
/**
* fonction d'ajout des options
**/
function updateSelect( id_select, liste){
	var oOption,
		oSelect = document.getElementById( id_select),
		i, nb = liste.length;
	
	// vide le SELECT
	oSelect.options.length = 0;

	// création des options d'après la liste
	for (i = 0; i < nb; i++) {
		// création option
		oOption = new Option( liste[i].texte, liste[i].valeur);
		
		// ajout de l'option en fin
		oSelect.add( oOption);    
	}
	
	// on retourne la valeur pour le SELECT suivant
	return oSelect.value;
}

/**
* fonction de remplissage des SELECT
**/
function fillSelect( id_select, valeur) {
	switch (id_select) {
		case 'init':
			// mise à jour SELECT
			valeur = updateSelect( 'listepays', pays);    
			// appel sur SELECT lié
			fillSelect( 'listepays', valeur);
			break;
		
		case 'listepays':
			// mise à jour SELECT    
			valeur = updateSelect( 'listeville', ville[valeur]);
			// appel sur SELECT lié
			fillSelect( 'listeville', valeur);

			break;
			
		case 'listeville':
			// mise à jour SELECT    
			updateSelect( 'listerue', rue[valeur]);    
			break;
	}
}

Dans le cas de listes plus conséquentes, nous vous conseillons de passer par une méthode impliquant un serveur.

Cet article vous propose une technique utilisant l'AJAX :
Web 2.0, allez plus loin avec AJAX et XMLHttpRequest -> IV-A. Listes liéesListes liées.

Et ce billet de blog vous décrit un exemple complet :
Listes liées : PHP, mySql, jQuery (ajax)Listes liées.

Mis à jour le 19 décembre 2013  par Jérôme, Auteur, NoSmoking

Lien : Exemple d'utilisation de ce script

Voici le code HTML du formulaire :

 
Sélectionnez
<select name="depart" id="depart" size="5" ondblclick="ajout('depart','arrive')">
	<option value="0">Double clic pour sélectionner une option</option>
	<option value="1">Option 1</option>
	<option value="2">Option 2</option>
	<option value="3">Option 3</option>
	<option value="4">Option 4</option>
</select>
 
<select name="arrive" id="arrive" size="5" ondblclick="ajout('arrive','depart')">
	<option value="0">Double clic pour supprimer une option</option>
</select>

Voici le code JavaScript :

 
Sélectionnez
function ajout(nomListeDep, nomListeArr)
{
	var idx;
	var listeDep, listeArr;
	var op;
 
	listeDep = document.getElementById(nomListeDep);
	idx = listeDep.options.selectedIndex;
	if (idx == 0)
	{
		alert("Sélectionnez une option");
		return false;
	}
 
	// Ajout de l'option sélectionnée dans la liste d'arrivée
	listeArr = document.getElementById(nomListeArr);
	listeArr.appendChild(listeDep.options[idx]);
}
Mis à jour le 19 décembre 2013  par simone.51, Auteur, NoSmoking

Lien : Exemple d'utilisation de ce script

Voici le code de la fonction :

 
Sélectionnez
function changement()
{
   if (document.getElementById('cb').checked)
      document.getElementById('coucou').disabled=true;
   else
      document.getElementById('coucou').disabled=false;
}

Et voici le code du champ texte et de la checkbox :

 
Sélectionnez
<input type="checkbox" id="cb" onclick="changement()" />
<input type="text" id="coucou" />
Il est possible de simplifier le code JavaScript en écrivant :
 
Sélectionnez
function changement()
{
    document.getElementById('coucou').disabled = document.getElementById('cb').checked;
}
Mis à jour le 19 décembre 2013  par simone.51, Auteur

Cette manipulation n'est pas évidente jusqu'à présent. Par exemple, si l'on veut remplacer toutes les virgules par un point dans ce champ :

 
Sélectionnez
<input type="text" id="champ" onkeyup="virgule(this.value);">

Nous pouvons utiliser ce code :

 
Sélectionnez
function virgule(texte) 
{
    if (texte.substr(texte.length-1,1) == ",") 
    {
		document.getElementById('champ').value=texte.substr(0,texte.length-1)+ "." ;
    }
} 

Cependant, on constate que si l'utilisateur laisse le doigt appuyé sur la touche virgule (",") seule la dernière virgule (après relâchement de la touche) sera transformée en point ("."). De même, si une chaîne de caractères contenant des virgules est copiée-collée dans le champ, les virgules ne sont pas transformées en points.

Une autre approche consiste à utiliser la méthode String.replace(). Reprenons notre champ :

 
Sélectionnez
<input type="text" id="champ">

Nous pouvons lui ajouter un comportement sur l'événement keyup :

 
Sélectionnez
document.getElementById("champ").addEventListener("keyup", function(e){
    var aRemplacer = ',', remplacerPar = '.';    
    var start = this.selectionStart,  end = this.selectionEnd;
    this.value = this.value.replace(new RegExp(aRemplacer,"g"),remplacerPar);
    this.setSelectionRange(start, end); // restaure la position du curseur
});

Toutefois, la méthode setSelectionRange n'est pour l'instant pas supportée par tous les navigateurs.

On pourrait donc envisager la chose d'une troisième manière :

 
Sélectionnez
// attacher un événement
var bindEvent = function( element, type, eventHandler ) {
  if ( element.addEventListener ) {
    element.addEventListener( type, eventHandler, false );
  } else if ( element.attachEvent ) {
    element.attachEvent( "on" + type, eventHandler );    
  }
};

bindEvent(document.getElementById("champ"), "keyup", function(){
    var aRemplacer = ',', remplacerPar = '.';    
    if (this.value.indexOf(",") >= 0) {
        this.value = this.value.replace(new RegExp(aRemplacer,"g"),remplacerPar);
    }
});
Mis à jour le 19 décembre 2013  par simone.51, Auteur, SylvainPV, Kaamo
 
Sélectionnez
document.getElementById('nom_Champ').readOnly = false;
Créé le 21 janvier 2004  par simone.51
 
Sélectionnez
function chiffres(event) {
	// Compatibilité IE / Firefox
	if(!event && window.event) {
		event=window.event;
	}
	// IE
	if(event.keyCode < 48 || event.keyCode > 57) {
		event.returnValue = false;
		event.cancelBubble = true;
	}
	// DOM
	if(event.which < 48 || event.which > 57) {
		event.preventDefault();
		event.stopPropagation();
	}
}
 
Sélectionnez
<input type="text" onkeypress="chiffres(event)" />
En HTML5, vous pouvez utiliser soit un champ avec le type number, soit l'attribut pattern pour parvenir au même résultat sans passer par JavaScript.
Voici les codes HTML correspondants :
 
Sélectionnez
<input type="number" />
<input type="text" pattern="\d+" />
Mis à jour le 5 novembre 2013  par neo.51, denisC, Bovino

Lien : Exemple d'utilisation de ce script
Lien : Créez des formulaires fabuleux avec HTML5

Il suffit de mettre en place une <iframe> au même niveau que la <div>. Cela permet au contenu de la <div> d'être affiché au dessus du <select>.

La méthode ci-dessous permet de positionner l'iframe au niveau exact de la div :

 
Sélectionnez
function putFrame()
{
    var f = document.createElement("iframe"),
        d = document.getElementById("theDiv"),
        fStyle = f.style;
    // application du style sur l'IFRAME
    fStyle.position = "absolute";
    fStyle.width = d.offsetWidth + "px";
    fStyle.height = d.offsetHeight + "px";;
    fStyle.top = d.offsetTop + "px";
    fStyle.left = d.offsetLeft + "px";
    fStyle.zIndex = 1;
    document.body.appendChild(f);
}

Le problème ne se pose plus avec les versions ultérieures à IE6. Une gestion des z-index est alors suffisante.

Mis à jour le 19 décembre 2013  par siddh, NoSmoking

Lien : Exemple d'utilisation de ce script

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2004 Developpez Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.