BreezingForms : calcul de bouton radio et cases a cocher

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • #16
    C'est la sauvegarde complète avec la triple protection anti spam : Formulaire Adhesion.zip
    Fichiers joints
    Sur mon site www.sorgin-informatique.com : tutos sur Joomla! et ces composants et sur différents logiciels et services libres (Firefox, KeePass, uMap, Framadate, etc).

    Commentaire


    • #17
      Je vois ça cet après-midi et reviens vers toi rapidement.
      Cordialement.
      __
      Eddy !!!
      Tutoriels BreezingForms en Français : https://www.breezingforms.eddy-vh.com/

      Commentaire


      • #18
        schtroumpf



        Je peux t'envoyer le formulaire corrigé mais ça ne t'apprendrai rien. Il vaut mieux que tu ccorriges toi-même en suivant les instructions suivantes.

        Veux-tu vérifier le script d'initialisation du champ Total à payer !!! Il y a quelque chose qui n'a rien à y faire…
        C'est la raison principale du non fonctionnement du formulaire.

        Pour que le formulaire fonctionne à 100%. Pour les checkbox, groupes de checkbox, groupes de boutons radio, la classe s'ajoute avec :
        Code:
        ff_getElementByName('nomDeChamp').parentNode.classList.add('maClasse);
        Pas

        Code:
        element.parentNode.classList.add('maClasse);
        Sinon la classe n'est pas envoyée à l'élément parent.

        Vérifie que le type d'action pour le champ "Type d'adhésion" soit bien à Modifier et non Clic

        Le champ Montan d'adhésion a un script d'action inutile pour un calcul. Il est à supprimer.

        Aussi, les champs Type d'adhésion et Liste des activités lancent le script ff_total_action(element, action); Tu as modifié le nom de Total par TotalPayer, il faut donc mettre le bout de script à jour => ff_TotalPayer_action(element, action);


        Après ces modifications, teste ton formulaire (sur le site, pas dans l'admin) et observe la console de ton navigateur. À chaque actualisation du formulaire, elle te renseignera si d'autres erreurs s'y trouvent.
        Dernière édition par Eddy.vh à 16/10/2020, 16h04
        Cordialement.
        __
        Eddy !!!
        Tutoriels BreezingForms en Français : https://www.breezingforms.eddy-vh.com/

        Commentaire


        • #19
          Envoyé par Eddy.vh Voir le message
          schtroumpf
          Je peux t'envoyer le formulaire corrigé mais ça ne t'apprendrai rien. Il vaut mieux que tu ccorriges toi-même en suivant les instructions suivantes.
          Je préfère aussi, merci

          Envoyé par Eddy.vh Voir le message
          schtroumpf
          Veux-tu vérifier le script d'initialisation du champ Total à payer !!! Il y a quelque chose qui n'a rien à y faire…
          C'est la raison principale du non fonctionnement du formulaire.
          Alors là je vois pas du tout l’intrus. J'ai même recréé le code framework pour comparer, mais je ne vois pas de différence.

          Envoyé par Eddy.vh Voir le message
          schtroumpf
          Pour que le formulaire fonctionne à 100%. Pour les checkbox, groupes de checkbox, groupes de boutons radio, la classe s'ajoute avec :
          Code:
          ff_getElementByName('nomDeChamp').parentNode.classList.add('maClasse);
          Pas

          Code:
          element.parentNode.classList.add('maClasse);
          Sinon la classe n'est pas envoyée à l'élément parent.
          Modifié. Merci pour le signalement.

          Envoyé par Eddy.vh Voir le message
          schtroumpf
          Vérifie que le type d'action pour le champ "Type d'adhésion" soit bien à Modifier et non Clic
          Ah oui il était sur clic . J'ai modifié.

          Envoyé par Eddy.vh Voir le message
          schtroumpf
          Le champ Montan d'adhésion a un script d'action inutile pour un calcul. Il est à supprimer.
          C'est le script qui devrait être dans le champ Total à payer (et qui est bien présent dedans) ! qu'est-ce qu'il fait là ?! je l'ai viré.

          Envoyé par Eddy.vh Voir le message
          schtroumpf
          Aussi, les champs Type d'adhésion et Liste des activités lancent le script ff_total_action(element, action); Tu as modifié le nom de Total par TotalPayer, il faut donc mettre le bout de script à jour => ff_TotalPayer_action(element, action);
          J'avais pas fait gaffe à ce bout de code qu'il fallait modifier.
          Sur mon site www.sorgin-informatique.com : tutos sur Joomla! et ces composants et sur différents logiciels et services libres (Firefox, KeePass, uMap, Framadate, etc).

          Commentaire


          • #20
            Envoyé par schtroumph Voir le message
            Alors là je vois pas du tout l’intrus. J'ai même recréé le code framework pour comparer, mais je ne vois pas de différence.
            Sur le formulaire que tu m'as envoyé, dans script d'initialisation du champ "Total à payer", je trouve ceci :
            Code:
            //----- CODE POUR LA CLASS -----
            function ff_TotalPayer_init(element, condition)
            {
            switch (condition) {
            case 'formentry':
            element.parentNode.classList.add('total-payer');
            break;
            default:;
            } // switch
            } // ff_TotalPayer_init
            
            - Script Action, cocher "Clic" :
            
            //----- CODE POUR LE CALCUL -----
            function ff_TotalPayer_action(element, action)
            {
            
            ff_getElementByName('TotalPayer').value =
            Number(ff_getElementByName('MontantAdhesion').valu e) +
            Number(ff_getElementByName('TotalActivites').value ) + " €";
            
            } // ff_TotalPayer_action
            où toute la partie après
            Code:
            } // ff_TotalPayer_init
            fout le souc.

            Les scripts sont pointilleux, un manque d'apostrophe, un manque de point-virgule ou double-point comme ça arrive parfois, une faute de frappe dans un nom de champ, et rien ne fonctionne.
            Perso, lorsque je construis un formulaire, je n'y place pas les validations de suite, de sorte à pouvoir naviguer dans le formulaire sans contrainte, je l'ouvre toujours dans un onglet à part
            - dans l'interface d'édition du formulaire cliquer "Site de prévisualisation" dans la popup qui s'ouvre, clic droit, ce cadre -> Ouvrir ce cadre dans un nouvel onglet. -
            À chaque écriture d'un script, j'enregistre la modification, le formulaire et je teste, si tout fonctionne, je passe à la suite sinon, je corrige. De cette manière, je sais toujours où j'ai commis l'erreur.

            Les développeurs en JS ont probablement des outils de débogage qui les aide, je n'en ai pas et donc je teste bien chaque étape de création.
            Dernière édition par Eddy.vh à 19/10/2020, 11h45
            Cordialement.
            __
            Eddy !!!
            Tutoriels BreezingForms en Français : https://www.breezingforms.eddy-vh.com/

            Commentaire


            • #21
              Faut que je fasse le ménage dans mes formulaires d’adhésion de tests ! j'ai 50 versions différentes (bon, 50 j’exagère beaucoup quant même lol) d'installés et je sais même plus d’où j'ai sauvegardé celui que je t'ai envoyé. Je vais tous les virer, installer ce dernier et le modifier par rapport a ton message #18.

              Et je vais m'organiser comme toi en y allant petit a petit.
              Dernière édition par schtroumph à 19/10/2020, 10h13
              Sur mon site www.sorgin-informatique.com : tutos sur Joomla! et ces composants et sur différents logiciels et services libres (Firefox, KeePass, uMap, Framadate, etc).

              Commentaire


              • #22
                J'ai trouvé pourquoi les champ anti spam apparaissaient ! ce que j'ai fait, pour suivre ta manière de faire, j'ai supprimé tous les champs avec des scripts (sauf ceux des coordonnées). Les champs anti spam ont disparu. Et j'ai refait, un par un en testant au fur et à mesure, les champs supprimé. Ça venait du champ avec la case à cocher pour accepter l'utilisation des données perso. Dans une ligne du code du script d'initialisation pour mettre une class j'avais oublié une apostrophe :
                Code:
                ff_getElementByName('AdhesionDonneesPerso').parentNode.classList.add([COLOR=#ff0000]'donnees-perso)[/COLOR];
                Avec cette apostrophe les champs anti spam disparaissent. Je continu pour voir s'il y a d'autres erreurs.
                Sur mon site www.sorgin-informatique.com : tutos sur Joomla! et ces composants et sur différents logiciels et services libres (Firefox, KeePass, uMap, Framadate, etc).

                Commentaire


                • #23
                  Il faut faire gaffe à tout dans les scripts, un guillemet d'ouverture attend un guillemet de fermeture, si tu en oublies un, le script englobe tout ce qui se trouve jusqu'au prochain guillemet.
                  Et bien entendu, ça plante…

                  Avec BreezingForms pour Joomla! 4 (que je teste actuellement), nous aurons un éditeur de script avec coloration syntaxique, on se rendra plus facilement compte de nos erreurs de frappe et on pourra corriger plus facilement.
                  Dernière édition par Eddy.vh à 19/10/2020, 11h49
                  Cordialement.
                  __
                  Eddy !!!
                  Tutoriels BreezingForms en Français : https://www.breezingforms.eddy-vh.com/

                  Commentaire


                  • #24
                    Ça marche ! je suis trop fort .. bon heureusement que tu étais là car je ne m'en serais pas sortie seul . Je vais me le garder très précieusement si jamais je doit mettre en place un autre formulaire d’adhésion.

                    Merci beaucoup pour ton aide et du temps passé
                    Sur mon site www.sorgin-informatique.com : tutos sur Joomla! et ces composants et sur différents logiciels et services libres (Firefox, KeePass, uMap, Framadate, etc).

                    Commentaire


                    • #25
                      Envoyé par Eddy.vh Voir le message
                      schtroumpf
                      Pour que le formulaire fonctionne à 100%. Pour les checkbox, groupes de checkbox, groupes de boutons radio, la classe s'ajoute avec :
                      Code:
                      ff_getElementByName('nomDeChamp').parentNode.classList.add('maClasse);
                      Pas

                      Code:
                      element.parentNode.classList.add('maClasse);
                      Sinon la classe n'est pas envoyée à l'élément parent.
                      Je suis en train de refaire un formulaire de contact pour l'association. Pour ajouter les class aux cases à cocher, aux groupe de cases à cocher et au groupe de bouton radio j'ai donc suivis ce que tu m'avais dit. Mais j'ai un groupe de boutons radio pour lequel la class ne s'affiche pas. Le champ se nome ContactDestinataires.

                      Le script :

                      Code:
                      function ff_ContactDestinataires_init(element, condition)
                      {
                          switch (condition) {
                              case 'formentry':
                              ff_getElementByName('ContactDestinataires').parentNode.classList.add('contact-destinataire');
                                  break;
                              default:;
                          } // switch
                      } // ff_ContactDestinataires_init
                      Qu'est-ce que j'ai raté ou qu'est-ce que je n'ai pas compris ?
                      Sur mon site www.sorgin-informatique.com : tutos sur Joomla! et ces composants et sur différents logiciels et services libres (Firefox, KeePass, uMap, Framadate, etc).

                      Commentaire


                      • #26
                        Ca semble correct.
                        Contrôle ta console voir s'il n'y a une erreur.
                        Cordialement.
                        __
                        Eddy !!!
                        Tutoriels BreezingForms en Français : https://www.breezingforms.eddy-vh.com/

                        Commentaire


                        • #27

                          J'ai ce message :

                          Code:
                          Uncaught TypeError: ff_getElementByName(...) is null
                              ff_ContactPartenaireVousEtes_init http://localhost/SITE-TESTS/contact.html:445
                              ff_initialize http://localhost/SITE-TESTS/contact.html:366
                              onload http://localhost/SITE-TESTS/contact.html:370
                          contact.html:445:56
                              ff_ContactPartenaireVousEtes_init http://localhost/SITE-TESTS/contact.html:445
                              ff_initialize http://localhost/SITE-TESTS/contact.html:366
                              onload http://localhost/SITE-TESTS/contact.html:370
                          J'ai suivis le lien En savoir plus mais ça ne m'a pas avancé plus (pour dire que je n'ai rien compris lol).

                          Edit 01 :

                          Je n'ai plus d'erreur dans la console car je me suis rendu compte que pour certain script j'avais écris

                          Code:
                          ff_getElementByName('[B][COLOR=#c0392b]nomDeSection[/COLOR][/B]').parentNode.classList.add('maClasse);
                          au lieu de

                          Code:
                          ff_getElementByName('[B][COLOR=#c0392b]nomDeChamp[/COLOR][/B]').parentNode.classList.add('maClasse);
                          Mais la class n'est toujours pas présente.

                          Edit 02 :

                          Pour être certain que j'ai bien compris, ce bout de code c'est bien pour ajouter la class juste âpres la class bfLabelLeft de la balise section :

                          Code:
                          <section class="bfElemWrap bfLabelLeft [COLOR=#c0392b][B]MaClass[/B][/COLOR]" id="bfElemWrap1290">
                          <label id="bfLabel1290" for="ff_elem1290">Choisir un destinataire<span class="bfRequired">*</span>
                          </label>
                          <span class="bfElementGroupNoWrap contact-destinataire" id="bfElementGroupNoWrap1290">
                          <input class="ff_elem" type="radio" name="ff_nm_ContactDestinataires[]" value="contact@hegaldi-jatxou.fr" id="ff_elem1290"><label class="bfGroupLabel" id="bfGroupLabel1290" for="ff_elem1290">L'association</label>
                          <input class="ff_elem" type="radio" name="ff_nm_ContactDestinataires[]" value="contact@sorgin-informatique.com" id="ff_elem1290_1"><label class="bfGroupLabel" id="bfGroupLabel1290_1" for="ff_elem1290_1">Gestionnaire du site</label>
                          </span>
                          </section>
                          Parce que je me suis rendu compte que ma class est dans le second span :

                          Code:
                          <section class="bfElemWrap bfLabelLeft" id="bfElemWrap1290">
                          <label id="bfLabel1290" for="ff_elem1290">Choisir un destinataire<span class="bfRequired">*</span>
                          </label>
                          <span class="bfElementGroupNoWrap [COLOR=#c0392b][B]contact-destinataire[/B][/COLOR]" id="bfElementGroupNoWrap1290">
                          <input class="ff_elem" type="radio" name="ff_nm_ContactDestinataires[]" value="contact@hegaldi-jatxou.fr" id="ff_elem1290"><label class="bfGroupLabel" id="bfGroupLabel1290" for="ff_elem1290">L'association</label>
                          <input class="ff_elem" type="radio" name="ff_nm_ContactDestinataires[]" value="contact@sorgin-informatique.com" id="ff_elem1290_1"><label class="bfGroupLabel" id="bfGroupLabel1290_1" for="ff_elem1290_1">Gestionnaire du site</label>
                          </span>
                          </section>
                          Dernière édition par schtroumph à 24/10/2020, 10h22
                          Sur mon site www.sorgin-informatique.com : tutos sur Joomla! et ces composants et sur différents logiciels et services libres (Firefox, KeePass, uMap, Framadate, etc).

                          Commentaire


                          • #28
                            ff_getElementByName('nomdDeChamp') = champ cible, .parentNode = premier parent de l'élément, classList.add ajoute une classe à celles déjà présentes.
                            Le span est ciblé parce que ton input s'y trouve…

                            La bibliothèque BF permet de cibler les champs par leur nom (ff_getElementByName), pas les sections puisqu'elles n'ont pas de nom.

                            Aussi, j'ai remarqué que tu ajoutes une classe différente à chaque champ. Dans quel but ? Parce que, hormis à vouloir formater par css chaque champ différemment, ça n'a aucun sens. Peux-tu expliquer pourquoi tu souhaites ajouter des classes ?

                            Si tu veux cibler une section pour la différencier des autres, il y a plus simple que cibler les parents.

                            Dans l'onglet script des options avancées du formulaire, après avoir créé la structure du code, il suffit d'ajouter :
                            document.getElementById('idDeSection').classList.a dd('maClasse');
                            Tu peux trouver l'id de la section en l'examinant avec la console du navigateur mais BF utilise le nom de la section pour former l'id.

                            Étudie bien la nécessité d'ajouter tout ça parce que ça alourdit le formulaire peut-être inutilement, même mon dernier exemple est inutile. Si tu peux cibler une section par son id, tu n'as pas besoin de le faire par une classe…

                            Cordialement.
                            __
                            Eddy !!!
                            Tutoriels BreezingForms en Français : https://www.breezingforms.eddy-vh.com/

                            Commentaire


                            • #29
                              Pour les section j'utilise effectivement leurs id. Pour les éléments je t'avoue que j'ai pris cette habitude de mettre une class partout, alors que je ne les utilise pas. Des fois oui, mais pas pour tous les éléments. En lisant ta réponse je me rends compte que ce n'est pas utile, sauf si je veux cibler un ou plusieurs éléments bien précis. Mais pour les autres pas besoin. Je vais revoir ma manière de faire les formulaires.

                              J'ai compris pourquoi l'ajout d'une class ne marche pas avec les boutons radios et groupe de cases à cocher !!! vaut mieux tard que jamais (grâce à ton explication). Le .parentNode est le premier parent de l'élément comportant le nom de l’élément. Hors pour les boutons radios et groupe de case à cocher la balise ayant le nom de l’élément as deux parents ! il faut donc en ajouter un :

                              Code:
                              ff_getElementByName('NomElement')[COLOR=#ff0000].parentNode[/COLOR].paren tNode.classList.add('class');
                              Dernière édition par schtroumph à 26/10/2020, 09h04
                              Sur mon site www.sorgin-informatique.com : tutos sur Joomla! et ces composants et sur différents logiciels et services libres (Firefox, KeePass, uMap, Framadate, etc).

                              Commentaire


                              • #30
                                Envoyé par schtroumph Voir le message
                                Code:
                                ff_getElementByName('NomElement')[COLOR=#ff0000].parentNode[/COLOR].paren tNode.classList.add('class');
                                Déduction logique !

                                Cordialement.
                                __
                                Eddy !!!
                                Tutoriels BreezingForms en Français : https://www.breezingforms.eddy-vh.com/

                                Commentaire

                                Annonce

                                Réduire
                                Aucune annonce pour le moment.

                                Partenaire de l'association

                                Réduire

                                Hébergeur Web PlanetHoster
                                Travaille ...
                                X