BreezingForms : calcul de bouton radio et cases a cocher

[schtroumph]

C'est la sauvegarde complète avec la triple protection anti spam : Formulaire Adhesion.zip

[Eddy.vh]

Je vois ça cet après-midi et reviens vers toi rapidement.

[Eddy.vh]

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 :

ff_getElementByName('nomDeChamp').parentNode.classList.add('maClasse);

Pas

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.

[schtroumph]

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

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.

schtroumpf
Pour que le formulaire fonctionne à 100%. Pour les checkbox, groupes de checkbox, groupes de boutons radio, la classe s'ajoute avec :

ff_getElementByName('nomDeChamp').parentNode.classList.add('maClasse);

Pas

element.parentNode.classList.add('maClasse);

Sinon la classe n'est pas envoyée à l'élément parent.

Modifié. Merci pour le signalement.

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

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

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.

[Eddy.vh]

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

} // 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.

[schtroumph]

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.

[schtroumph]

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 :

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.

[Eddy.vh]

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.

[schtroumph]

Ç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é

[schtroumph]

schtroumpf
Pour que le formulaire fonctionne à 100%. Pour les checkbox, groupes de checkbox, groupes de boutons radio, la classe s'ajoute avec :

ff_getElementByName('nomDeChamp').parentNode.classList.add('maClasse);

Pas

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 :

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 ?

[Eddy.vh]

Ca semble correct.
Contrôle ta console voir s'il n'y a une erreur.

[schtroumph]

J'ai ce message :

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

ff_getElementByName('[B][COLOR=#c0392b]nomDeSection[/COLOR][/B]').parentNode.classList.add('maClasse);

au lieu de

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 :

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

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

[Eddy.vh]

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…

[schtroumph]

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 :

ff_getElementByName('NomElement')[COLOR=#ff0000].parentNode[/COLOR].paren tNode.classList.add('class');

[Eddy.vh]

ff_getElementByName('NomElement')[COLOR=#ff0000].parentNode[/COLOR].paren tNode.classList.add('class');

Déduction logique !