Trucsweb.com

Trucsweb 1997-2017 - 20 ans de partage.

Javascript

Manipulation de formulaires en Javascript

RDFFav

Manipulation de formulaires en Javascript - Partie 1 : Introduction, l’objet Form

Dans cette série de tutoriels, nous verrons comment manipuler l’objet form pour accéder aux formulaires d’une page Web. Comment utiliser les méthodes et capturer les événements pour lire et modifier les propriétés des éléments. Nous verrons en détail chaque champ de saisie avec des exemples en contexte de formulaires dynamiques, de validations...validation formulaire form forms elements élément éléments length this this.form manipuler onChange onSubmit submit reset soumettre boucle

  • · Niveau : INTERMÉDIAIRE
  • · Compatibilité : Netscape 4+ IE 4+

Dans cette série de tutoriels, nous verrons comment manipuler l’objet "form" pour accéder aux formulaires d’une page Web. Comment utiliser les méthodes et capturer les événements pour lire et modifier les propriétés des éléments. Nous verrons en détail chaque champ de saisie avec des exemples en contexte de formulaires dynamiques, de validations spécifiques et le code complet de la dernière version de la fonction universelle twValide 2.0.

 

L’architecture
L’objet "form" est un des principaux objets d’un document qui contient tous les formulaires d’une page Web. La structure est composée de plusieurs tableaux ou "array" qui vont des formulaires aux options en passant par les éléments. Noter que l’index commence à 0. Les éléments d’un formulaire sont les champs de saisie comme un champ texte ou encore les boutons de sélection et boîte à cocher communément appelés "radio button" et "checkbox". Les options, dernier tableau au bout de cette structure, sont une propriété spécifique de l’élément "liste de sélection". Pour bien représenter cette structure, j’ai fait l’organigramme suivant qui montre trois formulaires dans un même document. En suivant le deuxième formulaire (index 1), on voit trois éléments dont le deuxième (index 1) est une "liste de sélection" avec trois options.

Structure de l’objet From

Voici donc comment accéder à chaque niveau de cette structure:

document.form[1].élément[1].option[1].propriété

 

Accès par la propriété "name"
Bien que vous ayez un accès direct via l’index de chaque formulaire ou éléments vous pouvez aussi, et c’est généralement le cas, utiliser l’attribut "name". Pour utiliser cette technique, vous devez spécifier la propriété "name" lors de la déclaration du formulaire et des éléments, <form name="monForm"...> pour un formulaire ou <input name="monElement"...>. Une fois votre formulaire bien identifié, vous n’avez pas à localiser sa position dans le tableau mais simplement à donner son nom.

document.monForm.monElement.propriété

 

Passer un formulaire et ses éléments à une fonction
Quand un formulaire ou un élément du formulaire contient une capture d’événement qui appelle une fonction, un paramètre réservé permet de passer l’objet qui fait la capture ou l’atribut "event handler". De cette manière, vos codes seront plus clairs et surtout portables. Ce mot réservé est this.

Voici plusieurs exemples.

<form name="monForm" onSubmit="fonction(this)">

Envoie le formulaire au complet, éléments, propriétés, valeurs... à la fonction. Noter qu’il n’est pas nécessaire de spécifier "form" ici car l’objet qui l’utilise est lui même le formulaire.

<input type="button" value="test" onClick="fonction(this.form)">

Envoie aussi le formulaire au complet à la fonction mais cette foi il faut préciser "form" pour indiquer au javascript d’envoyer non seulement le bouton mais le formulaire au complet.

<input name="prenom" type="text" onChange="fonction(this)">

Envoie seulement l’élément "prenom" à la fonction.

Cette dernière équivaut à faire:

<input name="prenom" type="text" onChange="fonction(document.monForm.prenom)">

De telle sorte que vous pouvez envoyer une propriété spécifique de l’élément

<input name="prenom" type="text" onChange="fonction(this.value)">

Récupéré dans une fonction, le paramètre représente en tout point un formulaire, un élément ou une propriété. C’est-à-dire que la variable qui récupère le paramètre se transformera en tableau s’il s’agit d’un formulaire, en chaîne de caractère s’il s’agit d’une valeur etc.

Exemple: Passer le formulaire par le formulaire

<script type="text/javascript" language="javascript">
<!--
function affiche_prenom(nForm) {
  alert(nForm.prenom.value);
}
-->
</script>
<form name="monForm" onSubmit="affiche_prenom(this)">
<input name="prenom" type="text">
<input type="button" name="affiche" value="Afficher">
</form>

Exemple: Passer le formulaire par un élément

<script type="text/javascript" language="javascript">
<!--
function affiche_prenom(nForm) {
  alert(nForm.prenom.value);
}
-->
</script>
<form name="monForm">
<input name="prenom" type="text">
<input type="button" name="affiche" value="Afficher" onClick="affiche_prenom(this.form)">
</form>

Exemple: Passer un élément par un élément

<script type="text/javascript" language="javascript">
<!--
function affiche_prenom(nElement) {
  alert(nElement.value);
}
-->
</script>
<form name="monForm">
<input name="prenom" type="text" onChange="affiche_prenom(this)">
</form>

Exemple: Passer la propriété d’un élément par un élément

<script type="text/javascript" language="javascript">
<!--
function affiche_prenom(nValeur) {
  alert(nValeur);
}
-->
</script>
<form name="monForm">
<input name="prenom" type="text" onChange="affiche_prenom(this.value)">
</form>

 

Le tableau ou "array" "form" et des éléments.
Puisque les formulaires et les éléments sont dans des tableaux, il est possible d’afficher tous les éléments formulaire d’un document sans même les connaître. Il suffit de savoir que la propriété "length" de l’objet from retourne le nombre de formulaires dans le document et que la propriété "length" de l’objet éléments du formulaire retourne le nombre d’éléments d’un formulaire. Avec cette valeur, vous pouvez faire une simple boucle qui affiche la propriété name de chaque formulaire et de chaque élément.

<script type="text/javascript" language="javascript">
<!--
Affiche_forms()

function Affiche_forms() {
  // Fonction qui affiche le nom de tous les formulaires
  // et de tous les les éléments d’un document HTML
  // Boucle tous les formulaire
  for (var i = 0; i < document.forms.length; i++) {

    // Affiche le nom ou la propriété name du formulaire i
    document.write(document.forms[i].name+"<br />");

    // Boucle tous les éléments du formulaire i
    for (var l = 0; l < document.forms[i].elements.length; l++) {

      // Affiche le nom ou la propriété name de l’élément l
      document.write("- "+document.forms[i].elements[l].name+"<br />");
    }
  }
}
// -->
</script>

Noter que l’objet "forms" prend un "s" ainsi que l’objet "elements".

Django (Oznog) Blais
Dernière mise à jour :

Commentaires

  • Merci de nous apprendre des choses pareilles sur le web. beaucoup de courage, merci
    64x64
    zki

    Date (GMT) : 2016-03-10 14:10:21 (UTC +0000)
    • Salut, Merci, c'est un plaisir. Mais il n'y a rien d'exceptionnel! Je n'ai tout simplement pas de mémoire alors j’emmagasine ce savoir dans des pages Web ; -)
      64x64
      oznog
      http://www.trucsweb.com
      Date (GMT) : 2016-03-10 15:1:44 (UTC +0000)


    • salut! svp, aidez-moi! je realise un programme, j'ai une table qui contient des donnees et je veux la modifier, comment? j'aimerais afficher les id dans une liste deroulante, et a chaque id choisi doit remonter les donnees qui y sont correspondent. je ne sais pas comment proceder. merci de votre aide
      64x64
      Appolon Venet

      Date (GMT) : 2016-05-18 18:7:11 (UTC +0000)
      • Salut, Bien le bonjour à Port-au-Prince! C'est davantage une demande de devis qu'une question. Il faudrait y aller une question à la fois. D'ailleurs le forum serait un meilleur endroit. 1. C'est quoi? Il y a un but à cette histoire, question de bien comprendre le besoin. 2. Une table, c'est à dire un tableau HTML, une table avec tabulation, une matrice (array), un JSON, une table de la base de données? 3. Modifier? Pour enregistrer les informations ou seulement à la volée? Quoi faire avec ces données... 4. J'imagine qu'il y a un ID par ligne de tableau? Donc modifier sous-entend seulement déplacer les lignes du tableau en plus de modifier les données? Ou c'est monter dans le sens d'addition (incrémentation) ? Donc la raison, plus de précision et surtout choisir un forum conséquent qui aura plus de chance de vous fournir une réponse. Un texte d'introduction au JavaScript risque d'avoir surtout des amateurs qui ne pourront pas vous aider. Merci et bonne journée.
        64x64
        oznog
        http://www.trucsweb.com
        Date (GMT) : 2016-07-04 12:22:0 (UTC +0000)


      • bonjour, j'ai un petit problème avec une fonction javascript qui est un langage nouveau pour moi. je vous explique: j'ai une fonction javascript function ajouterResultat(liste, libelle, code, type, row) { liste[liste.length] = {'lib':libelle, 'code':code, 'type':type, 'row':row}; } ecrite dans un fichier .js que j'appelle à partir de ma page .asp cette fonction je lui envoie des paramètres à partir de la même page comme ce ci: <script language="javascript"> ajouteCase(casesACocher, document.getElementById("tag<%=rsListeP("tag_id")%>"), new Array("pro")); ajouterResultat(listePro, "<%=rsListeP("prc_valtexte")%>", "<%=codePro%>", "<%=typePro%>", document.getElementById("trpro<%=idPro%>")); </script> ce que je veux c'est pouvoir lire liste[liste.length] à partir de ma page asp pour mettre les valeurs dans un tableau de i merci de me dire comment recuperer les valeurs de cette liste à partir de mon code asp
        64x64
        mery

        Date (GMT) : 2016-09-11 12:45:16 (UTC +0000)
        • Salut, Wow, quel beau pays que le Maroc! Je serais plus à l'aise avec le code complet, et surtout ce fameux « i » dont on ne trouve null trace. Mais déjà si tu enlève les guillemets : liste[liste.length] = {lib:libelle, code:code, type:type, row:row}; Si le reste du code que je ne voie pas est bon, il suffit de cibler le bon objet de l'index de la matrice (array). Par exemple s'il y a au moins 5 enregistrement : liste[0].lib liste[0].code liste[0].type liste[0].row liste[1].lib; liste[1].code; liste[1].type; liste[1].row; .... liste[liste.length].lib; liste[liste.length].code; liste[liste.length].type; liste[liste.length].row; Ciao
          64x64
          oznog
          http://www.trucsweb.com
          Date (GMT) : 2016-09-11 15:49:45 (UTC +0000)


        • Merci beaucoup pour ce tutoriel.
          64x64
          Isso

          Date (GMT) : 2016-12-23 17:5:0 (UTC +0000)

          • Merci beaucoup pour ce tuto, mais je n'arrive pas à une seule chose : comment fait-on pour prendre la valeur du formulaire et la mettre dans une zone de texte en disabled ? Quel est le chemin à faire ? Merci
            64x64
            Brians Lucas

            Date (GMT) : 2019-03-06 14:45:57 (UTC +0000)
            Date local : Wed Mar 06 2019 15:54:32 GMT+0100 (heure normale d
            • Salut, Hum, il n'y a aucune différence entre un champ normal et un champ « disabled ». Tous les exemples fonctions avec un champ « disabled »... <form> <input type="text" value="Ma valeur" id="oMaValeur" name="oMaValeur" onBlur="this.form.oDisabled.value=this.value" /> <input type="text" value="" id="oDisabled" name="oDisabled" disabled="disabled" /> </form> Prend la valeur du champ (this.value) et la place dans le champ this.form.oDisabled.value. // Tu peux utiliser le DOM : document.getElementById("oDisabled").value = document.getElementById("oMaValeur").value; // Ou avec jQuery $("#oDisabled").val($("#oMaValeur").val());
              64x64
              oznog
              http://www.trucsweb.com
              Date (GMT) : 2019-03-06 15:56:42 (UTC +0000)
              Date local : Wed Mar 06 2019 11:05:13 GMT-0500 (heure normale d


            • Bonjour, ci-joint une petite page php. Mon problème: quand je déclenche, depuis le lien le submit via la fonction javascript Monsubmit() , le tableau $_POST n'est pas chargé. Si j'appuie sur le bouton <input type="submit", le $_POST est bien chargé. Peux ton forcer la propriété type = submit depuis la fonction javascript Monsubmit ? (en espérant récupérer le $_POST). En attendant j'ai créé un bouton transparent imitant un lien et ça marche. Merci de votre aide <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > <meta http-equiv="Content-Style-Type" content="text/css" > <meta http-equiv="Content-Language" content="fr" > <link rel="stylesheet" type="text/css" href="./css/index.css" media="screen" > <title>Montage</title> </head> <body> <style> .button-link { color: #00f; background-color: transparent; cursor: pointer; text-decoration: underline; border-color: transparent; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .button-link:hover { text-decoration: none; color: #f00; background-color: transparent; } </style> <script type="text/javascript"> function Monsubmit() { /* document.forms[0].method = "POST"; document.forms[0].action = "montage.php"; */ document.getElementById("soumission").type.value = "submit"; alert("passage "); document.forms[0].submit(); } </script> <script type="text/javascript"> var mydoc = document.getElementById("soumission").value; for (var prop in mydoc) { mydoc.write(prop," = ",mydoc[prop],"<br/>"); } </script> <?php if (isset($_POST['soumission'])) { print_r($_POST); } ?> <form name="montage.php" method="POST" action="montage.php" > <div> <input type="text" id="ch1" name="ch1" /> <input type="text" id="ch2" name="ch2" /> </div> <br/> <input type="submit" name="soumission" value="Mon lien" class="button-link"> <!-- <a href="montage.php" onClick="Monsubmit();" >Lien</a> --> <div> <input type="submit" id="soumission" name="soumission" value="Envoi" onClick="Monsubmit();"> </div> </form> </body> </html>
              64x64
              Rozé
              https://christian-roze.fr/blog
              Date (GMT) : 2019-03-20 20:37:03 (UTC +0000)
              Date local : Wed Mar 20 2019 21:45:33 GMT+0100 (CET)
              • Salut, Il y a quelque chose qui m'échappe dans ton script. Je pense que tu mélanges le JavaScript avec le langage PHP qui est un langage serveur ou bien je ne comprends pas ce que tu veux faire. Avec une explication du besoin ce serait plus facile de t'aider. 1. Le PHP n'a pas accès au DOM de la page HTML et le JavaScript n'a pas accès au PHP du serveur. Le formulaire doit être soumis et envoyé au serveur pour que le PHP puisse s’exécuter. Le PHP peut pré-remplir le formulaire de valeur en construisant la page et avant de l'envoyer au navigateur, c'est-à-dire sans interaction avec l'usager et sans JavaScript client. Et le PHP peut ensuite récupérer les valeurs et seulement les valeurs du formulaire une fois soumis, toujours sans interaction avec l'usager ni JavaScript client. 2. À la limite, tu n'as même pas besoin de bouton pour soumettre le formulaire, la méthode JavaScript submit() suffit. Mais ton JavaScript ne fait rien de plus que ce que le formulaire donne déjà : méthode, action et submit (avec le bouton). Conseil : donne un id à ton formulaire, c'est plus facile et plus fiable que le document.forms[0] (par exemple id="monForm") et attention, un ID doit être unique dans une page Web... : <form id="monForm"... <script> document.getElementById("monForm").method = "POST"; document.getElementById("monForm").action = "montage.php"; document.getElementById("monForm").submit(); </script> Exactement la même chose que le bouton : <form id="monForm" name="monForm" method="POST" action="montage.php" > ... <input type="submit" id="soumission" name="soumission" value="Envoi"> </form> 3. Tu demandes de récupère l'objet avec le ID « soumission » qui n'existe pas encore !! var mydoc = document.getElementById("soumission").value; Quand cette ligne est exécutée, il n'y a aucun objet « soumission », il est déclaré plus bas ! Le DOM doit être entièrement construit pour pouvoir y accéder efficacement en JavaScript. Le JavaScript devrait être sous le formulaire, ou le mettre dans une fonction appelée après le formulaire, ou ajouter la capture de l'événement « onload » par exemple. 4. Maintenant pourquoi du JavaScript ? Le JavaScript permet de manipuler la page, le formulaire, les valeurs entrées par l'usager. Et je ne trouve rien dans ton code à cet effet. Qu'elle genre de manipulation désires-tu faire sur le formulaire une fois la page chargée et avant, pendant ou après que l'usager entre des valeurs ?
                64x64
                oznog
                http://www.trucsweb.com
                Date (GMT) : 2019-03-21 12:51:24 (UTC +0000)
                Date local : Thu Mar 21 2019 08:59:52 GMT-0400 (heure d’été de


              Ajouter un commentaire
              Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
              Votre évaluation du tutoriel

                     Visites : 20633 - Pages vues : 82133
              X

              Trucsweb.com Connexion

              Connexion

              X

              Trucsweb.com Mot de passe perdu

              Connexion

              X

              Trucsweb.com Conditions générales

              Conditions

              Responsabilité

              La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

              Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

              Droit applicable et juridiction compétente

              Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

              X

              Trucsweb.com Trucsweb

              X

              Trucsweb.com Glossaire

              X

              Trucsweb.com Trucsweb

              X

              Trucsweb.com Trucsweb

              Conditions

              Aucun message!

              Merci.

              X
              Aucun message!
              X

              Trucsweb.com Créer un compte

              Créer un compte

              .
              @