Discussion :

[apicultrice]

Voilà j'ai un formulaire qui fonctionne bien mais je voudrais adjoindre une sous option ou un test sur une option et en fonction du choix une sous option s'affiche

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<p>Opérations :<select name="Operation">                                 
                                    <option value="Visite Printemps">Visite de printemps</option>
                                    <option value="Remplacement cadres">Remplacement de cadres</option>
                                    <option value="Essaimage primaire">Essaimage primaire</option>
                                    <option value="Essaimage secondaire">Essaimage secondaire</option>
                                    <option value="Essaimage tertiaire">Essaimage tertiaire</option>
                                    <option value="Remplacement ruche">Remplacement de la ruche</option>
                                    <option value="Ruchette => ruche">Ruchette => ruche</option>
                                    <option value="Nouvel essaim <?php echo date("Y") ?>">Nouvel essaim <?php echo date("Y") ?></option>
                                    <option value="Comptage Varroas">Comptage Varroas</option>
                                    <option value="Changement reine">Changement Reine</option>
                                    <option value="Pose de hausse">Pose de hausse</option>
                                    <option value="Retrait de hausse">Retrait de hausse</option>
                                    <option value="Pose grille reine">Pose grille reine</option>
                                    <option value="Pose du chasse abeilles">Pose du chasse-abeilles</option>
                                    <option value="Recuperation hausses">Récolte: récupération des hausses</option>
                                    <option value="Traitement varroa">Traitement varroa</option>
                                    <option value="Nourrissement sirop">Nourrissement sirop</option>
                                    <option value="Nourrissement candy">Nourrissement candy</option>
                                    <option value="Hivernage">Hivernage</option>
                                    </select></p>

Si je choisie "Pose de hausse" ou "Retrait de hausse", un nouveau champ s'ouvre pour me demander le nombre
Vous pensez que cela est possible ?
A+

[Invité]

Bonjour,

oui, c'est possible.
Mais comme c'est coté client, ça se fera en JavaScript.

Sur le onchange du <select> :

• tu récupères et testes l'option sélectionnée.
• tu affiches ou masques alors un <input type="number" />.

En faisant une recherche, tu devrais trouver des scripts. "javascript afficher masquer input sur choix liste deroulante"

[apicultrice]

Merci pour les mots clés

C'est le plus dure lors d'une recherche....

Ok cela fonctionne mais je n'arrive pas à mettre un texte devant le champ est qui disparaît ou apparaisse dans les mêmes conditions

ruches.montminoises.free.fr/Essai.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<p>Opérations :<select name="Operation" id="Operation" onchange="Qte()">                                
              <option value="Changement reine">Changement Reine</option>
              <option value="Pose de hausse">Pose de hausse</option>
              <option value="Retrait de hausse">Retrait de hausse</option>
              <option value="Pose grille reine">Pose grille reine</option>
              <option value="Pose du chasse abeilles">Pose du chasse-abeilles</option>
              </select></p>     
<p><input type="number" name="Nb_hausse" id="Nb" placeholder="Quantité ?" style="display:none;"/></p>
 
<script language='javascript'>
function Qte() {
  if(document.getElementById('Operation').value == "Retrait de hausse" || document.getElementById('Operation').value == "Pose de hausse")  {
    document.getElementById("Nb").style.display = "inline";
  } 
  else {
    document.getElementById("Nb").style.display = "none";
  }
}
</script>

J'ai mis un "placeholder" mais j'aurais préféré le texte "Quantité: " devant
Une idée pour intégrér le texte dans "INPUT ?
A+

[Invité]

Lol...

Mets simplement l'id "Nb" sur le conteneur <p> !

[Beginner.]

J'ai mis un "placeholder" mais j'aurais préféré le texte "Quantité: " devant

Ajoutez un label juste avant le input ou bien mettez directement le texte que vous voulez juste avant le input et à l'intérieur du paragraphe...

[apicultrice]

Ajoutez un label juste avant le input ou bien mettez directement le texte que vous voulez juste avant le input et à l'intérieur du paragraphe...

Oui cela je l'ai essayé mais il reste toujours affiché
Il doit s'effacer si l'option n'est pas selectionné

[apicultrice]

Lol...

Mets simplement l'id "Nb" sur le conteneur <p> !

???

[Beginner.]

Oui cela je l'ai essayé mais il reste toujours affiché
Il doit s'effacer si l'option n'est pas selectionné

C'est normal car vous n'avez pas fait ce que jreaux62 vous a indiqué, il suffit d'écrire ça : <p id="Nb" style="display:none;">Quantité ? <input type="number" name="Nb_hausse" /></p> à la place de ça : <p><input type="number" name="Nb_hausse" id="Nb" placeholder="Quantité ?" style="display:none;"/></p>.

[Beginner.]

Ah oui en plus de ce que jreaux62 a indiqué j'ai aussi mis le style inline style="display:none;" dans le <p>...

Et je vous conseil de mettre un min (et éventuellement un max) au input de type number... Au moins le min car sinon on peut choisir des valeurs négatives ce qui n'aurait pas de sens...

[Invité]

Mieux :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<p id="Nb" style="display:none;">
   <label>Quantité ? <input type="number" name="Nb_hausse" min="0" step="1" style="width:60px;"/></label>
</p>

@apicultrice
1- On n'écrit plus <script language='javascript'> depuis le siècle dernier, mais juste :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<script>

2- Il faudrait que tu fasses des efforts pour écrire un code HTML valide.

[apicultrice]

oui chef

[Invité]

1-Je t'invite à tester la validité W3C de ton site sur :

• https://validator.w3.org/

2- Et affiche le "code généré" (clic droit -> "afficher le code source de la page")
Là aussi, tu verras de grosses erreurs...
...FACILES à CORRIGER.


[EDIT] (vu sur ta page test)
Remplacer le <p> par un <a> est vraiment n'importe quoi...
Les balises ont une sémantique, à respecter.