Afficher un champ si clic sur bouton

rolly41 Messages postés 281 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 :
<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

  1. Alain_42 Messages postés 5413 Statut Membre 904
     
    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