Comment faire un formulaire 2/2

Étape 3 - Création du message (javascript)

On a maintenant un formulaire qui contient des champs visible pour que l'utilisateur puisse le remplir et des champs invisibles qui aident le formulaire à poster comme il faut le message.

Sauf qu'on a même pas encore de message à poster!

Bref, c'est le temps de se retrousser les manches è_é

Étape 3.1 - Ajout de la fonction

On va commencer par retrouver ce bout de code :

Code:

    <form id="nomId" action="/posting.forum" method="post" name="NomForm" enctype="multipart/form-data" target="_blank">

Et on va y ajouter cet attribut :

Code:

onSubmit="creationMessage(this)"

Le "onSubmit" indique que l'action va se dérouler juste quand on va cliquer sur le bouton "Envoyer" en bas (celui avec le "type" "submit"). Quant au "creactionMessage(this)", il s'agit du nom que j'ai donné à une fonction du javascript qui va nous permettre de créer le message.

Ça va jusqu'ici? Continuons!

---

On va retrouver, dans notre page HTML, l'endroit où on avait mis l'espace pour le javascript. Cela ressemble à ceci :

Code:

    <script type="text/javascript">
    //<!--
      /* Ici le Javascript */
    //-->
    </script>

Puis on va créer la fonction "creationMessage(this)" :

Code:

  <script type="text/javascript">
    //<!--
      /*Fonction pour créer le message*/
      function creationMessage(NomForm) {
      }
    //-->
    </script>

Étape 3.2 - Ajout des champs "titre" et "message" dans la fonction

Ensuite, on va vouloir aller remplir nos champs invisibles "message" et "titre" qui sont supposés contenir le message à poster et le titre du sujet.
Pour cela, on va utiliser ceci :

Code:

/* On met le titre dans le champ "titre" */
NomForm.titre.value = "rien";

/* On met le message dans le champ "message" */
NomForm.message.value = "rien";

Si je décortique, une partie (le coin du message), on arrive à cela :

NomForm : C'est le "name" du formulaire, cela permet de le sélectionner.

.message : C'est le "name" du champ invisible pour le message. Cela permet de sélectionner ce champ en particulier. Dans le futur, à chaque fois qu'on voudra sélectionner un champ, on ira toujours voir son "name".

.value : Cela indique la valeur du champ du message.

= : Cela veut dire que ce qui est à droite du "=" va devenir ce qui est à gauche du "=". Autrement dit, la valeur du champ du message va devenir rien.

"rien" : C'est ce qui va aller remplacer la valeur du message. Le rien est ce qui va devenir la valeur du message. Quant aux " ", c'est pour indiquer que le "rien" n'est pas une variable ou une valeur qui existe déjà. C'est du texte qu'on vient d'écrire.

; : Indique la fin, tout simplement.

Étape 3.3 - Récupération des données des champs "text", "textarea", "number", "select" et "password"

Oui et non. Je viens de vous montrer comment sélectionner la valeur d'un champ. Ce sera très semblable pour récupérer les données du formulaire, à quelques exeptions près.

Petit exemple :

Code:

    <script type="text/javascript">
    //<!--
      /*Fonction pour créer le message*/
      function creationMessage(NomForm) {

        /* On met le titre dans le champ "titre" */
        NomForm.titre.value =
          "Commande de " + NomForm.nom.value;

        /* On met le message dans le champ "message" */
        NomForm.message.value =
          "Bonjour, je m'appelle " + NomForm.nom.value + ".";
      }
    //-->
    </script>

Bon, je vais vous éviter de jouer à "Trouvez la différence". De toute façon, c'est assez frappant, non? Ce que j'ai changé, c'est le "rien" qui devenait le titre du message et le message lui-même.

Si on regarde le message, j'ai commencé par mettre un texte "Bonjour, je m'apelle ". Ensuite, j'ai mis un +.

Le + sert à mettre un élément après l'autre. Sinon, ce qui serait après le + ne serait pas pris en compte et cela ferait un bug.

Le NomForm.nom.value est la valeur du champ qui a le name "nom". J'ai encore mis un + après parce que je voulais rajouter quelque chose à ma phrase.

Le . est un simple point que je rajoute à la fin de ma phrase.

Le ; indique la fin ce qui va devenir mon message.


On fonctionne de la même façon pour construire tout notre message. Cela nous permet de récupérer la valeur de "presque" tous les champs.

Étape 3.4 - Récupération des données des champs "radio" et "checkbox"

Oh, et j'ai aussi dit ça si je me souviens bien :

Le "value" permet d'ajouter une valeur de base au champ. De base, il y a souvent rien du tout. Si on aurait mis "Machin", il y aurait déjà eu "Machin" d'écrit dans le champ dès le début. Par contre, il y a des situations où il faut toujours mettre une valeur, soit quand le type de champ est "checkbox" ou "radio". On verra les détails plus loin.

Le "value" permet de mettre une valeur de base à chaque champ. Si on ne veut pas en mettre, on a juste à ne pas en mettre.

La où il y a un hic, c'est que dans la majorité des champs, on écrit quelque chose. Ce quelque chose sera la "value" de ce champ et on ira le sélectionner plus tard dans le javascript.

Mais qu'est-ce qu'il en est des "checkbox" et des "radio"? Ce sont des cases à cocher, on ne peut rien y écrire! Si on va chercher la valeur, elle sera vide! Qu'est-ce qu'on fait?

On va tous leur donner une "value". Disons que j'ai une question "quel est votre fruit préféré" et que j'ai deux choix de réponses, "les fraises" et "les bananes". Je donnerais la value "les fraises" à mon premier choix de réponse et "les bananes" à mon deuxième choix de réponse.

Comme ça, quand vous arriverez au moment de récupérer les données du formulaire, vous pourrez aller chercher les valeur des champs qui sont cochés et ça va vous dire "les fraises" ou "les bananes" à la place de quelque chose comme "coché".

Quant à regarder quelle case est cochée, la façon est un peu différente pour radio et checkbox.

---

Manière pour "radio"

Voici ce qu'on va faire pour regarder quel champ est coché :

Code:

for (i = 0; i < NomForm.paie.length; i++) {
  if (NomForm.paie[i].checked) {
    var varpaie = NomForm.paie[i].value;
  }
}

Sans entrer dans les détails, le javascript va voir tous les champs qui ont le "name" paie et donne la valeur de celui qui était coché à la variable "varpaie". Ici, vous changez le "paie" par le "name" de la question où il y a des champs "radio".


Ensuite, vous vous servez de la variable pour le mettre dans votre message :

Code:

    <script type="text/javascript">
    //<!--
      /*Fonction pour créer le message*/
      function creationMessage(NomForm) {

        /* On va vérifier quel case est cochée pour la question "paie" */
        for (i = 0; i < NomForm.paie.length; i++) {
          if (NomForm.paie[i].checked) {
            var varpaie = NomForm.paie[i].value;
          }
        }

        /* On met le titre dans le champ "titre" */
        NomForm.titre.value =
          "Commande de " + NomForm.nom.value;

        /* On met le message dans le champ "message" */
        NomForm.message.value =
          "Bonjour, je m'appelle " + varpaie + ".";
      }
    //-->
    </script>

---

Manière pour "checkbox"

Voici ce qu'on va faire pour regarder quels champs sont cochés :

Code:

var totalcoupon = 0;
for (var i = 0; i < NomForm.coupon.length; i++) {
  if (NomForm.coupon[i].checked) {
    if (totalcoupon < 1) {
      var varcoupon = form.coupon[i].value;
      totalcoupon = 1;
    }
    else {
      varcoupon = varcoupon + ", " + form.coupon[i].value;
    }
  }
}

Sans entrer dans les détails, le javascript va voir tous les champs qui ont le "name" coupon et donne la valeur de celui qui était coché à la variable "varcoupon". Ici, vous changez le "coupon" par le "name" de la question où il y a des champs "checkbox". Le premier champ coché est mis tel quel dans la variable et les autres champs cochés sont séparés par des virgules.


Ensuite, vous vous servez de la variable pour le mettre dans votre message :

Code:

    <script type="text/javascript">
    //<!--
      /*Fonction pour créer le message*/
      function creationMessage(NomForm) {

        /* On va vérifier quelles cases sont cochées pour la question "coupon" */
        var totalcoupon = 0;
        for (var i = 0; i < NomForm.coupon.length; i++) {
          if (NomForm.coupon[i].checked) {
            if (totalcoupon < 1) {
              var varcoupon = form.coupon[i].value;
              totalcoupon = 1;
            }
            else {
              varcoupon = varcoupon + ", " + form.coupon[i].value;
            }
          }
        }

        /* On met le titre dans le champ "titre" */
        NomForm.titre.value =
          "Commande de " + NomForm.nom.value;

        /* On met le message dans le champ "message" */
        NomForm.message.value =
          "Bonjour, je m'appelle " + varcoupon + ".";
      }
    //-->
    </script>

Note : Si ce n'est pas déjà fait, enregistrez votre page html avant de la perdre !

Étape 4 - Autoriser les formulaires externes

Il y a une vérification par Forumactif qui a pour but d'éviter le spam et qui bloque les messages créés dans des formulaires qui ne sont pas ceux de base de Forumactif. Du coup, si vous ne suivez pas cette étape, le formulaire rempli vous retournera sur une page qui dira "erreur technique #230" à laplace d'envoyer directement le message.

Pour éviter cela, vous devez vous rendre sur :
> Panneau d'administration
> > Général
> > > Forum
> > > > Sécurité

Et vous devez cocher "Non" à la question "Interdire les formulaires non officiels à poster des messages et messages privés sur le forum". Vous enregistrez et c'est fait !

L'erreur #230 ne devrait maintenant plus vous causer problème ~

Étape 5 - Mettre des champs obligatoires (facultatif)

Retournez sur votre page HTML.

Vous remarquerez que dans l'exemple, il y a des petits astérisques rouges après certaines questions. Cela indique que ces questions sont obligatoires.

Sauf qu'on a beau mettre autant d'étoiles rouges qu'on veut, si on ne va pas dire à notre javascript qu'on a des champs obligatoire, cela ne changera rien. Du coup, on va aller le lui dire.

Étape 5.1 - Mettre des champs obligatoire (partie html)

Tout d'abord, vous oubliez le javascript. On va le faire plus tard.

Pour le moment, on va aller à chacune de nos questions obligatoire (àl'exception de ceux qui ont des champs "radio" ou "checkbox") et dans le champ de ces questions, on va mettre une class qu'on va appeller "obligatoire".

Comme cela :

Code:

      <label for="nom">Nom<span class="redd">*</span> :</label><br />
      <input class="obligatoire" type="text" size="50" name="nom" id="nom" /><br />

Pour les champs "radio", on va fonctionner autrement. Ce qu'on va faire, c'est qu'on va déjà cocher une des case. Comme ça, c'est sûre qu'il y en a au moins une de cochée

Pour cela, on va leur ajouter un attribut "checked" :

Code:

      <label for="livraison">À faire livrer ou non?<span class="redd">*</span></label><br />
      <label for="livrer">Oui</label> <input type="radio" name="livraison" id="livrer" checked="checked" value="Oui" /><br />
      <label for="nonlivrer">Non</label> <input type="radio" name="livraison" id="nonlivrer" value="Non" /><br />

Enfin, les champs "checkbox"... ne devraient normalement pas être obligatoire. Après tout, si on peut cocher 1 option, 2 options ou toutes les options, c'est logique qu'on puisse en cocher aucune u_u

Étape 5.2 - Mettre des champs obligatoire (partie javascript)

Malgré le titre de l'étape, avant de se rendre dans le javascript, on va aller retrouver ceci :

Code:

<form id="monId" action="/posting.forum" method="post" name="NomForm" enctype="multipart/form-data" onSubmit="envoiMessage(this)">

Vous vous rappellez de cet attribut : onSubmit="envoiMessage(this)"

Cela voulait dire que quand on soumettait le formulaire, il allait faire la fonction dans le javascript pour créer le message et le titre à poster.

Maintenant, on va remplacer cet attribut par ceci : onSubmit="return envoiMessage(this)"

La différence? J'ai ajouté un "return " devant le nom de la fonction. Cela veut dire qu'avant d'envoyer le message pour qu'il soit posté, le formulaire va vouloir recevoir un "return", soit un "retour" sur le fait qu'il a le droit ou non d'envoyer le message.

Si la fonction lui retourne un "false", le message ne sera pas envoyé. Si la fonction lui retourne un "true", le message sera envoyé.

---

Allons voir cela dans le javascript maintenant !

Présentement, on a quelque chose qui ressemble à ceci :

Code:

    <script type="text/javascript">
    //<!--
      /*Fonction pour créer le message*/
      function creationMessage(NomForm) {

        /* On met le titre dans le champ "titre" */
        NomForm.titre.value =
          "Commande de " + NomForm.nom.value;

        /* On met le message dans le champ "message" */
        NomForm.message.value =
          "Bonjour, je m'appelle " + NomForm.nom.value + ".";
      }
    //-->
    </script>

Bien sûr, le votre devrait être plus rempli, etc...

On va commencer par créer une condition qui dit si le formulaire est bien rempli ou non :

Code:

        /*Variable qui contient tous les champs obligatoires*/
        var champsobligatoires = document.getElementsByClassName("obligatoire");

        /*On met le total des champs obligatoires*/
        var totalchampsobligatoires = 0;

        /*Pour chaque champ obligatoire, on va aller vérifier s'il est rempli.*/
        for (i = 0; i < champsobligatoires.length; i++) {
          var champvaleur = champsobligatoires[i].value;

          /*Pour chaque champ obligatoire, si il est rempli, on ajoute 1 à la variable du total*/
          if (champvaleur.length > 0) {
            totalchampsobligatoires = totalchampsobligatoires + 1;
          }
        }

        /*On regarde si le total des champs obligatoires remplis est plus petit que le nombre de champs obligatoire*/
        if (totalchampsobligatoires < champsobligatoires.length) {

          /*Si on a moins de champs obligatoires remplis que le nombre de champs obligatoires, on met une alerte et on retourne "false" pour que le formulaire ne soit pas envoyé*/
          alert("Tous les champs obligatoires (ceux avec un astérisque rouge) doivent être remplis.");
          return false;
        }

        /*Si on a autant de champs obligatoires remplis que le nombre de champs obligatoire, on retourne "true" pour que le formulaire soit envoyé*/
        else {
          return true;
        }

Et on va aller mettre cette condition à la fin de la fonction, après tout le reste :

Code:

    <script type="text/javascript">
    //<!--
      /*Fonction pour créer le message*/
      function creationMessage(NomForm) {

        /* On met le titre dans le champ "titre" */
        NomForm.titre.value =
          "Commande de " + NomForm.nom.value;

        /* On met le message dans le champ "message" */
        NomForm.message.value =
          "Bonjour, je m'appelle " + NomForm.nom.value + ".";

        /*Variable qui contient tous les champs obligatoires*/
        var champsobligatoires = document.getElementsByClassName("obligatoire");

        /*On met le total des champs obligatoires*/
        var totalchampsobligatoires = 0;

        /*Pour chaque champ obligatoire, on va aller vérifier s'il est rempli.*/
        for (i = 0; i < champsobligatoires.length; i++) {
          var champvaleur = champsobligatoires[i].value;

          /*Pour chaque champ obligatoire, si il est rempli, on ajoute 1 à la variable du total*/
          if (champvaleur.length > 0) {
            totalchampsobligatoires = totalchampsobligatoires + 1;
          }
        }

        /*On regarde si le total des champs obligatoires remplis est plus petit que le nombre de champs obligatoire*/
        if (totalchampsobligatoires < champsobligatoires.length) {

          /*Si on a moins de champs obligatoires remplis que le nombre de champs obligatoires, on met une alerte et on retourne "false" pour que le formulaire ne soit pas envoyé*/
          alert("Tous les champs obligatoires (ceux avec un astérisque rouge) doivent être remplis.");
          return false;
        }

        /*Si on a autant de champs obligatoires remplis que le nombre de champs obligatoire, on retourne "true" pour que le formulaire soit envoyé*/
        else {
          return true;
        }
      }
    //-->
    </script>

Et c'est tout pour cette partie \o/

Note : Si ce n'est pas déjà fait, enregistrez votre page html avant de la perdre !

Étape 6 - Mettre le formulaire dans une iframe (facultatif)

Maintenant que la page HTML est créée avec votre formulaire à l'intérieur, peut-être que vous allez vouloir insérer votre formulaire à quelque part sur votre forum. Pour cela, vous pouvez créer un iframe que vous mettrez dans un message.

Puis, nous allons mettre le code suivant dans le message/sujet où vous voulez mettre le formulaire :

Code:

<iframe style="display: block; margin: auto; width: 600px; height: 1000px;" src="LIEN DE LA PAGE HTML" frameborder="0"></iframe>

Comme vous pouvez le deviner, il faut mettre le lien de la page HTML là où c'est écrit. Mais peut-être que vous vous demandez d'où sort ce lien? Ce n'est pas trop compliqué ^^

Quand on va dans la gestion de nos pages HTML, la dernière qui a été enregistrée (donc normalement, votre formulaire), se trouve en haut de la liste. Il vous suffit de copier l'url de votre page HTML et de la mettre là où nous l'avons vu ci-haut. C'est vraiment écrit "URL DU LIEN", alors vous ne pouvez pas vous tromper

Sinon, vous devez aussi changer le width (largeur) et le height (hauteur) pour que cela corresponde à votre formulaire ^^

---

C'est tout! Si jamais vous avez des problèmes avec ce tutoriel, n'hésitez pas à passer dans "Problème avec mon code".

À plus !