Afficher un champ si clic sur bouton
rolly41
Messages postés
281
Statut
Membre
-
Alain_42 Messages postés 5413 Statut Membre -
Alain_42 Messages postés 5413 Statut Membre -
Bonjour,
Je souhaiterais afficher un champ input si l'utilisateur clique sur un bouton.
Exemple :
Si l'utilisateur clique sur un bouton "+", une autre ligne s'ajoutera en dessous de la dernière ligne du tableau (avec des noms d'input différent pour éviter d'avoir des erreurs dans la requête).
Merci d'avance
Je souhaiterais afficher un champ input si l'utilisateur clique sur un bouton.
Exemple :
<table width="90%" border="1""> <tr> <td align="center" width="33%">Nombre de places</td><td align="center" width="34%">Zonne de l'enclos</td><td align="center" width="33%">Position exacte de l'enclos</td> </tr> <tr> <td align="center" width="33%"><input type="text" name="places-enclos" /></td><td align="center" width="34%"><input type="text" name="zonne-enclos" /></td><td align="center" width="33%"><input type="text" name="position-enclos" /></td> </tr> </table>
Si l'utilisateur clique sur un bouton "+", une autre ligne s'ajoutera en dessous de la dernière ligne du tableau (avec des noms d'input différent pour éviter d'avoir des erreurs dans la requête).
Merci d'avance
1 réponse
-
une solution :voir commentaires:
<script type="text/javascript"> function AddOneRow(){ var newRow = document.getElementById('table_1').insertRow(-1); var newCell_0 = newRow.insertCell(0); newCell_0.innerHTML = '<input type="text" name="places-enclos[]" />'; var newCell_1 = newRow.insertCell(1); newCell_1.innerHTML = '<input type="text" name="zonne-enclos[]" />'; var newCell_2 = newRow.insertCell(2); newCell_2.innerHTML = '<input type="text" name="position-enclos[]" />'; } </script> <style type="text/css"> /* centrage des td*/ td { text-align: center; } </style> <table id="table_1" width="90%" border="1"> <tr> <td width="33%">Nombre de places</td><td width="34%">Zonne de l'enclos</td><td width="33%">Position exacte de l'enclos</td> </tr> <tr> <td><input type="text" name="places-enclos[]" /></td><td><input type="text" name="zonne-enclos[]" /></td><td><input type="text" name="position-enclos[]" /></td> </tr> </table> <input type="button" name="ajouter_ligne" value="Ajouter une ligne" onclick="AddOneRow();" /> alignement géré en CSS en mettant le name sous forme places-enclos[] cela evite d'avoir a rajouter un indice et pour récupérer en php $_POST['places-enclos'] est un array idem $_POST['zonne-enclos'] $_POST['position-enclos'] sont des array il suffit de parcourir $_POST['places-enclos'] et chaque index de cet aray correspnd à celui des deux autres <?php if(sizeof($_POST['places-enclos'])>0){ foreach($_POST['places-enclos'] as $no_ligne=>$value){ echo 'Ligne: '.$no_ligne.'==>> '.$_POST['places-enclos'][$no_ligne].' '$_POST['zonne-enclos'][$no_ligne].' '.$_POST['position-enclos'][$no_ligne].'<br />'; } } ?>