Sous option dans un formulaire

Version imprimable

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:

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+

26/07/2018, 16h58
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. :recherch: "javascript afficher masquer input sur choix liste deroulante"

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:

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+

26/07/2018, 19h10
Invité

Lol...

Mets simplement l'id "Nb" sur le conteneur <p> ! :mouarf:
26/07/2018, 19h16
Beginner.

Citation:

Envoyé par apicultrice

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...
26/07/2018, 20h28
apicultrice

Citation:

Envoyé par Beginner.

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é
26/07/2018, 20h29
apicultrice

Citation:

Envoyé par jreaux62

Lol...

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

???
26/07/2018, 21h23
Beginner.

Citation:

Envoyé par apicultrice

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>.
26/07/2018, 21h32
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...
26/07/2018, 21h41
Invité
Mieux :
Code:

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:

<script>

2- Il faudrait que tu fasses des efforts pour écrire un code HTML valide.
26/07/2018, 22h10
apicultrice

oui chef
26/07/2018, 22h23
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... :cfou:
Les balises ont une sémantique, à respecter.