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
A voir également:
- Afficher un champ si clic sur bouton
- Windows 11 clic droit afficher plus d'options par défaut - Guide
- Comment faire une capture d'écran sur un samsung sans bouton ? - Guide
- Diagnostic bouton photo - Accueil - Outils
- Bouton shift pc - Forum Jeux vidéo
- Bouton home clavier ✓ - Forum PC portable
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 />';
}
}
?>