Afficher un champ si clic sur bouton

Fermé
rolly41 Messages postés 242 Date d'inscription dimanche 16 novembre 2008 Statut Membre Dernière intervention 18 septembre 2023 - 9 févr. 2013 à 11:58
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 - 9 févr. 2013 à 14:54
Bonjour,

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

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
9 févr. 2013 à 14:54
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 />';
	}
}
?>
0