FAQ JavaScriptConsultez toutes les FAQ
Nombre d'auteurs : 43, nombre de questions : 175, dernière mise à jour : 6 décembre 2013
Sommaire→Les formulaires→Les autres objets du formulaire- Comment soumettre un formulaire automatiquement ?
- Comment soumettre un formulaire en utilisant un lien ?
- Comment faire pour avoir deux boutons submit dans le même formulaire ?
- Comment vérifier que l'utilisateur a renseigné un champ d'un formulaire ?
- Comment vérifier que l'utilisateur a renseigné tous les champs texte d'un formulaire ?
- Comment vérifier la syntaxe d'une date ?
- Comment passer automatiquement au champ suivant lorsque la taille maximale du champ en cours est atteinte ?
- Comment lier deux listes déroulantes entre elles ?
- Comment ajouter des options dans une liste déroulante à partir d'une autre ?
- Comment désactiver une zone de texte en cochant une checkbox ?
- Comment remplacer un caractère par un autre lorsque l'utilisateur renseigne un champ texte ?
- Comment enlever la propriété readOnly d'un objet ?
- Comment n'autoriser que la saisie de chiffres dans un champ texte ?
- Comment faire passer un div au dessus d'un select dans IE6 ?
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.
setTimeout(function(){document.getElementById("idFormulaire").submit();},2500);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.
<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.
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 :
<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 :
// 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();
}<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 voulez vérifier qu'un utilisateur a bien saisi une valeur dans un des champs de votre formulaire (le champ nom par exemple) :
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> :
<form action="page.html" method="post" onsubmit="return verification();">
<input type="text" name="nom" id="nom" />L'exemple précédent deviendrait alors :
<input type="text" name="nom" id="nom" required="required" />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 :
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
Référez-vous au code suivant dans la section Date de notre FAQ :
Voici un exemple :
<!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> Voici un petit exemple bien utile :
<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("<option value=\"" +rue["p0v0"][i][0]+ "\">" +rue["p0v0"][i][1]);
</script>
</select>
</form>
</body>
</html>Voici le code à insérer dans les balises <script> :
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 :
<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</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</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>Voici le code de la fonction :
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 :
<input type="checkbox" id="cb" onclick="changement()" />
<input type="text" id="coucou" />function changement()
{
document.getElementById('coucou').disabled = document.getElementById('cb').checked;
}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 :
<input type="text" id="champ" onkeyup="virgule(this.value);">Nous pouvons utiliser ce code :
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 :
<input type="text" id="champ">Nous pouvons lui ajouter un comportement sur l'événement keyup :
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 :
// 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);
}
});document.getElementById('nom_Champ').readOnly = false;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();
}
}<input type="text" onkeypress="chiffres(event)" />Voici les codes HTML correspondants :
<input type="number" />
<input type="text" pattern="\d+" />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 :
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.