logo
Sommaire > Formulaires 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 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 IE ?


Comment soumettre un formulaire automatiquement ?
auteur : simone.51

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

Comment soumettre un formulaire en utilisant un lien ?
auteur : Jérôme
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 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>
warning Attention, lorsqu'un formulaire est soumis par sa méthode JavaScript submit, le gestionnaire d'événement du formulaire onsubmit n'est pas déclenché !

Comment faire pour avoir deux boutons submit dans le même formulaire ?
auteur : Jérôme
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 : 
<script language="javascript">
// 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();
}
</script>

Comment vérifier que l'utilisateur a renseigné un champ d'un formulaire ?
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 ?
auteurs : SpaceFrog, denisC

var inputList = document.forms['monFormulaire'].elements;
var 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 ?
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.getFullYear();
         if ( (j!=j2)||(m!=m2)||(a!=a2) ) {
            alert("La date "+d+" n'existe pas !");
            ok=0;
         }
      }
      return ok;
}

Comment passer automatiquement au champ suivant lorsque la taille maximale du champ en cours est atteinte ?
auteur : SpaceFrog
Voici un exemple : 
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>AutoTab Page</title>
<script 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" id="TB1"
tabindex="1" onkeyup="Autotab(2, this.size, this.value)" />
<input type="text" size="2" maxlength="2" name="TB2" id="TB2" tabindex="3"
onkeyup="Autotab(3, this.size, this.value);" />
<input type="text" maxlength="5" name="TB3" id="TB3" tabindex="2" />
</body>

</html>

Comment lier deux listes déroulantes entre elles ?
auteur : Jérôme
Voici un petit exemple bien utile :


<html>
<head>
<script type="text/javascript" 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='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>

Comment ajouter des options dans une liste déroulante à partir d'une autre ?
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){
        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>

Comment désactiver une zone de texte en cochant une checkbox ?
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 du champ texte et de la checkbox : 

<input type="checkbox" id="cb" onclick="changement()" />
<input type="text" id="coucou" />

Comment remplacer un caractère par un autre lorsque l'utilisateur renseigne un champ texte ?
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 ?
auteur : simone.51
document.getElementById('nom_Champ').readOnly=false;

Comment n'autoriser que la saisie de chiffres dans un champ texte ?
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 ?
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

Valid XHTML 1.0 TransitionalValid CSS!
Publicité

Best Of

Actualités les plus lues

Semaine
Mois
Année
  1. Le PDG de Sun démissionne, "Crise financière / Clientèle en chute libre / Plus de PDG", écrit-il sur son Twitter Commentaires 342
  2. Firefox 3.6 dans les starting-blocks, le navigateur arrive dans une version définitive beaucoup plus rapide Commentaires 73
  3. Il y aura un Firefox 3.6.5 mais peut-être pas de 3.7, explique Mozilla ; la nouvelle est tout sauf anodine Commentaires 73
  4. Internet Explorer patché aujourd'hui, les téléchargements de Firefox et d'Opera s'envolent Commentaires 116
  5. Quelle police de caractères préférez-vous pour développer ? Est-elle dans notre Top 10 ? Commentaires 75
  6. Exclusif : "Google a raison, il est plus facile de développer une extension pour Chrome", suite de l'entretien avec Mozilla (partie 3) Commentaires 78
  7. Programmation GWT 2 - Développer des applications RIA et Ajax avec GWT, de Sami Jaber, critique par benwit Commentaires 8
  8. CoffeeScript propose une nouvelle syntaxe pour JavaScript, l'actuelle viendrait de Java et ne serait plus adaptée au langage Commentaires 7
  9. Sortie de jQuery 1.4 et lancement des 14 jours de jQuery Commentaires 10
  10. Tutoriel JavaScript : Créer une fonctionnalité drag and drop, par Peter-Paul Koch Commentaires 0
    11. Page suivante
  1. Le PDG de Sun démissionne, "Crise financière / Clientèle en chute libre / Plus de PDG", écrit-il sur son Twitter Commentaires 339
  2. Le pire bout de code que vous ayez vu : Qui l'a fait ? Pourquoi ? Pourquoi était-il si horrible ? Commentaires 311
  3. Navigateurs : Mozilla lance Firefox 3.5.3 qui corrige différents problèmes de sécurité et de stabilité du logiciel Commentaires 83
  4. Navigateurs : Mozilla Firefox 3.5 apprécié des Français, déjà 307.000 téléchargements en 48H Commentaires 83
  5. Navigateurs : Mozilla lance Firefox 3.5.2 Commentaires 83
  6. EDI : NetBeans 6.8 disponible en version finale. Que pensez-vous de cette version ? Commentaires 75
  7. Firefox 3.6b2 est disponible, elle corrige 190 bugs de la bêta 1 mais la question de sa vitesse demeure Commentaires 73
  8. Firefox 3.6 dans les starting-blocks, le navigateur arrive dans une version définitive beaucoup plus rapide Commentaires 73
  9. Navigateurs : Firefox 3.6 est disponible en Beta 4 près de 140 bugs sont corrigés. Commentaires 73
  10. La bêta 3 de Firefox 3.6 est disponible. 80 bugs corrigés et 2 nouveautés au programme de cette mise à jour Commentaires 73
    11. Page suivante

Les meilleures ressources

Communauté

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 oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2004 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'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.

Vos questions techniques : forum d'entraide JavaScript - Publiez vos articles, tutoriels et cours
et rejoignez-nous dans l'équipe de rédaction du club d'entraide des développeurs francophones
Nous contacter - Hébergement - Participez - Copyright © 2000-2010 www.developpez.com - Legal informations.