Sujet Précédent Sujet Suivant

Zone de saisie à liée un bouton radio

Fermé
alainpguimao - 20 oct. 2014 à 18:14
Ysabe_l Messages postés 12454 Date d'inscription vendredi 12 avril 2013 Statut Contributeur Dernière intervention 23 avril 2024 - 24 oct. 2014 à 00:12
Bonjour,

Bonjour,
je voudrais lier une zone de saisie à liée un bouton radio
exemple : -1bouton radio
-2bouton radio
-3bouton radio
-4zone de saisie( si je me positionne dans la zone de saisie, que ça soit le choix unique) comme un bouton. exactement comme les formulaires d'ONG "medecindumonde.fr" ou "medecinsans frontireres.fr"

2 réponses

Réponse 1 / 2
canarder Messages postés 1706 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 13 mai 2018 354
20 oct. 2014 à 18:16
Tu dois gérer ça en Javascript je pense.
0
hilor Messages postés 26 Date d'inscription mercredi 22 octobre 2014 Statut Membre Dernière intervention 4 octobre 2017
23 oct. 2014 à 15:30
Peut-être me suis-je mal exprimé?
EXEMPLE : j'ai 4 boutons radio. le 4e bouton radio a une zone de saisie. si je clique sur ce 4e bouton radio, je voudrais que le curseur se positionne dans la zone de saisie où je dois ecrire.

Merci d'avance
0
Réponse 2 / 2
Ysabe_l Messages postés 12454 Date d'inscription vendredi 12 avril 2013 Statut Contributeur Dernière intervention 23 avril 2024 274
23 oct. 2014 à 16:15
Bonjour,

Voici un petit exemple si j'ai bien compris ce que tu veux faire : http://ysabel.fr/exemples/formulaire.html

Et le code qui correspond : 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Formulaire</title>
    </head>
    <body>
        <h1>Vous préférez quel fruit ?</h1>
        <form name="fruitprefere" method="post" action="#" onsubmit="verif()">
            <p>
                <input type="radio" name="fruit" id="pomme" value="pomme" onClick="saisieinactive()" /><label for="pomme">Pomme</label><br />
                <input type="radio" name="fruit" id="poire" value="poire" onClick="saisieinactive()" /><label for="poire">Poire</label><br />
                <input type="radio" name="fruit" id="banane" value="banane" onClick="saisieinactive()" /><label for="banane">Banane</label><br />
                <input type="radio" name="fruit" id="orange" value="orange" onClick="saisieinactive()" /><label for="orange">Orange</label><br />

                <input type="radio" name="fruit" id="autre" value="autre" onClick="saisieactive()" /><label for="autre" id="texteautre">Autre</label>
                <input type="text" name="nomfruit" id="nomfruit" placeholder="précisez le fruit" style="visibility:hidden;" />
            </p>
            <p>
                <input type="submit" value="Valider" />
            </p>
        </form>

        <script>
            // quand on clique sur le bouton radio de autre l'input pour écrire apparait avec le focus et remplace le "autre"
            function saisieactive() {
                document.getElementById('texteautre').style.visibility="hidden";
                document.getElementById('nomfruit').style.visibility="visible";
                document.getElementById('nomfruit').focus();
            }

            // quand on clique sur un autre bouton radio l'input pour écrire disparait et est remplacé par "autre"
            function saisieinactive() {
                document.getElementById('nomfruit').style.visibility="hidden";
                document.getElementById('texteautre').style.visibility="visible";
            }

            // à la validation du formulaire on récupère la réponse cochée ou saisie
            function verif() {
                var reponse = "";
                for (i=0; i<document.fruitprefere.fruit.length; i++) {
                    if (document.fruitprefere.fruit[i].checked) {
                        reponse = document.fruitprefere.fruit[i].value;
                        if(reponse == "autre") {
                            reponse = document.fruitprefere.nomfruit.value;
                        }
                    }
                }
                alert("vous préférez " + reponse);
            }
        </script>
    </body>
</html>
0
hilor Messages postés 26 Date d'inscription mercredi 22 octobre 2014 Statut Membre Dernière intervention 4 octobre 2017
23 oct. 2014 à 23:51
Merci Ysabe_I, Nfois merci. ça marche et j'ai mis la zone en visible.

Que devrais-je changer dans le code, si je voulais saisir que du NUMERIQUE dans la zone de saisie? Désolé pour ce dérangement. Encore Merci
0
Ysabe_l Messages postés 12454 Date d'inscription vendredi 12 avril 2013 Statut Contributeur Dernière intervention 23 avril 2024 274
24 oct. 2014 à 00:12
De rien.

Pour mettre uniquement du numérique il faut mettre 
input type="number"
à la place de 
input type="text"
mais attention certains navigateurs ne reconnaîtront pas ce type et laisseront entrer n'importe quel texte, donc il faut quand même faire une vérification (en javascript à la validation puis en php en début de traitement).

Pour le
 input type="number"
et ses options : https://www.alsacreations.com/tuto/lire/1409-formulaire-html5-type-number.html
0

Discussions similaires

Où est la touche SHIFT sur mon clavier d'ordi ?
joe! -
fernando-_ytb -

18 réponses
Résolution d'une image 500 pixels largeur
sassou -
transat -

2 réponses
Vidéo : comment changer sa zone géographique ?
azerty_42 -
tiloli -

8 réponses
Bouton ON OFF, O ou I ?
Stargirlfr -
kaparzo23 -

12 réponses
Je n' arrive pas a activer la saisie vocale
Anna011290 -
Anna011290 -

4 réponses