I am doing an exercise in which you must select the months you want to pay by selecting the corresponding checkbox. The table is generated from a database query. Therefore, it can have one or several records, so I don't know how to assign one identificador
to the row from which to take the information. The intention of all this is that before performing the operations on the server side, the program shows the summary of what is going to be paid in a modal (img 1).
id date cost select 1 January 35.50 $ ☐ February 2 50.00 $ ☐ March 3 $20.50 ☐ April 4 75.00 $ ☐ May 5 10.00 $ ☐ June 6 $15.00 ☐
It occurs to me that I could do the following in the id
del <td>
:
<td id='fecha[]'><?echo $fila['fecha']?></td>
with this the id would have a different identifier than the others, but from there with javascript I don't know how to go through that array fecha[]
to access the information it has.
The program code is as follows.
$datos = $con->query("SELECT * FROM pago");
if(isset($_POST['btnEnviar'])){
if(!empty($_POST['fecha'])){
?>
<div class="alert alert-success">
Se a realizado el pago de :
<?
foreach ($_POST['fecha'] as $key) {
echo '<ul><li>'.$key . '</li></ul>';
}
?>
</div>
<?
}else{
?>
<div class="alert alert-danger">
No a seleccionado nada!
</div>
<?
}
}
?>
<div class="container">
<div class="col-lg-5">
<form class="" action="<?echo $_SERVER['PHP_SELF']?>" method="post" id="formulario">
<table class="table table-bordered table-hover" >
<thead>
<tr class="warning">
<th>id</th>
<th>fecha</th>
<th>costo</th>
<th>seleccione</th>
</tr>
</thead>
<tbody>
<?
if(!empty($datos)){
while($fila = mysqli_fetch_array($datos)){
?>
<tr>
<td><?echo $fila['id']?></td>
<td><?echo $fila['fecha']?></td>
<td><?echo $fila['costo']?> <b>$</b></td>
<td>
<input type="checkbox" name="fecha[]" value="<?echo $fila['fecha']?>">
</td>
</tr>
<?
}
}
?>
</tbody>
</table>
<div class="text-center">
<span id="btn" class="btn btn-success" data-target="#modal-pagar" data-toggle="modal">Pagar</span>
</div>
<div class="modal fade modal-default" id="modal-pagar" tabindex="-1" role="dialog" aria-labelledby=""
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="">Resumen de pago</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<span class="btn btn-default">Cancelar</span>
<button type="submit" name="btnEnviar" class="btn btn-success">Pagar</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
btn = $('#btn');
mes = "<input type='text' value='Abril' class=''>";
costo = "<input type='text' value='75$' class=''>";
total= "<h4>Total a pagar <span class='text-success'>75 $</span></h4>";
btn.click(function(){
$('.modal-body').append(mes,costo,total);
});
});
</script>
</body>
</html>
It might be easy but I have no idea how to capture the values from the row and present them in the modal.
1 Answers