8791 sujets

Développement web côté serveur, CMS

Formulaire-case à cocher liée à de nouveaux champs

Bonjour à tous,

J'ai créé un formulaire de réservation de randonnées sur mon site ( www.corambe.com/randos/réservation.html ).
Je voudrais le modifier, l'améliorer. Je sais que cela existe mais je n'arrive pas à trouver comment mettre en place cette fonction, ni avec google ni avec la fonction 'Rechercher'.
Voilà ce que je cherche à obtenir : si on coche la case 1 (parmi un choix de 5), on aura d'autres champs, particuliers à cette case, qui apparaîtront en dessous. Et ça pour chacune des cases à cocher.
Savez vous comment faire ça?
J'ai pensé mettre un lien vers une autre page comprenant les champs correspondant au bouton coché, mais ça pose le problème de l'apparition de la nouvelle page à un certain niveau dans la fenêtre (ça, ça ne doit pas être trop compliqué...), mais surtout qu'il faudrait que dans la nouvelle page ouverte, les champs déjà renseignés soient inscrits dans les champs (que le visiteur n'ait pas à les retaper).
Svp aidez moi... !!!
Merci d'avance !
oui, je sais que c'est pas bien... Smiley confused
ça fait un moment que je dois m'en occuper...
Mais bon ça joue pas sur mon problème du jour
Quelques (autres) remarques pour commencer:

- Puisque les visiteurs sont censés choisir une rando dans la liste, utilise des input type radio plutot que check.
- Utilise la balise label pour le texte associé chaque case


Voici ton formulaire quelque peu reformaté, de manière plus logique, conforme, simple et accessible Smiley cligne 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Document sans nom</title>
    <style type="text/css">
        fieldset {
            display: block;
            margin: 0 0 1em 0;
            border: 0 solid #FFFFFF;
            border-top: 1px solid #000000;
            padding: 0 1em 1em 1em;
        }

        input, select {
            position: relative;
            top: -1.4em;
            left: 200px;
            display: block;
        }
        label {
            clear: both;
            float: left;
            display: block;
            
            font-weight: bold;
        }
        label span {
            display: block;
            width: 200px;
            text-align: right;
        }
        input.submit, textarea {
            clear: both;
            top: 0;
        }
        textarea, label.textarea span {
            width: 400px;
        }


    </style>
</head>
<body>
    <form>
        <fieldset>
            <legend>Information g&eacute;n&eacute;rales</legend>
            <label for="nom">
                <span>Nom</span>
                <input type="text" name="nom" id="nom" value="" />
            </label>
            <label for="email">
                <span>Email</span>
                <input type="text" name="email" id="email" value="" />
            </label>
            <label for="telephone">
                <span>T&eacute;l&eacute;phone</span>
                <input type="text" name="telephone" id="telephone" value="" />
            </label>
        </fieldset>
        <fieldset>
            <legend>Choix d'une randon&eacute;e</legend>
            <label for="formule1">
                <span>Balade d'une heure et demi</span>
                <input type="radio" name="formule[]" id="formule1" value="1" />
            </label>
            <label for="formule2">
                <span>Balade d'une demi journ&eacute;e</span>
                <input type="radio" name="formule[]" id="formule2" value="2" />
            </label>
            <label for="formule3">
                <span>Randonn&eacute;e d'une journ&eacute;e</span>
                <input type="radio" name="formule[]" id="formule3" value="3" />
            </label>
            <label for="formule4">
                <span>Randonn&eacute;e d'un week-end</span>
                <input type="radio" name="formule[]" id="formule4" value="4" />
            </label>
            <label for="formule5">
                <span>Journ&eacute;e gastronomique</span>
                <input type="radio" name="formule[]" id="formule5" value="5" />
            </label>
            <label for="formule6">
                <span>Randonn&eacute;e anniversaire</span>
                <input type="radio" name="formule[]" id="formule6" value="6" />
            </label>
            <label for="formule7">
                <span>Balade botanique</span>
                <input type="radio" name="formule[]" id="formule7" value="7" />
            </label>
            <label for="participants">
                <span>Nombre de participants</span>
                <select name="participants" id="participants">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select>
            </label>
            <label for="date">
                <span>Date de la randonn&eacute;e</span>
                <input type="text" name="date" id="date" value="jj/mm/aaaa" />
            </label>
        </fieldset>
        <fieldset>
            <legend>Pr&eacute;cisions</legend>
            <label for="precisions" class="textarea">
                <span>Si vous d&eacute;sirez ajouter des pr&eacute;cisions &agrave; votre r&eacute;servation</span>
                <textarea name="precisions" id="precisions"></textarea>
            </label>
            <input class="submit" type="submit" value="R&eacute;server" />
        </fieldset>
    </form>


Ensuite, quels sont les éléments qui doivent varier et selon quels critères?
oh, merci beaucoup !!!
En fait ce que je voudrais ajouter, c'est le fait que si le visiteur a choisi par exemple 2 personnes pour la rando, en dessous il y a des champs qui 'apparaissent' , avec :

-1er participant => Menu déroulant 'âge' (adulte, ado, enfant de moins de 10 ans, enfant de plus de 10 ans) et autre menu déroulant 'niveau d'équitation' (première fois à cheval, cavalier occasionnel, cavalier régulier, cavalier confirmé)
-2ème participant => Menu déroulant 'âge' (adulte, ado, enfant de moins de 10 ans, enfant de plus de 10 ans) et autre menu déroulant 'niveau d'équitation' (première fois à cheval, cavalier occasionnel, cavalier régulier, cavalier confirmé)

Voilà...
Bonjour corambe,


ce que tu essaies de faire est possible, il faut utiliser JavaScript pour modifier la page en fonction du choix de l'utilisateur. Note qu'il faut également prévoir le comportement si JS n'est pas disponible sur le navigateur de ton visiteur (traitement côté serveur avec plusieurs étapes, ou suppression pure et simple des options supplémentaires ?)

Ce n'est pas très compliqué à faire, mais pas évident non plus si tu n'as n'y connais rien en JS Smiley ohwell
Bon donc depuis hier j'ai avancé, réussi à mettre des div que je cache ou pas, donc le problème dont je parlais hier est complètement résolu.
Par contre, j'ai utilisé le modèle du formulaire de Calak, qui est très bien, mais j'ai encore un souci par rapport à ça :
Quand je reçois le mail, tous les champs sont renseignés, sauf celui des input type radio, où à la place de la valeur, il y a marqué :'array'.
Je ne comprend pas du tout pourquoi ni ce que je peux faire pour changer ça...

Je vous met le code à cet endroit.

  <fieldset>
  <legend>Choix d'une randonnée</legend>
  <label for="formule8"><span>Balade
de 45 minutes</span>
  <input name="formule[]" id="formule8" value="8"
 type="radio"></label><label for="formule1"><span>Balade
d'une heure et
demie</span>
  <input name="formule[]" id="formule1" value="1"
 type="radio"></label><label for="formule2"><span>Balade
d'une demie
journée</span>
  <input name="formule[]" id="formule2" value="2"
 type="radio"></label><label for="formule3"><span>Randonnée
d'une journée</span>
  <input name="formule[]" id="formule3" value="3"
 type="radio"></label><label for="formule4"><span>Randonnée
d'un week-end</span>
  <input name="formule[]" id="formule4" value="4"
 type="radio"></label><label for="formule5"><span>Journée
gastronomique</span>
  <input name="formule[]" id="formule5" value="5"
 type="radio"></label><label for="formule6"><span>Randonnée
anniversaire</span>
  <input name="formule[]" id="formule6" value="6"
 type="radio"></label><label for="formule7"><span>Balade
botanique</span>
  <input name="formule[]" id="formule7" value="7"
 type="radio"></label></fieldset>

J'ai essayé de mettre des valeurs entre les crochets de "formule[]", mais ça ne change rien...
Bonjour.

Tes input sont de type radio, donc un seul choix possible. dans le champ name de tes input type radio mets juste 'formule' et non 'formule[]'.

Si tu mets 'formule[]', le script de traitement du formulaire reçoit un tableau (un array) pouvant contenir une ou plusieurs valeurs. Et il faut faire un petit traitement spécifique pour accéder à chaque valeur.

Mais dans ton cas, avec les input radio, tu envoi au script de traitement qu'une seule valeur. donc c'est pas la peine de mettre cette valeur dans un tableau.

ça devrai fonctionner correctement si tu mets juste 'formule' dans tous les champs name de tes input radio .


<fieldset>

  <legend>Choix d'une randonnée</legend>

  <label for="formule8"><span>Balade

de 45 minutes</span>

  <input name="formule" id="formule8" value="8"

 type="radio"></label><label for="formule1"><span>Balade

d'une heure et

demie</span>

  <input name="formule" id="formule1" value="1"

 type="radio"></label><label for="formule2"><span>Balade

d'une demie

journée</span>

  <input name="formule" id="formule2" value="2"

 type="radio"></label><label for="formule3"><span>Randonnée

d'une journée</span>

  <input name="formule" id="formule3" value="3"

 type="radio"></label><label for="formule4"><span>Randonnée

d'un week-end</span>

  <input name="formule" id="formule4" value="4"

 type="radio"></label><label for="formule5"><span>Journée

gastronomique</span>

  <input name="formule" id="formule5" value="5"

 type="radio"></label><label for="formule6"><span>Randonnée

anniversaire</span>

  <input name="formule" id="formule6" value="6"

 type="radio"></label><label for="formule7"><span>Balade

botanique</span>

  <input name="formule" id="formule7" value="7"

 type="radio"></label></fieldset>
Tout à fait lymanss, j'avais pas fait attention.

J'avais retravaillé sur son script où à la base, c'était des check.... Smiley langue

Merci de la correction ^^
Sujet clos
Aller à