10577 sujets

JavaScript, DOM et API Web HTML5

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 Smiley smile
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)
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.