Crear input dinámico con jQuery

publicado por: Anonymous

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.

_x000D_

_x000D_

<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
_x000D_
<head>_x000D_
    <title>Bootstrap Example</title>_x000D_
    <meta charset="utf-8">_x000D_
    <meta name="viewport" content="width=device-width, initial-scale=1">_x000D_
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">_x000D_
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>_x000D_
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
_x000D_
    <div class="container">_x000D_
        <h2>Comprar productos</h2>_x000D_
        <!-- Trigger the modal with a button -->_x000D_
        <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Agregar</button>_x000D_
_x000D_
        <table class="table">_x000D_
            <thead>_x000D_
                <tr>_x000D_
                    <th>Producto</th>_x000D_
                    <th>Cantidad</th>_x000D_
                    <th>Precio</th>_x000D_
                    <th>Total</th>_x000D_
                    <th>Acción</th>_x000D_
                </tr>_x000D_
            </thead>_x000D_
            <tbody>_x000D_
                <tr>_x000D_
                    <td><input type="text" class="form-control" id="producto" disabled value="Vaso"></td>_x000D_
                    <td><input type="text" class="form-control" id="cantidad" value="3"></td>_x000D_
                    <td><input type="text" class="form-control" id="cantidad" value="10"></td>_x000D_
                    <td><input type="text" class="form-control" id="total" value="30" disabled></td>_x000D_
                    <td><button type="button" class="btn btn-default">Remover</button></td>_x000D_
                </tr>_x000D_
            </tbody>_x000D_
        </table>_x000D_
_x000D_
_x000D_
        <!-- Modal -->_x000D_
        <div class="modal fade" id="myModal" role="dialog">_x000D_
            <div class="modal-dialog">_x000D_
_x000D_
                <!-- Modal content-->_x000D_
                <div class="modal-content">_x000D_
                    <div class="modal-header">_x000D_
                        <button type="button" class="close" data-dismiss="modal">&times;</button>_x000D_
                        <h4 class="modal-title">Agregar producto a la lista</h4>_x000D_
                    </div>_x000D_
                    <div class="modal-body">_x000D_
                        <div class="form-group">_x000D_
                            <label for="producto">Buscar Producto</label>_x000D_
                            <input type="text" class="form-control" id="producto">_x000D_
                        </div>_x000D_
                    </div>_x000D_
                    <div class="modal-footer">_x000D_
                        <button type="button" class="btn btn-default" data-dismiss="modal">Agregar</button>_x000D_
                    </div>_x000D_
                </div>_x000D_
_x000D_
            </div>_x000D_
        </div>_x000D_
_x000D_
    </div>_x000D_
_x000D_
</body>_x000D_
_x000D_
</html>

_x000D_

_x000D_

_x000D_

solución

_x000D_

_x000D_

<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
_x000D_
<head>_x000D_
    <title>Bootstrap Example</title>_x000D_
    <meta charset="utf-8">_x000D_
    <meta name="viewport" content="width=device-width, initial-scale=1">_x000D_
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">_x000D_
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>_x000D_
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
    <script type="text/javascript">_x000D_
  // Refresca Producto: Refresco la Lista de Productos dentro de la Tabla_x000D_
  // Si es vacia deshabilito el boton guardar para obligar a seleccionar al menos un producto al usuario_x000D_
  // Sino habilito el boton Guardar para que pueda Guardar_x000D_
    function RefrescaProducto(){_x000D_
        var ip = [];_x000D_
        var i = 0;_x000D_
        $('#guardar').attr('disabled','disabled'); //Deshabilito el Boton Guardar_x000D_
        $('.iProduct').each(function(index, element) {_x000D_
            i++;_x000D_
            ip.push({ id_pro : $(this).val() });_x000D_
        });_x000D_
        // Si la lista de Productos no es vacia Habilito el Boton Guardar_x000D_
        if (i > 0) {_x000D_
            $('#guardar').removeAttr('disabled','disabled');_x000D_
        }_x000D_
        var ipt=JSON.stringify(ip); //Convierto la Lista de Productos a un JSON para procesarlo en tu controlador_x000D_
        $('#ListaPro').val(encodeURIComponent(ipt));_x000D_
    }_x000D_
       function agregarProducto() {_x000D_
_x000D_
            var sel = $('#pro_id').find(':selected').val(); //Capturo el Value del Producto_x000D_
            var text = $('#pro_id').find(':selected').text();//Capturo el Nombre del Producto- Texto dentro del Select_x000D_
           _x000D_
            _x000D_
            var sptext = text.split();_x000D_
            _x000D_
            var newtr = '<tr class="item"  data-id="'+sel+'">';_x000D_
            newtr = newtr + '<td class="iProduct" >' + sel + '</td>';_x000D_
            newtr = newtr + '<td> <input  class="form-control" id="1" name="precio" value="23" required /></td>';_x000D_
            newtr = newtr + '<td><input  class="form-control" id="2" name="cantidad" value="2" required /></td>';_x000D_
            newtr = newtr + '<td><input  class="form-control"  id="3" name="total" value="46" required /></td>';_x000D_
            newtr = newtr + '<td><button type="button" class="btn btn-danger btn-xs remove-item"><i class="fa fa-times"></i></button></td></tr>';_x000D_
            _x000D_
            $('#ProSelected').append(newtr); //Agrego el Producto al tbody de la Tabla con el id=ProSelected_x000D_
            _x000D_
            RefrescaProducto();//Refresco Productos_x000D_
                _x000D_
            $('.remove-item').off().click(function(e) {_x000D_
                $(this).parent('td').parent('tr').remove(); //En accion elimino el Producto de la Tabla_x000D_
                if ($('#ProSelected tr.item').length == 0)_x000D_
                    $('#ProSelected .no-item').slideDown(300); _x000D_
                RefrescaProducto();_x000D_
            });        _x000D_
           $('.iProduct').off().change(function(e) {_x000D_
                RefrescaProducto();_x000D_
           });_x000D_
    }_x000D_
</script>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
_x000D_
    <div class="container">_x000D_
    <from>_x000D_
        <h2>Comprar productos</h2>_x000D_
        <!-- Trigger the modal with a button -->_x000D_
        <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Agregar</button>_x000D_
          <input type="hidden" id="ListaPro" name="ListaPro" value="" required />_x000D_
        <table id="TablaPro" class="table">_x000D_
            <thead>_x000D_
                <tr>_x000D_
                    <th>Producto</th>_x000D_
                    <th>Cantidad</th>_x000D_
                    <th>Precio</th>_x000D_
                    <th>Total</th>_x000D_
                    <th>Acción</th>_x000D_
                </tr>_x000D_
            </thead>_x000D_
            <tbody id="ProSelected"><!--Ingreso un id al tbody-->_x000D_
                <tr>_x000D_
             _x000D_
                </tr>_x000D_
            </tbody>_x000D_
        </table>_x000D_
<!--Agregue un boton en caso de desear enviar los productos para ser procesados-->_x000D_
                <div class="form-group">_x000D_
                    <button type="submit" id="guardar" name= "guardar" class="btn btn-lg btn-default pull-right">Guardar</button>_x000D_
                </div>_x000D_
    </from>_x000D_
_x000D_
        <!-- Modal -->_x000D_
        <div class="modal fade" id="myModal" role="dialog">_x000D_
_x000D_
            <div class="modal-dialog">_x000D_
_x000D_
                <!-- Modal content-->_x000D_
                <div class="modal-content">_x000D_
                    <div class="modal-header">_x000D_
                        <button type="button" class="close" data-dismiss="modal">&times;</button>_x000D_
                        <h4 class="modal-title">Agregar producto a la lista</h4>_x000D_
                    </div>_x000D_
                    <div class="modal-body">_x000D_
                         <div class="form-group">_x000D_
                                    <label>Producto</label>_x000D_
                                <select class="selectpicker form-control" id="pro_id" name="pro_id" data-width='100%' >_x000D_
                                        <option value="Lentes">Lentes</option>_x000D_
                                        <option value="Casco">Casco</option>_x000D_
                                        <option value="Gorra">Gorra</option>_x000D_
                                </select>_x000D_
                </div>_x000D_
                    </div>_x000D_
                    <div class="modal-footer">_x000D_
                        <!--Uso la funcion onclick para llamar a la funcion en javascript-->_x000D_
                        <button type="button" onclick="agregarProducto()" class="btn btn-default" data-dismiss="modal">Agregar</button>_x000D_
                    </div>_x000D_
                </div>_x000D_
_x000D_
            </div>_x000D_
        </div>_x000D_
_x000D_
    </div>_x000D_
_x000D_
</body>_x000D_
_x000D_
</html>

_x000D_

_x000D_

_x000D_

Si deseas recibir esta Lista de Productos en un controlador ve lo siguiente:

    var ipt=JSON.stringify(ip);
    $('#ListaPro').val(encodeURIComponent(ipt));//Convierto los Productos a un JSON Para mandarlo al controlador por POST

Entonces al presionar guardar , deberías poder enviar los valores por POST , a través del FORM, de manera que en tu form deberias tener algo asi:

  <form action="llamada al controlador: miControlador" role="form" method="post">

En tu controlador debes poder decodificar del JSON todos estos productos, para hacerlo debes tener un controlador que realice algo así:

 public function miControlador(){
          $data = array();
          foreach($_POST as $key => $value) {  //Recibo el los valores por POST 
            $data[$key] = $value;  
         }

         $acturl = urldecode($data['ListaPro']); //decodifico el JSON
         $productos = json_decode($acturl);

        foreach ($productos  as $pro) {
            $misProductos = array(
                'cantidad' => $pro->cantidad,
                'productoId' => $pro->id_pro,//así llamamos al id del producto en la vista en la funcion RefrescaProducto
                'precio' => $pro->precio,
                'total' =>$pro->total        
            );
     //Guardar en Base de Datos
 }

Luego tendrías tus productos en un Array, y puedes manejarlos como desees, no e usado Laravel pero de esta forma que te planteo es como normalmente lo hago. Espero te Sirva. Saludos

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *