Bonjour,
Je suis parti dans un développement de formulaire php dynamique. En fait, j'ai une liste de nombre de 1 à 5 qui permet de renseigner de 1 à 5 fois le même formulaire ( nom, prenom, adresse, tel, email).
En sélectionnant le nombre de personne total dans la liste , j'affiche le même nombre de div. J'ai donc un truc du genre
Code HTML :
<div id="div1" style=" width:520px; border:1px solid #FF9F00; visibility:hidden;margin-bottom:10px;">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="4">
<tr>
<td><p align="left"> Nom <span class="obli">*</span></p><input type="text" id="nom1"></td>
<td><p align="left"> Prénom <span class="obli">*</span></p><input type="text" id="prenom1"></td>
<td><p align="left"> Téléphone: <span class="obli">*</span></p><input type="text" id="telephone_fixe1"></td>
</tr>
</TABLE>
</div>
<div id="div2" style=" width:520px; border:1px solid #FF9F00; visibility:hidden;margin-bottom:10px;">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="4">
<tr>
<td><p align="left"> Nom <span class="obli">*</span></p><input type="text" id="nom2"></td>
<td><p align="left"> Prénom <span class="obli">*</span></p><input type="text" id="prenom2"></td>
<td><p align="left"> Téléphone: <span class="obli">*</span></p><input type="text" id="telephone_fixe2"></td>
</tr>
</TABLE>
</div>
...
Je gère ensuite le nombre de div à afficher en css en masquant les div quand le nombre de la liste est inférieur.
Si donc j'ai dans ma liste selectionné 2, j'affiche la div 1 et 2, et je masque les 3,4, et 5.
Code HTML :
<select name="nb" id="nb" >
<option onclick="document.getElementById('div1').style.visibility = 'visible';
document.getElementById('div2').style.visibility = 'hidden';
document.getElementById('div3').style.visibility = 'hidden'" value="1">1</option>
<option onclick="document.getElementById('div2').style.visibility = 'visible';
document.getElementById('div1').style.visibility = 'visible';
document.getElementById('div3').style.visibility = 'hidden'" value="2">2</option>
<option onclick="document.getElementById('div3').style.visibility = 'visible';
document.getElementById('div2').style.visibility = 'visible';
document.getElementById('div1').style.visibility = 'visible'" value="3">3</option>
</select>
Vous l'aurez peut être compris, c'est contraignant. Je dois créer 5 fois le même formulaire, et attribuer aux champs des noms différents(nom1,nom2,etc...). Idem pour la vérifications des champs en javascript et finalement l'insertion dans ma base de données.
Je cherche donc à optimiser mon formulaire ( en créer un dynamique) -> j'ai une seul fois le formulaire et les champs s'affichent autant de fois que la liste le précise. Mais je ne sais pas comment procéder.
Auriez-vous des liens ou des exemples indiquant comment arriver à ce résultat ? POurriez vous m'accorder un peu de votre aide ?
Merci d'avance pour vos réponses.