Faq Javascript

Sommaire > Formulaire HTML et autres objets > 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 champs suivant lorsque la taille maximale du champs 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 IE?

Comment soumettre un formulaire automatiquement ?

[haut]

auteur : simone.51

<script language='Javascript'>
    setTimeout(function(){monForm.submit();},2500);<br/>
</script>

Comment soumettre un formulaire en utilisant un lien?

[haut]

auteur : Jérôme

Vous souhaitez pour des raisons esthétiques (ou autres) que votre formulaire soit 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 en ajoutant le mot-clé javascript pour prévenir le navigateur de considérer le lien comme étant une instruction javascript.

<a href="javascript:document.forms['monFormulaire'].submit()">valider</a>

Attention, lorsqu'un formulaire est soumis par sa méthode javascript submit, le gestionnaire d'évenement du formulaire onsubmit n'est pas déclenché!

Comment faire pour avoir deux boutons submit dans le même formulaire ?

[haut]

auteur : Jérôme

En fait, il ne s'agit pas de deux boutons submit mais de deux boutons simples auxquel 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 :

<script language="javascript">
// fonction pour le cas d'appui sur la touche entrée
function testsubmit() {
    if (document.formulaire.action=="") return false;
return true ;
}

//fonction pour choisir l'action
function gopage(page)
{
    document.formulaire.action = page;
    document.formulaire.submit();
}
</script>

Comment vérifier que l'utilisateur a renseigné un champ d'un formulaire ?

[haut]

auteur : simone.51

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

Comment vérifier que l'utilisateur a renseigné tous les champs texte d'un formulaire ?

[haut]

auteurs : SpaceFrog, denisC

var inputList = document.forms['monFormulaire'].elements;
vat alertTxt = "";
for (unInput in inputList){
    if(unInput.type=="text"&&unInput.value.length==0){
		alertTxt += "Le champ " + unInput.name + " n'a pas été rempli \n";
	}
}
alert(alertTxt)

Le code ci-dessus peut être généralisé à d'autres types d'inputs.

Comment vérifier la syntaxe d'une date ?

[haut]

auteur : simone.51

function CheckDate(d) {
      // Cette fonction vérifie le format JJ/MM/AAAA saisi et la validité de la date.
      // Le séparateur est défini dans la variable separateur
      var amin=1999; // année mini
      var amax=2005; // année maxi
      var separateur="/"; // separateur entre jour/mois/annee
      var j=(d.substring(0,2));
      var m=(d.substring(3,5));
      var a=(d.substring(6));
      var ok=1;

      if ( ((isNaN(j))||(j<1)||(j>31)) && (ok==1) ) {
         alert("Le jour n'est pas correct."); ok=0;
      }

      if ( ((isNaN(m))||(m<1)||(m>12)) && (ok==1) ) {
         alert("Le mois n'est pas correct."); ok=0;
      }

      if ( ((isNaN(a))||(a<amin)||(a>amax)) && (ok==1) ) {
         alert("L'année n'est pas correcte."); ok=0;
      }

      if ( ((d.substring(2,3)!=separateur)||(d.substring(5,6)!=separateur))
	  	&& (ok==1) ) {
         alert("Les séparateurs doivent être des "+separateur); ok=0;
      }

      if (ok==1) {
         var d2=new Date(a,m-1,j);
         j2=d2.getDate();
         m2=d2.getMonth()+1;
         a2=d2.getYear();
         if (a2<=100) {a2=1900+a2}
         if ( (j!=j2)||(m!=m2)||(a!=a2) ) {
            alert("La date "+d+" n'existe pas !");
            ok=0;
         }
      }
      return ok;
}

Comment passer automatiquement au champs suivant lorsque la taille maximale du champs en cours est atteinte ?

[haut]

auteur : SpaceFrog

Voici un exemple :

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>AutoTab Page</title>
<script language="JavaScript" type="text/JavaScript">
function Autotab(box, longueur, texte)
{
    if (texte.length > longueur-1) {
        document.getElementById('TB'+box).focus();
    }
}
</script>
</head>
<body>
<input type="text" size="5" maxlength="5" length="20" name="TB1"
	tabindex="1" onkeyup="Autotab(2, this.size, this.value)"/>
<input type="text" size="2" maxlength="2" name="TB2" tabindex="3"
	onkeyup="Autotab(3, this.size, this.value); "/>
<input type="text" maxlength="5" name="TB3" tabindex="2" />
</body>

</html>

Comment lier deux listes déroulantes entre elles ?

[haut]

auteur : Jérôme

Voici un petit exemple bien utile :

<html>
<head>
<script language="javascript">
var pays = new Array; //nouveau tableau
pays[0] = new Array("p0", "pays0"); //nouveau tableau, on va donc avoir pays[0][0]="p0"
pays[1] = new Array("p1", "pays1");
pays[2] = new Array("p2", "pays2");

var ville=new Array;
// pays0
ville["p0"] = new Array;
ville["p0"][0] = new Array("p0v0", "pays0-ville0");
ville["p0"][1] = new Array("p0v1", "pays0-ville1");

//pays1
ville["p1"]=new Array;
ville["p1"][0] = new Array("p1v0", "pays1-ville0");
ville["p1"][1] = new Array("p1v1", "pays1-ville1");

//pays2
ville["p2"] = new Array;
ville["p2"][0] = new Array("p2v0", "pays2-ville0");
ville["p2"][1] = new Array("p2v1", "pays2-ville1");


var rue = new Array;
//pays0-ville0
rue["p0v0"] = new Array;
rue["p0v0"][0] = new Array("p0v0r0", "pays0-ville0-rue0");
rue["p0v0"][1] = new Array("p0v0r1", "pays0-ville0-rue1");

//pays0-ville1
rue["p0v1"] = new Array;
rue["p0v1"][0] = new Array("p0v1r0", "pays0-ville1-rue0");
rue["p0v1"][1] = new Array("p0v1r1", "pays0-ville1-rue1");
rue["p0v1"][2] = new Array("p0v1r2", "pays0-ville1-rue2");


//pays1-ville0
rue["p1v0"] = new Array;
rue["p1v0"][0] = new Array("p1v0r0", "pays1-ville0-rue0");
rue["p1v0"][1] = new Array("p1v0r1", "pays1-ville0-rue1");

//pays1-ville1
rue["p1v1"] = new Array;
rue["p1v1"][0] = new Array("p1v1r0", "pays1-ville1-rue0");
rue["p1v1"][1] = new Array("p1v1r1", "pays1-ville1-rue1");


//pays2-ville0
rue["p2v0"] = new Array;
rue["p2v0"][0] = new Array("p2v0r0", "pays2-ville0-rue0");
rue["p2v0"][1] = new Array("p2v0r1", "pays2-ville0-rue1");

//pays1-ville1
rue["p2v1"] = new Array;
rue["p2v1"][0] = new Array("p2v1r0", "pays2-ville1-rue0");
rue["p2v1"][1] = new Array("p2v1r1", "pays2-ville1-rue1");
rue["p2v1"][2] = new Array("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='javascript: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='javascript: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>

Comment ajouter des options dans une liste déroulante à partir d'une autre ?

[haut]

auteur : simone.51

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

function ajout(listeDep){
    var existe = 0;
    if(listeDep.options[listeDep.selectedIndex].value == 0){
    }
    else{
        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éléctionné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éléctionnée !!!
				</option>
            </select>
        </td>
    </tr>
</table>

Comment désactiver une zone de texte en cochant une checkBox ?

[haut]

auteur : simone.51

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 de la textBox et de la checkbox :

<input type="checkbox" id="cb" onclick="javascript:changement()">
<input type="text" id='coucou'>

Comment remplacer un caractère par un autre lorsque l'utilisateur renseigne un champ texte ?

[haut]

auteur : simone.51

Par exemple, si l'on veut remplacer toutes les virgules par un point.
Voici le code de la fonction :

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

Et voici le code du champ texte :

<input type="text" id="champ" onKeyUp="virgule(this.value);">

Comment enlever la propriété readonly d'un objet ?

[haut]

auteur : simone.51

document.getElementById('nom_Champ').readOnly=false;

Comment n'autoriser que la saisie de chiffres dans un champ texte?

[haut]

auteurs : neo.51, denisC

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

lien : Exemple d'utilisation de ce script

Comment faire passer un div au dessus d'un select dans IE?

[haut]

auteur : siddh

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

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

function putFrame(){
	var f    = document.createElement("iframe");
	var d    = document.getElementById("theDiv");

	with(f.style){
		position	= "absolute";
	 	width    	= d.offsetWidth+"px";
	  	height		= d.offsetHeight+"px";;
	 	top			= d.offsetTop+"px";
	  	left		= d.offsetLeft+"px";
	   	zIndex		= "1";
	}

	document.body.appendChild(f);
}

lien : Exemple d'utilisation de ce script

Consultez les autres F.A.Q's

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