FAQ JavaScriptConsultez toutes les FAQ

Nombre d'auteurs : 43, nombre de questions : 176, dernière mise à jour : 24 février 2015 

 
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 6 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 6 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 6 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 6 décembre 2013  par SpaceFrog, Auteur

Voici un petit exemple bien utile :

 
Sélectionnez
<html>
<head>
	<script type="text/javascript">
	var pays = []; //nouveau tableau
	pays[0] = ["p0", "pays0"]; //nouveau tableau, on va donc avoir pays[0][0]="p0"
	pays[1] = ["p1", "pays1"];
	pays[2] = ["p2", "pays2"];
	 
	var ville=[];
	// pays0
	ville["p0"] = [];
	ville["p0"][0] = ["p0v0", "pays0-ville0"];
	ville["p0"][1] = ["p0v1", "pays0-ville1"];
	 
	//pays1
	ville["p1"]=[];
	ville["p1"][0] = ["p1v0", "pays1-ville0"];
	ville["p1"][1] = ["p1v1", "pays1-ville1"];
	 
	//pays2
	ville["p2"] = [];
	ville["p2"][0] = ["p2v0", "pays2-ville0"];
	ville["p2"][1] = ["p2v1", "pays2-ville1"];
	 
	 
	var rue = [];
	//pays0-ville0
	rue["p0v0"] = [];
	rue["p0v0"][0] = ["p0v0r0", "pays0-ville0-rue0"];
	rue["p0v0"][1] = ["p0v0r1", "pays0-ville0-rue1"];
	 
	//pays0-ville1
	rue["p0v1"] = [];
	rue["p0v1"][0] = ["p0v1r0", "pays0-ville1-rue0"];
	rue["p0v1"][1] = ["p0v1r1", "pays0-ville1-rue1"];
	rue["p0v1"][2] = ["p0v1r2", "pays0-ville1-rue2"];
	 
	 
	//pays1-ville0
	rue["p1v0"] = [];
	rue["p1v0"][0] = ["p1v0r0", "pays1-ville0-rue0"];
	rue["p1v0"][1] = ["p1v0r1", "pays1-ville0-rue1"];
	 
	//pays1-ville1
	rue["p1v1"] = [];
	rue["p1v1"][0] = ["p1v1r0", "pays1-ville1-rue0"];
	rue["p1v1"][1] = ["p1v1r1", "pays1-ville1-rue1"];
	 
	 
	//pays2-ville0
	rue["p2v0"] = [];
	rue["p2v0"][0] = ["p2v0r0", "pays2-ville0-rue0"];
	rue["p2v0"][1] = ["p2v0r1", "pays2-ville0-rue1"];
	 
	//pays1-ville1
	rue["p2v1"] = [];
	rue["p2v1"][0] = ["p2v1r0", "pays2-ville1-rue0"];
	rue["p2v1"][1] = ["p2v1r1", "pays2-ville1-rue1"];
	rue["p2v1"][2] = ["p2v1r2", "pays2-ville1-rue2"];
	function filltheselect(liste, choix)
	{switch (liste)
	   {
	   case "listepays":
	      raz("listeville");
	      raz("listerue");
	      for (i=0; i<ville[choix].length; i++)
	         {
	         new_option = new Option(ville[choix][i][1],ville[choix][i][0]);
	         document.formu.elements["listeville"].
	 options[document.formu.elements["listeville"].length]=new_option;
	         }
	      for (i=0; i<rue[choix+"v0"].length; i++)
	         {
	         new_option = new Option(rue[choix+"v0"][i][1],rue[choix+"v0"][i][0]);
	         document.formu.elements["listerue"].options[document.formu.
	 elements["listerue"].length]=new_option;
	         }
	      break;
	   case "listeville":
	      raz("listerue");
	      for (i=0; i<rue[choix].length; i++)
	         {
	         new_option = new Option(rue[choix][i][1],rue[choix][i][0]);
	         document.formu.elements["listerue"].options[document.formu.
	 elements["listerue"].length]=new_option;
	         }
	      break;
	   }
	}
	 
	function raz(liste)
	{l=document.formu.elements[liste].length;
	for (i=l; i>=0; i--)
	   document.formu.elements[liste].options[i]=null;
	}
	</script>
</head>
<body>
	<form name="formu"> 
	Choisir un pays 
	<select name="listepays" onChange='filltheselect(this.name, this.value)'>
	   <script language="javascript">
	   for (i=0; i<pays.length; i++)
	      document.write("<option value=\"" +pays[i][0]+ "\">" +pays[i][1]);
	   </script>
	</select>
	<br>
	 Choisir une ville
	<select name="listeville" onChange='filltheselect(this.name, this.value)'>
	   <script language="javascript">
	   for (i=0; i<ville["p0"].length; i++)
	      document.write("<option value=\"" +ville["p0"][i][0]+ "\">" +ville["p0"][i][1]);
	   </script>
	</select>
	 <br>
	 Choisir une rue
	<select name="listerue">
	   <script language="javascript">
	   for (i=0; i<rue["p0v0"].length; i++)
	      document.write("&lt;option value=\"" +rue["p0v0"][i][0]+ "\">" +rue["p0v0"][i][1]);
	   </script>
	</select>
	 </form>
</body>
</html>
Mis à jour le 26 mars 2009  par Jérôme

Voici le code à insérer dans les balises <script> :

 
Sélectionnez
function ajout(listeDep){
    var existe = 0;
    if(listeDep.options[listeDep.selectedIndex].value != 0){
        for(i=1;i< document.getElementById('arrive').length ;i++){
            if(document.getElementById('arrive').options[i].text ==
listeDep.options[listeDep.selectedIndex].text){
                existe = 1;
            }
            else{
                if(existe == 1){
                    existe = 1;
                }
                else{
                    existe = 0;
                }
            }
        }
 
        if(existe == 0){
            var option = new Option(listeDep.options[listeDep.selectedIndex].
text,listeDep.options[listeDep.selectedIndex].value);
            document.getElementById('arrive').options[0].text =
"-- Liste des clients séléctionnés --";
            document.getElementById('arrive').options[0].value = 0;
            document.getElementById('arrive').options[(document.
getElementById('arrive').length)] = option;
        }
        else{
            alert('Cette option est déjà sélectionnée !!!');
        }
    }
}
 
function enleve(listeArr){
    if(listeArr.options[listeArr.selectedIndex].value == 0){
    }
    else{
        listeArr.options[listeArr.selectedIndex] = null;
    }
}

Et voici le formulaire :

 
Sélectionnez
<table width="90%">
    <tr>
        <td>
            <select name="depart" size="5" ondblclick="ajout(this)"
style="scrollbar-3dlight-color:red; border: red 1px solid; background-color: #f2f2f2">
                <option value="0">
Double clic pour sélectionner un client
</option>
                <option value="1">Option 1&lt;/option>
                <option value="2">Option 2&lt;/option>
                <option value="3">Option 3&lt;/option>
                <option value="4">Option 4&lt;/option>
            </select>
        </td>
        <td>
            <select name="arrive" id="arrive" size="5" ondblclick="enleve(this);"
style="scrollbar-3dlight-color:red; border: red 1px solid; background-color: #f2f2f2">
                <option value="0">
Aucune option n'est sélectionnée !!!
</option>
            </select>
        </td>
    </tr>
</table>
Créé le 21 janvier 2004  par simone.51

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 6 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 6 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 6 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.