Afficher un champ si clic sur bouton
rolly41
Messages postés
244
Date d'inscription
Statut
Membre
Dernière intervention
-
Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention -
Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention -
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
- Bouton reinitialisation pc - Guide
- Diagnostic bouton photo - Accueil - Outils
- Comment débloquer un bouton enfoncé - Forum Samsung
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 />';
}
}
?>