Sujet Précédent Sujet Suivant

Comment fractionner un long formulaire

Fermé
ghisloy Messages postés 89 Date d'inscription mercredi 12 novembre 2014 Statut Membre Dernière intervention 1 août 2016 - 31 juil. 2016 à 18:13
ghisloy Messages postés 89 Date d'inscription mercredi 12 novembre 2014 Statut Membre Dernière intervention 1 août 2016 - 1 août 2016 à 09:34
Bonjour,

je suis entrain de faire un site sur lequel je dois permettre aux étudiants de s'inscrire cependant, le formulaire est très long et je voudrais bien fractionner ça en 3 étapes. et utiliser des boutons comme Aller à la page suivante et Aller à la page précédente (afin de corriger une éventuelle erreur) sans recharger la page. après mes recherches, j'ai compris que c'est faisable avec ajax mais je n'ai aucune idée de comment m'y prendre et surtout comment garder les variables saisie jusqu'au 3eme form avant de les ajouter à la base

voici un bout de mon formulaire 


<form class="formulaire" onsubmit="return sendData(this, 1);" enctype="multipart/form-data" action="allajax.inc.php" method="post" name="ref_form" id="ref_form" style="padding:0 3px 0 0px; margin-left:8px;">
    <input type="hidden" name="leftMenu" value="inscription" />
    <input type="hidden" name="leftOption" value="enregistrement" />
    <input type="hidden" name="action" value="savevalues" />
    <input type="hidden" name="pjname" value="" />
    <input type="hidden" name="etape" value="1" />
    <input type="hidden" name="numero" value="" />
        <ul>
            <li style="margin:5px 0px;">
                <h2 style="font-size:150%; padding:5px 0;">FORMULAIRE OBLIGATOIRE (Etape 1)</h2>
                <span class="required_notification">* Champs requis</span>
            </li>
        </ul>
        <div style="text-align:center">
            <h1 style="font-size:5em;">Année BTS : <span style="color:#F00;">2016</span></h1>
            <hr>
        </div>
            <div class="table" style="width:100%; margin:10px 0;">
                <div class="table-row">
                    <div class="table-cell" style="width:60%">
                        <h2>Centre : <span style="color:#F00;">HECM AKPAKPA</span></h2>
                    </div>
                    <div class="table-cell" style="width:40%">
                        <h2>Département : <span style="color:#F00;">LITTORAL</span></h2>
                    </div>
                </div>
            </div>
            <ul>
                <li>
                    <label class="label1" for="filiere1">Filière choisie</label>
                    <select name="filiere1" id="filiere1" style="padding:5px; width:600px;" class="b">
                        <option value="-1">Sélectionnez la filière</option>
                        <option value='AS'>Assurances</option><option value='BA'>Banque et Finance d'Entreprise</option><option value='CE'>Communication d'Entreprise</option><option value='CG'>Comptabilite  Gestion</option><option value='CR'>Conducteurs Routiers</option><option value='EP'>Education et Pedagogie</option><option value='EL'>Electronique</option><option value='GC'>Genie Civil</option><option value='GT'>Geometre Topographe</option><option value='IMG'>Gestion de l'image</option><option value='GP'>Gestion de la Production</option><option value='SON'>Gestion du son</option><option value='HR'>Hotellerie Restauration</option><option value='IG'>Informatique de Gestion</option><option value='2IM'>Informatique Industrielle et Maintenance</option><option value='IEE'>Ingénierie et exploitation des équipements</option><option value='MAU'>Maintenance Automobile</option><option value='METP'>Maintenance d'Engins de TP et de Manutentions</option><option value='MRH'>Management des Ressources Humaines</option><option value='MAC'>Marketing et Action Commerciale</option><option value='MPP'>Montage et Post Production</option><option value='SBL'>Secretariat Bilingue</option><option value='SBQ'>Secretariat Bureautique</option><option value='TCOM'>Telecommunication</option><option value='TL'>Tourisme et Loisirs</option><option value='TT'>Transport Logistique</option>
                    </select>
 
                </li>
 
                <li>
                    <label class="label1" for="filiere2">Confirmez filière</label>
                    <select name="filiere2" id="filiere2" style="padding:5px; width:600px;" class="b">
                        <option value="-1">Sélectionnez la filière</option>
                        <option value='AS'>Assurances</option><option value='BA'>Banque et Finance d'Entreprise</option><option value='CE'>Communication d'Entreprise</option><option value='CG'>Comptabilite  Gestion</option><option value='CR'>Conducteurs Routiers</option><option value='EP'>Education et Pedagogie</option><option value='EL'>Electronique</option><option value='GC'>Genie Civil</option><option value='GT'>Geometre Topographe</option><option value='IMG'>Gestion de l'image</option><option value='GP'>Gestion de la Production</option><option value='SON'>Gestion du son</option><option value='HR'>Hotellerie Restauration</option><option value='IG'>Informatique de Gestion</option><option value='2IM'>Informatique Industrielle et Maintenance</option><option value='IEE'>Ingénierie et exploitation des équipements</option><option value='MAU'>Maintenance Automobile</option><option value='METP'>Maintenance d'Engins de TP et de Manutentions</option><option value='MRH'>Management des Ressources Humaines</option><option value='MAC'>Marketing et Action Commerciale</option><option value='MPP'>Montage et Post Production</option><option value='SBL'>Secretariat Bilingue</option><option value='SBQ'>Secretariat Bureautique</option><option value='TCOM'>Telecommunication</option><option value='TL'>Tourisme et Loisirs</option><option value='TT'>Transport Logistique</option>
                    </select>
                </li>
            </ul>
 
            <div class="table"><div class="table-row">
                <div class="table-cell" style="width:150px; vertical-align:top;">
                    <img id="imageProfil" src="<?php echo $URL;?>fichiers/membres/default.jpg" width="128" alt="Photo" />
                    <label class="cabinet" style="width:130px; background-position:-20px;"><input type="file" class="file" name="photo_identite" id="photo_identite" onchange="sendImage()"/></label>
                    <div id="waitMessage" style="padding-left:0px; vertical-align:middle;"> </div>
                </div>
                <div class="table-cell" style="width:555px; vertical-align:top; padding:0 3px;">
                    <ul><li>
                        <label class="label1" for="noms">Nom(s)</label>
                        <input value="" type="text" name="prefixe" id="prefixe" maxlength="4" class="tp12 b" style="text-align:right; text-transform:lowercase; width:45px;" />
                        <input style="width:370px; text-transform:uppercase; font-weight:bold;" name="noms" id="noms" value="" type="text" placeholder="Nom étudiant" required />
                    </li><li>
                        <label class="label1" for="prenoms">Prénom(s)</label>
                        <input style="width:420px; text-transform:capitalize;" name="prenoms" id="prenoms" value="" type="text" placeholder="Prénoms étudiant" required />
                    </li><li>
                        <label class="label1" for="nom_jeunefille">Nom de jeune fille</label>
                        <input style="width:420px; text-transform:uppercase; font-weight:bold;" name="nom_jeunefille" id="nom_jeunefille" value="" type="text" placeholder="Nom de jeune fille de l'étudiant" />
                    </li><li>
                        <label class="label2" for="noms">Téléphone  </label>
                        <input style="width:150px; margin-right:10px;" name="telephone" id="telephone" value="" type="text" placeholder="Téléphone" required />
                        <label class="label2" for="nationalite">Nationalité</label>
                        <select name="nationalite" id="nationalite" style="padding:5px; width:227px;" class="b">
                            <option selected="selected" value='BJ'>Beninoise</option><option value='BF'>Burkinabé</option><option value='BI'>Burundaise</option><option value='BR'>BURUNDAISE</option><option value='CM'>CAMEROUNAISE</option><option value='CA'>CENTREAFRICAINE</option><option value='CG'>CONGOLAISE</option><option value='FR'>FRANCAISE</option><option value='GB'>GABONAISE</option><option value='GH'>Ghaneenne</option><option value='CI'>IVOIRIENNE</option><option value='ML'>MALIENNE</option><option value='NA'>NIGERIANE</option><option value='NG'>Nigerienne</option><option value='OG'>OUGANDAISE</option><option value='SG'>SENEGALAISE</option><option value='SD'>SOUDANAISE</option><option value='TC'>TCHADIENNE</option><option value='TG'>Togolaise</option>                       </select>
                    </li><li>
                        <label class="label2" for="datenaissance">Né(e) le    </label>
                        <input value="" type="text" name="jour" id="jour" maxlength="2" class="tp12" style="text-align:right; width:30px; margin-left:14px;" />
                        <input value="" type="text" name="mois" id="mois" maxlength="2" class="tp12" style="text-align:right; width:30px;" />
                        <input value="" type="text" name="annee" id="annee" maxlength="4" class="tp12" style="text-align:right; width:50px;" />
                        <input type="checkbox"  name="nevers" id="nevers" style="width:auto; padding:0; margin:0; margin-left:10px;" /><label class="label2" for="nevers" style="cursor:pointer">Né (e) vers</label>
                        <select name="sexe" id="sexe" style="padding:5px; width:100px; margin-left:25px;" class="tp10">
                            <option value="-1">Sexe</option>
                            <option value="M" >Masculin</option>
                            <option value="F" >Féminin</option>
                        </select>
                    </li><li>
                        <label class="label2" for="lieunaissance">Lieu</label>
                        <input style="width:460px; text-transform:uppercase; margin-left:47px;" name="lieunaissance" id="lieunaissance" value="" type="text" placeholder="Lieu de naissance" required />
                    </li></ul>
                </div>
            </div></div>
            </fieldset>
            <fieldset><legend>II - SITUATION ACADEMIQUE</legend>
                <ul>
                    <li>
                        <label class="label2" for="annee_bac">Année et pays d'obtention du BAC</label>
                        <input style="width:90px;" name="annee_bac" id="annee_bac" maxlength="4" value="" type="text" placeholder="2014" required />
                        <select name="pays_bac" id="pays_bac" style="padding:5px; width:215px;" class="b">
                            <option value="-1">Choisir le pays</option>
                            <option selected="selected" value='BJ'>Bénin</option><option value='BF'>Burkina Faso</option><option value='BI'>Burundi</option><option value='BR'>BURUNDI</option><option value='CM'>CAMEROUN</option><option value='CA'>CENTREAFRIQUE</option><option value='CG'>CONGO</option><option value='CI'>COTE D'IVOIRE</option><option value='FR'>FRANCE</option><option value='GB'>GABON</option><option value='GH'>Ghana</option><option value='ML'>MALI</option><option value='NG'>Niger</option><option value='NA'>NIGERIA</option><option value='OG'>OUGANDA</option><option value='SG'>SENEGAL</option><option value='SD'>SOUDAN</option><option value='TC'>TCHAD</option><option value='TG'>Togo</option>
                        </select>
                        <label class="label2" for="serie_bac">Série</label>
                            <select name="serie_bac" id="serie_bac" style="padding:5px; width:125px;" class="b">
                                <option value="-1">Série BAC</option>
                                <option value="A" >A</option><option value="B" >B</option><option value="C" >C</option><option value="D" >D</option><option value="E" >E</option><option value="F1" >F1</option><option value="F2" >F2</option><option value="F3" >F3</option><option value="F4" >F4</option><option value="G1" >G1</option><option value="G2" >G2</option><option value="G3" >G3</option><option value="CAPA" >CAPA</option><option value="DTI" >DTI</option><option value="DEAT" >DEAT</option><option value="DUT" >DUT</option><option value="WAEC" >WAEC</option><option value="EAU-ASS" >EAU-ASS</option>
                            </select>
                    </li>
                </ul>
                <div>
                    <div style="display:block; margin:5px 0px; font-size:1.3em;" class="b">Autres diplomes obtenus : </div>
                    <div id="diplome_obtenus" style="display:block"><table width="100%" border="1" cellspacing="1" cellpadding="2" style="clear: both;margin-bottom: 6px !important;max-width: 100%;background-color: transparent;border-collapse: collapse;border-spacing: 0px;font-size: 1.2em;">
                        <tr>
                            <td width="5%" class="b tp15" align="center" valign="middle">N°</td>
                            <td class="b tp15" align="center" valign="middle">Titre</td>
                            <td width="8%" class="b tp15" align="center" valign="middle">Année</td>
                            <td width="25%" class="b tp15" align="center" valign="middle">Etablissement</td>
                            <td width="20%" class="b tp15" align="center" valign="middle">Pays</td>
                        </tr>
                        <tr>
                            <td align="center" valign="middle"><b>1</b></td>
                            <td align="center" valign="middle"><input value="" style="width:290px; font-size:1em; padding:3px 0; text-transform:uppercase;" name="diplome_titre[]" type="text" /></td>
                            <td align="center" valign="middle"><input value="" style="width:60px; font-size:1em; text-transform:uppercase;" name="diplome_annee[]" maxlength="4" min="1986" max="2016" type="number" /></td>
                            <td align="center" valign="middle"><input value="" style="width:170px; font-size:1em; padding:3px 0; text-transform:uppercase;" name="diplome_etablissement[]" type="text"/></td>
                            <td align="center" valign="middle"><input value="" style="width:140px; font-size:1em; padding:3px 0; text-transform:uppercase;" name="diplome_pays[]" type="text" /></td>
                        </tr><tr>
                            <td align="center" valign="middle"><b>2</b></td>
                            <td align="center" valign="middle"><input value="" style="width:290px; font-size:1em; padding:3px 0; text-transform:uppercase;" name="diplome_titre[]" type="text" /></td>
                            <td align="center" valign="middle"><input value="" style="width:60px; font-size:1em; text-transform:uppercase;" name="diplome_annee[]" maxlength="4" min="1986" max="2016" type="number" /></td>
                            <td align="center" valign="middle"><input value="" style="width:170px; font-size:1em; padding:3px 0; text-transform:uppercase;" name="diplome_etablissement[]" type="text"/></td>
                            <td align="center" valign="middle"><input value="" style="width:140px; font-size:1em; padding:3px 0; text-transform:uppercase;" name="diplome_pays[]" type="text" /></td>
                        </tr><tr>
                            <td align="center" valign="middle"><b>3</b></td>
                            <td align="center" valign="middle"><input value="" style="width:290px; font-size:1em; padding:3px 0; text-transform:uppercase;" name="diplome_titre[]" type="text" /></td>
                            <td align="center" valign="middle"><input value="" style="width:60px; font-size:1em; text-transform:uppercase;" name="diplome_annee[]" maxlength="4" min="1986" max="2016" type="number" /></td>
                            <td align="center" valign="middle"><input value="" style="width:170px; font-size:1em; padding:3px 0; text-transform:uppercase;" name="diplome_etablissement[]" type="text"/></td>
                            <td align="center" valign="middle"><input value="" style="width:140px; font-size:1em; padding:3px 0; text-transform:uppercase;" name="diplome_pays[]" type="text" /></td>
                        </tr>                 </table>
                    </div>
                </div>
                <ul><li>
                    <label class="label2" for="est_alle_au_bts">Vous êtes vous déjà présenté au BTS (<i><acronym title="Cochez la mention correspondante">1</acronym></i>)</label>
                    <select onChange="$('#div_aller_bts').slideToggle(500);" name="est_alle_au_bts" id="est_alle_au_bts" style="padding:5px; width:115px;" class="b">
                        <option value="non" >NON</option>
                        <option value="oui" >OUI</option>
                    </select>
                    <div id="div_aller_bts" style="padding-top:5px; display:none;"><label class="label2" for="nombre_bts">Si Oui, combien de fois ? </label>
                    <input style="width:90px;" name="nombre_bts" id="nombre_bts" maxlength="4" value="" type="text" placeholder="0" />
                    <label class="label2">fois.</label>
                    <label class="label2" style="display:block;">Indiquez la ou les filière(s)</label>
                    <textarea name="liste_filiere" style="width:700px; height:100px; max-width:700px; max-height:100px;" class="c tp15 b"></textarea></div>
                </li><li>
                    <label class="label2" for="admissibilite_bts">Bénéficiez-vous d'une admissibilité au BTS ? (<i><acronym title="Cochez la mention correspondante">1</acronym></i>)</label>
                    <select onChange="$('#cons_admiss').slideToggle(500);" name="admissibilite_bts" id="admissibilite_bts" style="padding:5px; width:115px;" class="b">
                        <option value="non" >NON</option>
                        <option value="oui" >OUI</option>
                    </select></li><div id="cons_admiss" style="display:none;"><li>
                    <label class="label2" for="filiere_admisibilite_bts">Si Oui, indiquez la filière </label>
                    <select name="filiere_admisibilite_bts" id="filiere_admisibilite_bts" style="padding:5px; width:540px;" class="b">
                        <option value="-1">**************</option>
                        <option value='AS'>Assurances</option><option value='BA'>Banque et Finance d'Entreprise</option><option value='CE'>Communication d'Entreprise</option><option value='CG'>Comptabilite  Gestion</option><option value='CR'>Conducteurs Routiers</option><option value='EP'>Education et Pedagogie</option><option value='EL'>Electronique</option><option value='GC'>Genie Civil</option><option value='GT'>Geometre Topographe</option><option value='IMG'>Gestion de l'image</option><option value='GP'>Gestion de la Production</option><option value='SON'>Gestion du son</option><option value='HR'>Hotellerie Restauration</option><option value='IG'>Informatique de Gestion</option><option value='2IM'>Informatique Industrielle et Maintenance</option><option value='IEE'>Ingénierie et exploitation des équipements</option><option value='MAU'>Maintenance Automobile</option><option value='METP'>Maintenance d'Engins de TP et de Manutentions</option><option value='MRH'>Management des Ressources Humaines</option><option value='MAC'>Marketing et Action Commerciale</option><option value='MPP'>Montage et Post Production</option><option value='SBL'>Secretariat Bilingue</option><option value='SBQ'>Secretariat Bureautique</option><option value='TCOM'>Telecommunication</option><option value='TL'>Tourisme et Loisirs</option><option value='TT'>Transport Logistique</option>                    </select>
                    <label class="label2" for="conserver_bts" style="">Désirez-vous la conserver ? (<i><acronym title="Cochez la mention correspondante">1</acronym></i>)</label>
                    <select name="conserver_bts" id="conserver_bts" style="padding:5px; width:115px;margin-top:5px;" class="b">
                        <option value="non" >NON</option>
                        <option value="oui" >OUI</option>
                    </select></li></div></ul>
            </fieldset>
            <div><i><b>1</b></i> : <b>Cochez la mention correspondante</b></div>
        </form>


A voir également:

1 réponse

Réponse 1 / 1
byron
1 août 2016 à 01:58
Salut,

pas spécialement besoin d'AJAX pour cela. AJAX servirais plutôt si vous avez besoin de changer le formulaire ou ses contenus en fonction des choix qui sont faits et alimentés par une base de données(ou autre).

Il vous suffit soit d'enregistrer 3 formulaire séparément avant de les envoyer au serveur ou encore mieux en n'utilisant qu'un seul formulaire dont vous affichez les parties successivement.

Exemple d'analyse fonctionnelle sommaire:

première partie du formulaire:
affiche le formulaire et le bouton suivant.

en cliquant sur suivant on masque la partie affichée pour afficher la seconde partie.

seconde partie du form:
elle comprends la seconde partie du formulaire et les boutons précédents et suivant.
le bouton précédent masque la deuxième partie pour afficher à nouveau la première..
le bouton suivant masque la seconde partie pour afficher la troisième.

troisième partie:
elle contient la fin du formulaire, un bouton précédent et le bouton d'envoi.
le bouton précédent fait comme précédemment en masquant la troisième pour afficher la seconde zone.
le bouton envoi qui soumet le formulaire pour l'envoi.


Attention Important:
_quand je parle de masquer une partie de la zone il existe de nombreux moyens. Ceux ci ne sont pas tous recommandés car nuisent à l'accessibilité du site (ex: pour les mal voyants) et plus généralement au référencement.

_si votre formulaire est trop long et imposant dans son affichage il y a des solutions meilleures. La première est de faire simplement un formulaire qui s'afficher sur plusieurs écran verticaux, laissant libre choix et étant l'utilisation normale que l'utilisateur a d'Internet, en défilant le contenu avec la barre à droite dans la fenêtre de son navigateur.
Un formulaire risque d'être trop long et rébarbatif pour son but? Il faut clairement revoir celui ci dans la mesure du possible pour le simplifier ou alors il n'est pas trop long et rien n'est superflu dans ce cas la longueur et la lourdeur de remplir celui ci est justifié et n'a pas à être cachée.

Je serais vous je penserais surtout à améliorer la mise en page pour rendre celui ci plus claire et plus compacte si la taille de celui vous paraît trop imposante. Surtout que la mise en page avec "table" ne doit plus se faire depuis une dizaine d'années et du coup rends la présentation du formulaire avec label inutile(les contenus de table sont référencés en tant que données tabulaires, donc par le titre essentiellement qui correspond sà une liste sous la forme tabulaire: ex résultats des matches de foot, liste des résultats des 300 premiers arrivés du marathon, liste de l'arbre de Noël du comité d'entreprise avec nom de la famille des employés et âge et sexe des enfants).

Bref table c'est pour une table de données précise mais pas pour l'utilisation que vous en faites et certainement pas pour la mise en page de contenu qui on,t déjà leur propres éléments prévus pour(label, input, etc...).
1
ghisloy Messages postés 89 Date d'inscription mercredi 12 novembre 2014 Statut Membre Dernière intervention 1 août 2016
Modifié par ghisloy le 1/08/2016 à 09:34
Bonjour byron
merci pour ta réponse. par rapport a table, j'ai compris je les enlèverai cependant, je n'ai pas bien saisie comment gérer pour cacher les parties du form au clic de certains bouton
stp pourrais tu me donner un exemple avec ce petit form 

<form action="#" method="post">
    <div class="formPart">
        <input type="text" value="Block n°1"/>
    </div>
    <div class="formPart">
        <input type="text" value="Block n°2"/>
    </div>
    <div class="formPart">
        <input type="text" value="Block n°3"/>
    </div>

</form>
0

Discussions similaires

3 bip long 2 bip courts
bgielel -
Bgiebgielel -

14 réponses
Civilité (Mr,Mme,Melle) n' apparait pas lors de l'exécution du formulaire
azixe -
cs_Le Pivert -

1 réponse
Je n'arrive plus à récuperer mon compte Outlook
gnulinux_ -
laure -

4 réponses
PC 2 bips longs suivis de 2 bips courts au demarrage
amiseck -
billmaxime -

26 réponses