Enviar valores a una ventana modal usando jQuery

Este tutorial te mostraremos  cómo enviar valores a una ventana modal usando jQuery. Esto es más aplicable si deseas usar jQuery cuando edites los datos de una tabla MySQL usando Bootstrap Modal.


Creando nuestra base de datos

El primer paso es crear nuestra base de datos.
1. Abre phpMyAdmin.
2. Haga clic en bases de datos, cree una base de datos y asignarle el nombre que desees, para este tutorial nosotros la hemos llamado “test_pass_modal”, pero tu puedes nombrarla como desees .
3. Después de crear una base de datos, haz clic en la pestaña importar, luego selecciona el archivo llamado “test_pass_modal”, dicho archivo se encuentra en el directorio root de nuestro tutorial.

Ver la imagen a continuación para obtener instrucciones detalladas sobre la importación de tablas para nuestra base de datos.

Creando nuestra conexión

A continuación, crearemos nuestra conexión a la base de datos. Esto nos servira para conectarnos a nuestra base de datos y de esa manera poder listar los registros que se encuentren en la tabla. Hemos nombrado dicho archivo: conn.php

<?php
 
//MySQLi Procedural
$conn = mysqli_connect("localhost","root","","test_pass_modal");
if (!$conn) {
	die("Connection failed: " . mysqli_connect_error());
}
 
?>

Listando los registros

 Para listar los registros almancenados en la tabla “user“, vamos a crear el archivo index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Enviar valores a una ventana modal usando jQuery</title>
	
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	
</head>
<body>
<div class="container">
	<div style="height:50px;"></div>
	<div class="well">
	<center><h2>Enviar valores a una ventana modal usando jQuery</h2></center>
	<div style="height:10px;"></div>
	<table width="100%" class="table table-striped table-bordered table-hover">
		<thead>
			<th>Nombres</th>
			<th>Apellidos</th>
			<th>Dirección</th>
			<th>Acciones</th>
		</thead>
		<tbody>
		<?php
			include('conn.php');
			$query=mysqli_query($conn,"select * from `user`");
			while($row=mysqli_fetch_array($query)){
				?>
				<tr>
				<td><span id="firstname<?php echo $row['userid']; ?>"><?php echo $row['firstname']; ?></span></td>
				<td><span id="lastname<?php echo $row['userid']; ?>"><?php echo $row['lastname']; ?></span></td>
				<td><span id="address<?php echo $row['userid']; ?>"><?php echo $row['address']; ?></span></td>
				<td><button type="button" class="btn btn-success edit" value="<?php echo $row['userid']; ?>"><span class="glyphicon glyphicon-edit"></span> Edit</button></td>
				</tr>
				<?php
			}
		?>		
		</tbody>
	</table>
	</div>
	
<?php include('modal.php'); ?>
<script src="custom.js"></script>
</body>
</html>

Creando nuestro Modal

Lo siguiente es crear nuestro formulario que recibirá los datos en la ventana modal. Llamamos a esto como “modal.php“.

<!-- Edit Modal-->
    <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">&times;</button>
                    <center><h4 class="modal-title" id="myModalLabel">Editar usuario</h4></center>
                </div>
                <div class="modal-body">
				<div class="container-fluid">
					<div class="form-group input-group">
						<span class="input-group-addon" style="width:150px;">Nombres:</span>
						<input type="text" style="width:350px;" class="form-control" id="efirstname">
					</div>
					<div class="form-group input-group">
						<span class="input-group-addon" style="width:150px;">Apellidos:</span>
						<input type="text" style="width:350px;" class="form-control" id="elastname">
					</div>
					<div class="form-group input-group">
						<span class="input-group-addon" style="width:150px;">Dirección:</span>
						<input type="text" style="width:350px;" class="form-control" id="eaddress">
					</div>					
				</div>
				</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancelar</button>
                    <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-edit"></span> </i> Actualizar</button>
                </div>
            </div>
        </div>
    </div>
<!-- /.modal -->

Creando nuestro script

El último paso es crear nuestro script jQuery para pasarle los valores a nuestra ventana modal. Llamamos a esto como “custom.js“.

$(document).ready(function(){
	$(document).on('click', '.edit', function(){
		var id=$(this).val();
		var first=$('#firstname'+id).text();
		var last=$('#lastname'+id).text();
		var address=$('#address'+id).text();
	
		$('#edit').modal('show');
		$('#efirstname').val(first);
		$('#elastname').val(last);
		$('#eaddress').val(address);
	});
});

Aquí termina este tutorial. Si tienes algún comentario o pregunta, no dudes en hacernos saber dejando un comentario a continuación.   Happy Coding 😀



  • Jorge Rodas

    Muy bueno, felicitaciones. una consulta: veo que los valores se pasan a los input que estan en el modal, pero si fuera un select que esta en el modal, ¿Como se hace para que el valor aparezca en el select?