Zone de saisie à liée un bouton radio

alainpguimao -
Ysabe_l Messages postés 11950 Date d'inscription Statut Contributeur Dernière intervention - 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"

Afficher la suite

A voir également:

Zone de saisie à liée un bouton radio
Station de radio - Télécharger - Médias et Actualité
Saisie gestuelle iphone - Guide
Zone de telechargement - Accueil - Outils
Saisie intuitive - Guide
Bouton shift pc - Forum Jeux vidéo

2 réponses

Réponse 1 / 2
canarder Messages postés 2034 Statut Membre 357

Tu dois gérer ça en Javascript je pense.
0
1. hilor Messages postés 26 Date d'inscription Statut Membre Dernière intervention
  
  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

Ysabe_l Messages postés 11950 Date d'inscription Statut Contributeur Dernière intervention 277

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>

hilor Messages postés 26 Date d'inscription Statut Membre Dernière intervention

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 11950 Date d'inscription Statut Contributeur Dernière intervention 277
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

Zone de saisie à liée un bouton radio

2 réponses

Discussions similaires

Newsletters