I am loading a data series with PHP in a table from the Database
and according to the selected data I am opening a Modal that includes sections to add images and others.
Selecting the first data in the list opens the modal and allows the selection of the elements, but when closing and opening a second element it no longer allows it, it is displayed incorrectly.
Code to generate the Table:
<div class="card">
<table>
<thead>
<tr>
<th>Nombre1</th>
<th>Nombre1</th>
<th>Nombre1</th>
<th>Nombre1</th>
<th>Nombre1</th>
<th>Nombre1</th>
<th>Nombre1</th>
<th>Nombre1</th>
</tr>
</thead>
<tbody>
<?php if (!empty($result)): ?>
<?php foreach ($result as $dato): ?>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<?php if ($dato->estatusSolicitudId == 17): ?>
<?php $numSolicitud = $dato->solicitudId ?>
<td>
<button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#modal<?php echo $numSolicitud;?>">ACTIVAR</button>
<!-- Inicia el Modal -->
<div id="modal<?php echo $numSolicitud; ?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header header-color">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">TÉRMINOS Y CONDICIONES</h4>
</div>
<!-- Modal Body -->
<div class="modal-body body-color">
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="header bg-teal text-center">
<label>CREDENCIAL PARTE FRONTAL</label>
</div>
<div class="row">
<div class="col-sm-6">
<div id="preview"></div>
</div>
<div class="col-sm-6">
<form id="subir" method="POST" enctype="multipart/form-data">
<div class="form-group text-center">
<label for="imagen" class="custom-file-upload">
<i class="fa fa-image"></i> Seleccionar imagen
</label>
<input id="imagen" name="imagen" type="file"/>
</div>
</form>
</div>
<div class="text-center" id="respuesta"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="header bg-teal text-center">
<label>CREDENCIAL PARTE POSTERIOR</label>
</div>
<div class="row">
<div class="col-sm-6">
<div id="preview2"></div>
</div>
<div class="col-sm-6">
<form id="subir2" method="POST" enctype="multipart/form-data">
<div class="form-group text-center">
<label for="imagen2" class="custom-file-upload">
<i class="fa fa-image"></i> Seleccionar imagen
</label>
<input id="imagen2" name="imagen2" type="file" />
</div>
</form>
</div>
<div class="text-center" id="respuesta2"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<h5 class="card-title text-center">Informacion</h5>
<!-- Mas Informacion-->
<label><?php echo $numSolicitud; ?></label>
</div>
</div>
</div>
</div>
<form role="form" id="formulario">
<div class="form-check check-margin">
<input type="checkbox" id="checkAceptar" name="checkAceptar" value="10">
<label class="form-check-label condition-color" for="checkAceptar">He leído y acepto los términos y condiciones.</label>
<p class="statusCheck"></p>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" id="btn-cerrar" data-dismiss="modal">CERRAR</button>
<button type="button" class="btn btn-success" id="btn-ingresar">ACEPTAR</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Termina el Modal -->
</td>
<td>
<span class="label label-danger" >No activada</span>
</td>
<?php else: ?>
<td>
<span class="label label-success">ACTIVADA</span>
</td>
<td>
<?php $poliza= $dato->solicitudId;
$encrypt = $funciones->encrypt($poliza);?>
<a href="accountStatus.php?poliza=<?php echo $encrypt; ?>" >
<i class="material-icons">monetization_on</i>
</a>
</td>
<?php endif ?>
</tr>
<?php endforeach ?>
<?php else: ?>
<tr>
<td class="bg-danger text-center" colspan="8">No se encontraron datos.</td>
</tr>
<?php endif ?>
</tbody>
</table>
</div>
CSS to visualize the images:
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 0px solid #ccc;
display: inline-block;
padding: 12px 12px;
cursor: pointer;
}
#preview {
/*border:2px solid #ddd;*/
padding:5px;
border-radius:2px;
background:#444343;
max-width:200px;
margin-top: 10px;
margin-left: 10px;
}
#preview img {
width:100%;
display:block;
}
#preview2 {
/*border:1px solid #ddd;*/
padding:5px;
border-radius:2px;
background:#444343;
max-width:200px;
margin-top: 10px;
margin-left: 10px;
}
#preview2 img {
width:100%;
display:block;
}
JS File:
$(document).on('ready',function(){
$("#preview").hide();
document.getElementById("imagen").onchange = function(e) {
let reader = new FileReader();
reader.onload = function(){
$("#preview").show();
let preview = document.getElementById('preview'),
image = document.createElement('img');
image.src = reader.result;
preview.innerHTML = '';
preview.append(image);
};
reader.readAsDataURL(e.target.files[0]);
}
$("#preview2").hide();
document.getElementById("imagen2").onchange = function(e) {
let reader = new FileReader();
reader.onload = function(){
$("#preview2").show();
let preview = document.getElementById('preview2'),
image = document.createElement('img');
image.src = reader.result;
preview.innerHTML = '';
preview.append(image);
};
reader.readAsDataURL(e.target.files[0]);
}
});
Correct Image e Incorrect image
Any way to fix it?