[Résolu] Input text non vide et un input type=radio sur valeur A

Bonjour,

Si un input text n'est pas vide et un input type=radio possède une valeur donnée (disons A) je veux afficher un champ de formulaire supplémentaire.

L’événement peut être provoqué après remplissage de l'input text ou selection du radio A.
Inversement le champ doit être masqué si l'input devient vide ou le radio plus sur A.

Une âme charitable peut-elle m'aider ?
Modifié par boteha_2 (07 Sep 2019 - 22:13)

Salut

Qu'as tu essayé pour le moment ? du javascript ? montre nous un peu tes lignes de codes

Bonjour,

Je n'ai rien essayé.

Je connais bien PHP, html ou css mais j'utilise peu javascript, à chaque fois je dois me faire aider.

D'ailleurs, si vous pouvez me conseiller un bon bouquin pour débutant.

Je veux du javascript, pas du JSQuery ou autre.

Ah!

alors désolé, moi c'est pour le moment ce n'est QUE Jquery. je ne pourrais pas t'aider.

Pour l'autoformation javascript, tu peux aller sur Youtube, "tuto javascript" et les vidéos sont très bien.
Modifié par JENCAL (09 Sep 2019 - 11:20)

Bonjour,

JENCAL a écrit :
Pour l'autoformation javascript, tu peux aller sur Youtube, "tuto javascript" et les vidéos sont très bien.

Merci pour le tuyau.

Côté bouquin de base, avez-vous des conseils ?

Bonjour,

Pour essayer d'aller plus loin voilà, quelques morceaux de code.

<p><input type="text" name="soc" id="soc" value="" /></p>

<p><input type="radio" name="zp" id="zpF" value="F" checked="checked" /><label for="zpF">France et Dom/Tom</label>
<input type="radio" name="zp" id="zpA" value="A" /><label for="zpA">Union europ&eacute;enne</label></p>

<p><input type="text" name="tva" id="tva" value="" /></p>

input#tva {display: none}

document.getElementById ("soc").addEventListener ("mouseover", Afficher_Masquer_Input ());
document.getElementById ("zpA").addEventListener ("click", Afficher_Masquer_Input ());

function Afficher_Masquer_Input ()
{
	
var soc = document.getElementById('soc');
var zon = document.getElementById('zpA');
var tva = document.getElementById('tva');
	
if (soc != '' && zon.checked == true) tva.style.display="block";
else tva.style.display="none";

}

Cela ne marche pas.
Modifié par boteha_2 (19 Sep 2019 - 22:05)

Hello,

Il est préférable que tu écoutes des événements liés aux formulaires ('change' et 'input' ici par exemple). https://developer.mozilla.org/fr/docs/Web/Events

Par ailleurs, il ne faut pas que tu exécutes la fonction de callback d'un événement mais bien passer la fonction elle-même.

Voici ce que ça pourrait donner : https://codepen.io/korell/pen/zYOMZbp

Bonjour,

Merci beaucoup, ton code obtient exactement l'effet recherché.

Je mets cela en place sur le formulaire réel pendant le week-end, je te tiens informé.

Bonjour,

Ton code fonctionne parfaitement.

Un dernier détail j'ai besoin d'agir aussi sur le premier frère de l'élément tva qui est disons une légende.

<p><input type="text" name="tva" id="tva" value="" /></p>
<p>Légende pour input ci-dessus</p>

Je peux bien sûr donner un id au paragraphe de légende mais j'essaye de faire plus sémantique.

function Afficher_Masquer_Input ()
{
if (soc.value != '' && zon.checked == true)
{
tva.style.display="block";
tva.nextSibling.style.display="block";
}
else
{	
tva.style.display="none";
tva.nextSibling.style.display="none";
}
}

Cela ne marche pas, je ne connais l'équivalent de + en javascript.

apparement tu devrais remonter aussi sur le parent avant de cibler le frere adjacent :

tva.parentNode.nextSibling.style.display

Bonjour,

gcyrillus a écrit :
apparement tu devrais remonter aussi sur le parent avant de cibler le frere adjacent :

tva.parentNode.nextSibling.style.display

Cela ne marche pas mieux.
J'ai ajouté un id et déclare une variable supplémentaire.

var leg = document.getElementById('leg');

Et là cela marche, pas élégant mais efficace.
Modifié par boteha_2 (22 Sep 2019 - 14:47)

Bonjour,

Le code de MatthieuR fonctionne sur Firefox, Chrome et Edge, mais pas sur IE11.

On ne va pas en faire une maladie mais si c'est juste un détail à changer je veux bien m'en donner la peine.

Hello,
2 choses :
- le code ne fonctionnait pas sous IE11 because la méthode Array.forEach() ne fonctionne pas sous ce navigateur de merde malgré la compatibilité indiquée sur MDN (https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach). Il faut donc utilisé une boucle for à la place...
(le debug de la console de IE11 t'aurais directement mis sur la voie)

- pour ajouter un élément dans la condition d'affichage de ton champ TVA, je mettrais plutôt un identifiant sur le container de ce champ/légende et j'agirais sur ce container

J'ai mis à jour mon pen avec les modifs indiqués ci-dessus : https://codepen.io/korell/pen/zYOMZbp

A+
Modifié par MatthieuR (23 Sep 2019 - 23:14)

Merci beaucoup.

Je mets à jour mon script dans la soirée.
Je te tiens informé.

Bonjour MatthieuR,

Ton nouveau code marche même sur IE11.

Merci beaucoup, j'attends un peu avant de cocher Résolu.

Bonjour,

J'ai un petit problème avec cette instruction :

soc.addEventListener("input", Afficher_Masquer_Input);

C'est parfait pour afficher-masquer l'Input mais je cherche aussi à mettre en rouge une légende quand le champ société est rempli par des particuliers qui y mettent une date de naissance ou une civilité.

<span id="socled">(facultatif, laissez ce champ vide si vous êtes un particulier)</span>

var socled = document.getElementById('socled');

if (soc.value == 'M' || soc.value == 'Mr' || soc.value == 'Monsieur')
{
socled.style.color = "red";
}
else
{
socled.style.color = "black";
}

La petit ennui est que tout les noms de société qui commencent par "M" déclenchent le changement de style quand l'utilisateur tape son "M". Dès la deuxième lettre la couleur redevient black mais je trouve l'effet peu sympa.

Je me demande quel événement je dois écouter pour pallier ce problème, j'ai essayé onMouseOut mais là plus rien de ne marche.

Bonjour,

je suis un peu fâché avec Javascript.

Le code de MatthieuR fonctionne parfaitement pour afficher-masquer l'input mais j'ai prolongé la discussion par un problème assez différent.

1) Est_il possible d'écouter deux événements différents sur le même élément ?

soc.addEventListener("input", Afficher_Masquer_Input);
soc.addEventListener("mouseout", Color_Legende);

2) Par ailleurs ma fonction Color_Legende est assez simple et je ne comprends pas pourquoi elle ne fonctionne pas :

if (Number.isInteger (soc.value) == true && soc.value > 1900 && soc.value < 2100) socled.style.color = "#F00";
else socled.style.color = "#999";

Peut-être qu'une variable issue d'un formulaire est forcément de type string.

En PHP on pourrait imaginer :

if (is_numeric ($soc) && $soc > 1900 && $soc < 2100)

Bonjour,

a écrit :
Est_il possible d'écouter deux événements différents sur le même élément ?

Oui, et même plusieurs fois le même évènement.

a écrit :
Peut-être qu'une variable issue d'un formulaire est forcément de type string.

C'est ça

Si tu veux vérifier que la valeur soit entière et éviter les effets de bords, tu convertis la valeur en entier, puis la repasse en string pour vérifier qu'elle n'a pas changé

var socVal = parseInt(soc.value, 10);
if (socVal.toString() === soc.value && socVal > 1900 && socVal < 2100) {
}

Bonjour,

Merci beaucoup.

Je fais le test dès que j'ai le temps.

Bonjour kustolovic,

Je comprends ton code mais il ne marche pas dons mon test.

var soc = document.getElementById('soc');
var socVal = parseInt (soc.value, 10);
var socled = document.getElementById('socled');

soc.addEventListener("input", Fausse_Soc);

function Fausse_Soc ()
{

if (socVal.toString() === soc.value && socVal > 1900 && socVal < 2100)
{
socled.style.color = "#F00";
}
else
{
socled.style.color = "#999";
}

}

Si je tape 1960 il ne se passe rien.