[RÉGLÉ] Question Javascript

[RobertG]

Bonjour,

Je suis nul en Javascript et n'ai pas réussi à trouver comment affecter une valeur numérique à un texte saisi dans un textbox en utilisant JS.

Supposons que la textbox dont le nom interne sera {field_question} attende comme réponse "musique" : quel code me permettrait-il dans un autre champ de comparer ce qui a été saisi afin de donner un score de 5, par exemple, si la réponse est bonne, 0 sinon, pour calcul ultérieur.
Parmi les exemples que donne l'auteur de l'extension, il cite "if({field.qty} >= 3, 30, 0" qui permet de changer la quantité en pourcentage de remise, mais ça ne fonctionne pas sur une comparaison de texte :lorsque j'essaie d'utiliser

if({field.question} = 'musique', 5, 0

la totalité des calculs est bloquée, et si je ne récupère que {field.question}, sa valeur étant 0, puisque non numérique, les calculs se font bien.

Merci de votre aide !
Robert

[cavo789]

Bonjour Robert

La ligne de code que tu donnes (ci-dessus en gris) n'est pas du javascript. Est-ce que c'est dans BreezingForms ou autre outil ?

Note: en javascript pur, ne jamais jamais jamais faire un "if (champ = 'Valeur')" càd utilisation d'un simple égal. En javascript, le simple égal est une assignation de valeur; même au sein d'un if ==> la condition assignera la valeur au champ et passera d'emblée dans le test comme True.

[RobertG]

Merci Christophe,

C'est dans Convert Forms que cette syntaxe est utilisée.
Tassos m'a conseillé d'utiliser du JS sans me donner d'exemple pour du texte.

Je viens d'essayer sans succès

var rep = document.getElementById("form18_question").value;
if (rep === "instrument") {
return {field.total_cost};
} else {
return {field.total_cost} + 5;
}}

'form18_question' est l'id que je trouve dans le code source de la page html (formulaire 18, champ 'question', le calcul se fait dans un champ caché qui suit le textbox.

Le problème est que sur le formulaire, j'ai deux affichages du total : un avant ce champ de saisie, qui fonctionne bien, un autre qui récapitule le tout et renvoie '0' si j'utilise ce calcul et la bonne valeur si je le neutralise. Normalement, le "Cost" du bas de page devrait au moins afficher $93 dans cet exemple.

[cavo789]

La syntaxe ci-dessous n'est pas valide en javascript:

{field.total_cost}

As-tu essayé la syntaxe ci-dessous ?

document.getElementById("total_cost").value;

[Eddy.vh]

Bonjour.

La syntaxe ci-dessous n'est pas valide en javascript:

{field.total_cost}

As-tu essayé la syntaxe ci-dessous ?

document.getElementById("total_cost").value;

Tassos à probablement une bibliothèque de "traductions", un peu comme dans BreezingForms mais différent…

[RobertG]

Christophe, j'ai aussi essayé getElementByID sans succès. C'est au niveau de la comparaison que ça coinçait et plantait le calcul, d'où la remise à 0 du coût. Avec la méthode ci-dessous, plus de plantage, l'affichage du coût total (en orange) récupère la valeur du récapitulatif précédent, mais n'ajoute pas la valeur définie selon la formule, ou alors elle revient toujours à 0.

Oui Eddy, il a sa propre interprétation si on utilise des fonctions intégrées à l'extension.

J'ai essayé l'opérateur ternaire ({field.question} == 'instrument' ? 5 : 0) pour définir et ajouter au total la valeur de ce champ, en me basant sur d'autres infos dont https://www.tassos.gr/joomla-extensi...d-calculations
Mais même si la comparaison est vraie, la valeur reste à 0, ou vide.

[RobertG]

Tassos m'a donné un exemple de code que j'ai adapté, sans succès, à un formulaire tout neuf : le code est interprété à l'ouverture du formulaire, mais pas lorsqu'une valeur est saisie dans la zone de texte. Je cherche !

[Eddy.vh]

Oui Eddy, il a sa propre interprétation si on utilise des fonctions intégrées à l'extension.

BreezingForms garde quand-même la forme du javascript.

p.ex.

var maVariable = ff_getElementByName('champ').value;
if (maVariable == 'réponse correcte') {
ff_getElementByName('champ-de-point').value = 'Vous êtes formidable';
}
else {
ff_getElementByName('champ-de-point').value = 'Vous êtes un âne';
}

Regarde quelques exemples sur mon site, catégorie "Scripts"

[RobertG]

Merci Eddy ! Tes exemples me serviront certainement lorsque je prendrai le temps de tester BreezingForms, car pour le peu que j'ai regardé, je ne l'ai pas trouvé intuitif par rapport à d'autres que j'avais utilisés il y a longtemps.

Finalement, Tassos a pu prendre un peu de temps pour moi et m'a demandé mon formulaire pour le vérifier et modifier son code. Il fonctionne bien maintenant et j'ai même réussi à l'adapter pour un deuxième champ texte à interpréter. Ce code se place dans la partie Design/Advanced/Custom CSS du formulaire.
Il utilise querySelector, entre autres...
J'espère qu'il pourra apporter une modification permettant de passer par la formule d'opérateur ternaire, qui sera beaucoup plus simple à utiliser, car le code actuel doit être dupliqué pour chaque nouveau champ texte qui, lui-même doit être accompagné d'un champ caché permettant le calcul.

[woluweb]

Tiens, tu pourrais partager le javascript ici RobertG ?
C'est intéressant et en plus j'ai un formulaire ou deux avec Convert Forms et je suis curieux de voir ce qu'on peut faire en plus avec le js...

[RobertG]

Voilà

Exemple JavaScript pour calcul de valeur sur champ texte Convert Forms
Ce code se place dans la partie Design/Advanced/Custom CSS du formulaire.

Textbox
field key : question
input CSS Class : myFormPianoQuestion

Champ caché
field key : myTotalCostHiddenField

pas de calcul sur ces champs

On récupère les chaînes texte pour affecter une valeur en vue de calculer le score total.

Ce premier code m'a été fourni par Tassos Marinos, j'ai ajouté le second avec les champs correspondants, en l'adaptant

<script>
var rep = document.querySelector(".myFormPianoQuestion");
if (rep) {
let form = rep.closest("form");
rep.addEventListener('input', function(evt) {
var repInput = evt.target.value;
var myTotalCostHiddenField = form.querySelector('input[type="hidden"][name="cf[myTotalCostHiddenField]"]');
var totalCost = form.querySelector('.myTotalCostField');

if (repInput == 'instrument') {
myTotalCostHiddenField.value = 5;
} else {
myTotalCostHiddenField.value = 0;
}

form.dispatchEvent(new Event('input'));
});
}
</script>

Textbox
field_key : text_7
input CSS Class : myFormQuestion2

Champ caché
field key: myQ2CostHiddenField

<script>
var rep2 = document.querySelector(".myFormQuestion2");
if (rep2) {
let form = rep2.closest("form");
rep2.addEventListener('input', function(evt2) {
var rep2Input = evt2.target.value;
var myQ2CostHiddenField= form.querySelector('input[type="hidden"][name="cf[myQ2CostHiddenField]"]');
var totalCost = form.querySelector('.myTotalCostField');

if (rep2Input == 'musique') {
myQ2CostHiddenField.value = 6;
} else {
myQ2CostHiddenField.value = 0;
}

form.dispatchEvent(new Event('input'));
});
}
</script>

Reste que dans le formulaire final (50 questions en tout), il y en aura une dizaine de ce type, donc 10 champs textbox, 10 champs cachés et donc 10 scripts, un pour chaque, raison pour laquelle je disais que la modification de l'extension au niveau du calcul par opérateur ternaire sera sacrément plus simple.