Tengo un problema que no logro solucionar. Quiero crear una lista para comprar productos, esta lista debe tener los siguientes campos
- Producto
- Cantidad
- Costo
- Total
Pero la dinámica consiste en lo siguiente.
Como pueden ver en este código la lista se debe agregar de manera dinámica, se pueden agregar varios pedidos a la vez.
En la ventana modal buscar el producto y luego al darle aceptar quiero que se cree automáticamente la fila con los campos que se ve en el código para que el usuario pueda llenaros.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Comprar productos</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Agregar</button>
<table class="table">
<thead>
<tr>
<th>Producto</th>
<th>Cantidad</th>
<th>Precio</th>
<th>Total</th>
<th>Acción</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control" id="producto" disabled value="Vaso"></td>
<td><input type="text" class="form-control" id="cantidad" value="3"></td>
<td><input type="text" class="form-control" id="cantidad" value="10"></td>
<td><input type="text" class="form-control" id="total" value="30" disabled></td>
<td><button type="button" class="btn btn-default">Remover</button></td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Agregar producto a la lista</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="producto">Buscar Producto</label>
<input type="text" class="form-control" id="producto">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Agregar</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>