Pregunta:
Fecha: 20-07-2016 19:27:26
(En Español)
si alguien puede ayudarme se los agradeceria. Votos: 4 - Respuestas: 51 - Vistas: 82 Compartir en: Google Facebook Twitter LinkedIn Link
Facturación con diseño en bootstrap multiples inputs dinámicos[No resuelta]
Hola amigos he estado peleando con una facturacion y una entrada de productos, estoy trabajando con bootstrap para el diseño y tengo base de datos mysql, en fin lo que nesecito es poder agregar varios inputs segun sea necesario , esto para ir llenando de productos mi detalle de factura.. he encontrado algunos pero no me han funcionado en esta pagina existe uno pero es comprado y ahorita no se puede comprar. esta bajo el titulo Adding fields with different names aqui el link.... ejemplosi alguien puede ayudarme se los agradeceria. Votos: 4 - Respuestas: 51 - Vistas: 82 Compartir en: Google Facebook Twitter LinkedIn Link
Respuestas:
-
Fecha: 21-07-2016 14:44:50 Hola Juan
Hace unos pocos días he tenido la misma inquietud que la tuya.
En mi caso era para realizar remitos que también tengo la intención de utilizar Bootstrap.
Donde se pueda agregar una fila donde contenga 2 campos uno para cantidad y otro para detalle.
He buscado info al respecto
Te comparto lo que he encontrado pero no lo he probado por falta de tiempo, que en algún momento retomaré.
LINKs de mi interes:
Añadir campos a un formulario dinámicamente con JQuery Creo que este es el que mas se ajustaría para nuestros casos y requerimientos.
Imagen de ejemplo
Agregar Y Eliminar Elementos De Forma Dinámica Con jQuery
Agregar Input dinamicamente con Jquery
Agregar campos con jQuery
Espero que te sirva como punto de partida.
Si logras algún resultado favorable seria bueno que nos compartas el codigo
Cualquier cosa nos vas comentando como vas on el desarrollo asi entre todos podemos darle el mejor formato.
Saludos Votos: 6 - Link respuesta -
Fecha: 21-07-2016 18:27:54 Hola Walter,
Me llegaste como anillo al dedo, justamente iba a empezar a buscar este script que ya habia visto antes y deseo agregar, mi pregunta sería si me podrias ayudar a hacer el PHP para recibir estos campos y agregarlos ala DB.
Saludos
Equipo AnimeSensei Votos: 0 - Link respuesta -
Fecha: 22-07-2016 06:18:57 muchas gracias walter eso es lo que necesito. Voy a implementar revisarlo y tratar de implementarlo y les comparto el codigo. Votos: 3 - Link respuesta
-
Fecha: 22-07-2016 07:05:16 Buenas tardes a todos:
Por lo poco que veo en sus preguntas, entiendo que esto se resuelve mediante la utilización de Ajax (Conexión BD) y JavaScript ... las variables las pasan utilizando el id ... hay abundante información en la WEB al respecto.
Les dejo un saludo Votos: 2 - Link respuesta -
Fecha: 22-07-2016 19:54:59 Antuan muchas gracias por interesarte en el tema ;)
A lo que nos estamos refiriendo es que se pueda agregar inputs de formulario de manera dinámica, que al hacer click en un [+] agregue un nuevo y en [-] lo quite. Como en los ejemplos que he mencionado.
Por otra parte, sobre tu sugerencia es muy valida para realizarla mas adelante, que tambien lo tenia pensado hacer, que se pueda ingresar artículos mediante la solicitud ajax, por ahora nos estamos centrando en lo mas básico.
CorpLan Web Para obtener los datos ingresados en el formulario con PHP hay vastos ejemplos en la red por ejemplo la doc oficial de PHP y otro ejemplo $_POST PHP. Procesar datos de un formulario HTML.
Esos ejemplos son muy claros ;)
Algo que deberas tener encuenta que los datos ingresados antes de ingresados deberan ser saneados antes de insertarlo en la base de datos.
En cuanto hayamos logrado hacer funcionar a lo que se ha propuesto en este tema expondré el codigo completo del HTML del formulario y el PHP que recoge los datos.
Juan: que bueno que te haya servido, espero que nos comentes cuando lo hayas resuelto ya que nos seria de gran utilidad.
Te comento que he probado el primer ejemplo que te he expuesto pero algo anda mal ya que hay un desfase que no he solucionado.
Se puede ver en el Demo Online
Aprovecho la ocasión para dejar otro codigo que tiene como resultante la siguiente imagen.
<!DOCTYPE html> <html lang="en-US"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <title>Agregar/Eliminar Inputs</title> <script src="jquery/jquery.min.js"></script> <style type="text/css"> input[type="text"]{ background-color: #FFFFFF; border: 1px solid #CCCCCC; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; border-radius: 4px 4px 4px 4px; color: #555555; display: inline-block; font-size: 14px; height: 20px; line-height: 20px; margin-bottom: 10px; padding: 4px 6px; vertical-align: middle; } input[type="text"]:focus { border-color: rgba(82, 168, 236, 0.8); outline: 0 none; -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6); -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6); box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6); } a { text-decoration: none; } .btn { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-image: none; border-radius: 4px 4px 4px 4px; border-style: solid; border-width: 1px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05); cursor: pointer; display: inline-block; font-size: 14px; line-height: 20px; margin-bottom: 0; padding: 4px 12px; text-align: center; vertical-align: middle; } .btn-info { background-color: #49AFCD; background-image: linear-gradient(to bottom, #5BC0DE, #2F96B4); background-repeat: repeat-x; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); color: #FFFFFF; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .btn:hover{ color:#333; text-decoration:none; background-position:0 -15px; -webkit-transition:background-position .1s linear; -moz-transition:background-position .1s linear; -o-transition:background-position .1s linear; transition:background-position .1s linear; } .btn-info:hover{ color:#fff; background-color:#2f96b4; } #contenedor { margin-top: 15px; } #wrapper { width: 380px; margin: 50px auto 0; } .added { float: left; margin-right: 10px; } .eliminar { margin: 5px; } </style> <script type="text/javascript"> $(document).ready(function() { var MaxInputs = 8; //maximum input boxes allowed var contenedor = $("#contenedor"); //Input boxes wrapper ID var AddButton = $("#agregarCampo"); //Add button ID //var x = contenedor.length; //initlal text box count var x = $("#contenedor div").length + 1; var FieldCount = x-1; //to keep track of text box added $(AddButton).click(function (e) //on add input button click { if(x <= MaxInputs) //max input box allowed { FieldCount++; //text box added increment //add input box $(contenedor).append('<div class="added"><input type="text" name="mitexto[]" id="campo_'+ FieldCount +'" placeholder="Texto '+ FieldCount +'"/><a href="#" class="eliminar">×</a></div>'); x++; //text box increment } return false; }); $("body").on("click",".eliminar", function(e){ //user click on remove text if( x > 1 ) { $(this).parent('div').remove(); //remove text box x--; //decrement textbox } return false; }); }); </script> </head> <body> <div id="wrapper"> <a id="agregarCampo" class="btn btn-info" href="#">Agregar Campo</a> <div id="contenedor"> <div class="added"> <input name="mitexto[]" id="campo_1" placeholder="Texto 1" type="text"><a href="#" class="eliminar">×</a> </div> </div> </body></html>
Espero que sea útil.
Saludos Votos: 2 - Link respuesta -
Fecha: 03-08-2016 07:12:13 hola
me ha ido bien con el código que expuse inicialmente solo extraje el codigo que ellos exponen y las librerias las encontre en github.com del mismo fabricante . inicialmente me daba tambien ese problema pero me di cuenta que es cuestion de html. por otro lado cuando se manda el post lo envia en forma de array por lo que hay que recorrerlo para obtener cada uno de los datos... les comparto el codigo html haber si les sirve..
<link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="../dist/css/formValidation.css"/> <script type="text/javascript" src="../vendor/jquery/jquery.min.js"></script> <script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="../dist/js/formValidation.js"></script> <script type="text/javascript" src="../dist/js/framework/bootstrap.js"></script> <form id="bookForm" method="post" class="form-horizontal"> <div class="form-group"> <label class="col-xs-1 control-label">Book</label> <div class="col-xs-4"> <input type="text" class="form-control" name="book[0].title" placeholder="Title" /> </div> <div class="col-xs-4"> <input type="text" class="form-control" name="book[0].isbn" placeholder="ISBN" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="book[0].price" placeholder="Price" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-default addButton"><i class="fa fa-plus"></i></button> </div> </div> <!-- The template for adding new field --> <div class="form-group hide" id="bookTemplate"> <div class="col-xs-4 col-xs-offset-1"> <input type="text" class="form-control" name="title" placeholder="Title" /> </div> <div class="col-xs-4"> <input type="text" class="form-control" name="isbn" placeholder="ISBN" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="price" placeholder="Price" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button> </div> </div> <div class="form-group"> <div class="col-xs-5 col-xs-offset-1"> <button type="submit" class="btn btn-default">Submit</button> </div> </div> </form> <script> $(document).ready(function() { var titleValidators = { row: '.col-xs-4', // The title is placed inside a <div class="col-xs-4"> element validators: { notEmpty: { message: 'The title is required' } } }, isbnValidators = { row: '.col-xs-4', validators: { notEmpty: { message: 'The ISBN is required' }, isbn: { message: 'The ISBN is not valid' } } }, priceValidators = { row: '.col-xs-2', validators: { notEmpty: { message: 'The price is required' }, numeric: { message: 'The price must be a numeric number' } } }, bookIndex = 0; $('#bookForm') .formValidation({ framework: 'bootstrap', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { 'book[0].title': titleValidators, 'book[0].isbn': isbnValidators, 'book[0].price': priceValidators } }) // Add button click handler .on('click', '.addButton', function() { bookIndex++; var $template = $('#bookTemplate'), $clone = $template .clone() .removeClass('hide') .removeAttr('id') .attr('data-book-index', bookIndex) .insertBefore($template); // Update the name attributes $clone .find('[name="title"]').attr('name', 'book[' + bookIndex + '].title').end() .find('[name="isbn"]').attr('name', 'book[' + bookIndex + '].isbn').end() .find('[name="price"]').attr('name', 'book[' + bookIndex + '].price').end(); // Add new fields // Note that we also pass the validator rules for new field as the third parameter $('#bookForm') .formValidation('addField', 'book[' + bookIndex + '].title', titleValidators) .formValidation('addField', 'book[' + bookIndex + '].isbn', isbnValidators) .formValidation('addField', 'book[' + bookIndex + '].price', priceValidators); }) // Remove button click handler .on('click', '.removeButton', function() { var $row = $(this).parents('.form-group'), index = $row.attr('data-book-index'); // Remove fields $('#bookForm') .formValidation('removeField', $row.find('[name="book[' + index + '].title"]')) .formValidation('removeField', $row.find('[name="book[' + index + '].isbn"]')) .formValidation('removeField', $row.find('[name="book[' + index + '].price"]')); // Remove element containing the fields $row.remove(); }); }); </script>Votos: 4 - Link respuesta -
Fecha: 03-08-2016 09:36:38 Juan ...
Me gustaría si me podes decir de donde extrajiste el código para poder verlo completo.
Desde ya muchas gracias. Votos: 2 - Link respuesta -
Fecha: 03-08-2016 10:35:18 Juan
Que bueno que hayas podido solucionar el problema.
Aún sigo dando vueltas con ello.
serias tan amable de poder subir los archivos en un zip con el ejemplo funcionando y las librerías? Así lo descargamos y probamos
Te lo agradecería mucho
Saludos Votos: 3 - Link respuesta -
Fecha: 14-08-2016 17:08:42 hola
aqui encontre la version 0.6.0 como para probar.
Aunque creo que la ultima versión es v0.8.1.
Si no entiendo mal, es de pago no es gratuito su uso, Ojo.
En mi caso tendré que buscar otro tipo de solución que no sea de uso comercial.
Tal vez la solución esta en usar puro jquery para agregar y eliminar elementos, validar el datos ingresado.
Saludos Votos: 3 - Link respuesta -
Fecha: 14-08-2016 23:58:07 He utilizado el framework del autor que esta en su hithub.
El link del repositorio de github https://github.com/nghuuphuoc/bootstrapvalidator.
Les dejo mi codigo que he utilizado.
Se trata de ingresar un concepto (string) y una cantidad (Digts 0-9).
index.html
<!DOCTYPE html> <html lang="es"> <head> <title>Bootstrap Remito</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="formvalidation/dist/css/formValidation.css"/> <script type="text/javascript" src="../jquery/jquery.min.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="formvalidation/dist/js/formValidation.js"></script> <script type="text/javascript" src="formvalidation/dist/js/framework/bootstrap.js"></script> </head> <body> <div class="container"> <br> <div class="panel panel-primary "> <div class="panel-heading"> <h3 class="panel-title">Ingreso de items del remito</h3> </div> <form id="remitoForm" method="post" class="form-horizontal" method="POST" action="target.php"> <div class="form-group"> <label class="col-xs-1 control-label"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Items:</label> <div class="col-xs-8"> <input type="text" class="form-control" name="item[0].concepto" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[0].cantidad" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-info addButton"><i class="fa fa-plus glyphicon glyphicon-plus"></i></button> </div> </div> <!-- The template for adding new field --> <div class="form-group hide" id="itemsRemito"> <div class="col-xs-8 col-xs-offset-1"> <input type="text" class="form-control" name="concepto" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="cantidad" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-danger glyphicon glyphicon-trash removeButton"><i class="fa fa-minus"></i></button> </div> </div> <div class="form-group"> <div class="col-xs-5 col-xs-offset-1"> <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-send" aria-hidden="true"></span> Grabar</button> </div> </div> </form> </div> <script> $(document).ready(function () { var conceptoValidators = { row: '.col-xs-8', // The title is placed inside a <div class="col-xs-4"> element validators: { notEmpty: { message: 'Requiere un concepto' } } }, cantidadValidators = { row: '.col-xs-2', validators: { notEmpty: { message: 'Requiere cantidad' }, digits: { message: 'Solo digitos' } } }, itemIndex = 0; $('#remitoForm') .formValidation({ framework: 'bootstrap', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { 'item[0].concepto': conceptoValidators, 'item[0].cantidad': cantidadValidators } }) // Add button click handler .on('click', '.addButton', function () { itemIndex++; var $template = $('#itemsRemito'), $clone = $template .clone() .removeClass('hide') .removeAttr('id') .attr('data-item-index', itemIndex) .insertBefore($template); // Update the name attributes $clone .find('[name="concepto"]').attr('name', 'item[' + itemIndex + '].concepto').end() .find('[name="cantidad"]').attr('name', 'item[' + itemIndex + '].cantidad').end(); // Add new fields // Note that we also pass the validator rules for new field as the third parameter $('#remitoForm') .formValidation('addField', 'item[' + itemIndex + '].concepto', conceptoValidators) .formValidation('addField', 'item[' + itemIndex + '].cantidad', cantidadValidators); }) // Remove button click handler .on('click', '.removeButton', function () { var $row = $(this).parents('.form-group'), index = $row.attr('data-item-index'); // Remove fields $('#remitoForm') .formValidation('removeField', $row.find('[name="item[' + index + '].concepto"]')) .formValidation('removeField', $row.find('[name="item[' + index + '].cantidad"]')); // Remove element containing the fields $row.remove(); }); }); </script> </body> </html>
y el script que obtiene los datos
target.php
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Form data</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"/> </head> <body> <div class="container"> <div class="row"> <h2>Form data</h2> <hr/> <p>Datos Obtenidos</p> <pre><?php print_r($_POST); ?></pre> </div> </div> </body> </html>
Aun no he logrado obtener los datos enviados por el form
Si ingreso
impresora 5
pendrive 8
obtengo
Array ( [item] => Array ( [0] => 5 [4] => 8 ) [concepto] => [cantidad] => )
Demo:
Dejo el link de descarga de mi codigo completo.
Saludos Votos: 2 - Link respuesta -
Fecha: 17-08-2016 11:48:46 perdon por la demora compañeros las librerias que proporciono Walter en la descarga, son las que yo utilice tambien.. pero les comparto mi ejemplo. null yo lo que hice para recibir fue lo siguiente.
<?php /*capturo uno por uno*/ $prov = $_POST['prov']; $especie = $_POST['especie']; $pedido = $_POST['pedido']; $saldo = $_POST['saldo']; /*luego los coloco por separado en un array*/ $contador = count($especie); for ($i=0; $i< $contador; $i++) { if($especie[$i]!=0) { /***aqui junto los campos para luego ser recorridos*/ $resultado[] = $especie[$i].'||'. $pedido[$i].'||'.$saldo[$i]; } //$resultado[] = array($prod[$i], $cant[$i],$desc[$i],$val[$i]); } foreach($resultado as $a) { $porciones = explode("||", $a); $sqlExecute = "insert into tabla(campo1, campo2, campo3) values ($prov, $pedido, $porciones[0],$porciones[1],$porciones[2]'$user', SYSDATE())"; // Ejecuta la accion y la verifica if ($mysqli->query($sqlExecute)=== TRUE ) { echo '<script name="accion"> window.location = "index.php?id=6&mensaje=1";</script>'; } else { echo "Error: No fue posible grabar ". $mysqli->error; /* echo "<script>history.back()</script>";*/ } } ?>
si tienen dudas me comentan Votos: 2 - Link respuesta -
Fecha: 17-08-2016 11:50:15 perdon no se porque le deje clave se cifrado
!u_zwRhPjQqxHPDsaIGg-XMZTKhzH7plOdmeof4yLErA Votos: 1 - Link respuesta -
Fecha: 17-08-2016 13:02:54 Hola amigo,
el archivo que compartiste no existe. Votos: 0 - Link respuesta -
Fecha: 17-08-2016 15:21:36 Muchas gracias Juan por compartir tu codigo y la descarga del mismo
Lo descargo y lo probare, comentare luego ;)
CorpLan si existe el archivo, hay que ingresar al link que nos proporcionó Juan y luego ingresar la clave que ha mencionado.
Sino click Aquí que he agregado la clave
Mi problema es que no logro obtener los datos del formulario, como en el ejemplo que he dejado.
Saludos Votos: 0 - Link respuesta -
Fecha: 18-08-2016 11:09:19 yo pondria los nombres de los input como array y quitaria asi como lo tienes (item[0].concepto).. y lo pondria concepto[]... asi ya puedes utilizar el php que yo proporcione para armar cada tupla..
<?php /*capturo uno por uno*/ $concepto= $_POST['concepto']; $cantidad = $_POST['cantidad']; /*luego los coloco por separado en un array*/ $contador = count($cantidad); for ($i=0; $i< $contador; $i++) { if($cantidad[$i]!=0) { /***aqui junto los campos para luego ser recorridos*/ $resultado[] = $concepto[$i].'||'. $cantidad[$i]; } //$resultado[] = array($concepto[$i], $cantidad[$i]); } foreach($resultado as $a) { $porciones = explode("||", $a); $sqlExecute = "insert into tabla(campo1, campo2, campo3) values ($prov, $pedido, $porciones[0],$porciones[1],$porciones[2]'$user', SYSDATE())"; // Ejecuta la accion y la verifica if ($mysqli->query($sqlExecute)=== TRUE ) { echo '<script name="accion"> window.location = "index.php?id=6&mensaje=1";</script>'; } else { echo "Error: No fue posible grabar ". $mysqli->error; /* echo "<script>history.back()</script>";*/ } } ?>
me contas si tienes dudas..
[/code] Votos: 2 - Link respuesta -
Fecha: 21-08-2016 13:04:32 Juan muchas gracias por tu interes en ayudarme.
he modificado el HTML como me lo has sugerido.
remito.html
<!DOCTYPE html> <html lang="es"> <head> <title>Bootstrap Remito</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="formvalidation/dist/css/formValidation.css"/> <script type="text/javascript" src="../jquery/jquery.min.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="formvalidation/dist/js/formValidation.js"></script> <script type="text/javascript" src="formvalidation/dist/js/framework/bootstrap.js"></script> </head> <body> <div class="container"> <br> <div class="panel panel-primary "> <div class="panel-heading"> <h3 class="panel-title">Ingreso de items del remito</h3> </div> <form id="remitoForm" method="post" class="form-horizontal" method="POST" action="procesarRemito.php"> <div class="form-group"> <label class="col-xs-1 control-label"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Items:</label> <div class="col-xs-8"> <input type="text" class="form-control" name="concepto[0]" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="cantidad[0]" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-info addButton"><i class="fa fa-plus glyphicon glyphicon-plus"></i></button> </div> </div> <!-- The template for adding new field --> <div class="form-group hide" id="itemsRemito"> <div class="col-xs-8 col-xs-offset-1"> <input type="text" class="form-control" name="concepto" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="cantidad" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-danger glyphicon glyphicon-trash removeButton"><i class="fa fa-minus"></i></button> </div> </div> <div class="form-group"> <div class="col-xs-5 col-xs-offset-1"> <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-send" aria-hidden="true"></span> Grabar</button> </div> </div> </form> </div> <script> $(document).ready(function () { var conceptoValidators = { row: '.col-xs-8', // The title is placed inside a <div class="col-xs-4"> element validators: { notEmpty: { message: 'Requiere un concepto' } } }, cantidadValidators = { row: '.col-xs-2', validators: { notEmpty: { message: 'Requiere cantidad' }, digits: { message: 'Solo digitos' } } }, itemIndex = 0; $('#remitoForm') .formValidation({ framework: 'bootstrap', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { 'concepto[0]': conceptoValidators, 'cantidad[0]': cantidadValidators } }) // Add button click handler .on('click', '.addButton', function () { itemIndex++; var $template = $('#itemsRemito'), $clone = $template .clone() .removeClass('hide') .removeAttr('id') .attr('data-item-index', itemIndex) .insertBefore($template); // Update the name attributes $clone .find('[name="concepto"]').attr('name', 'concepto[' + itemIndex + ']').end() .find('[name="cantidad"]').attr('name', 'cantidad[' + itemIndex + ']').end(); // Add new fields // Note that we also pass the validator rules for new field as the third parameter $('#remitoForm') .formValidation('addField', 'concepto[' + itemIndex + ']', conceptoValidators) .formValidation('addField', 'cantidad[' + itemIndex + ']', cantidadValidators); }) // Remove button click handler .on('click', '.removeButton', function () { var $row = $(this).parents('.form-group'), index = $row.attr('data-item-index'); // Remove fields $('#remitoForm') .formValidation('removeField', $row.find('[name="concepto[' + index + ']"]')) .formValidation('removeField', $row.find('[name="cantidad[' + index + ']"]')); // Remove element containing the fields $row.remove(); }); }); </script> </body> </html>
Al agregar [+] una fila mas lo hace bien el HTML, si agrego tres filas genera algo como:
name="concepto[0]"
name="cantidad[0]"
name="concepto[1]"
name="cantidad[1]"
name="concepto[2]"
name="cantidad[2]"
Y quiero listar mostrándolo por pantalla todo lo enviado por el formulario
procesarRemito.php
<?php echo count($_POST["concepto"]); }
Muestra
1
y son 3
Tambien he cambiado el html
remito2.html
<!DOCTYPE html> <html lang="es"> <head> <title>Bootstrap Remito</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="formvalidation/dist/css/formValidation.css"/> <script type="text/javascript" src="../jquery/jquery.min.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="formvalidation/dist/js/formValidation.js"></script> <script type="text/javascript" src="formvalidation/dist/js/framework/bootstrap.js"></script> </head> <body> <div class="container"> <br> <div class="panel panel-primary "> <div class="panel-heading"> <h3 class="panel-title">Ingreso de items del remito</h3> </div> <form id="remitoForm" method="post" class="form-horizontal" method="POST" action="procesarRemito.php"> <div class="form-group"> <label class="col-xs-1 control-label"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Items:</label> <div class="col-xs-8"> <input type="text" class="form-control" name="concepto[]" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="cantidad[]" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-info addButton"><i class="fa fa-plus glyphicon glyphicon-plus"></i></button> </div> </div> <!-- The template for adding new field --> <div class="form-group hide" id="itemsRemito"> <div class="col-xs-8 col-xs-offset-1"> <input type="text" class="form-control" name="concepto" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="cantidad" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-danger glyphicon glyphicon-trash removeButton"><i class="fa fa-minus"></i></button> </div> </div> <div class="form-group"> <div class="col-xs-5 col-xs-offset-1"> <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-send" aria-hidden="true"></span> Grabar</button> </div> </div> </form> </div> <script> $(document).ready(function () { var conceptoValidators = { row: '.col-xs-8', // The title is placed inside a <div class="col-xs-4"> element validators: { notEmpty: { message: 'Requiere un concepto' } } }, cantidadValidators = { row: '.col-xs-2', validators: { notEmpty: { message: 'Requiere cantidad' }, digits: { message: 'Solo digitos' } } }, itemIndex = 0; $('#remitoForm') .formValidation({ framework: 'bootstrap', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { 'concepto[0]': conceptoValidators, 'cantidad[0]': cantidadValidators } }) // Add button click handler .on('click', '.addButton', function () { itemIndex++; var $template = $('#itemsRemito'), $clone = $template .clone() .removeClass('hide') .removeAttr('id') .attr('data-item-index', itemIndex) .insertBefore($template); // Update the name attributes $clone .find('[name="concepto"]').attr('name', 'concepto[]').end() .find('[name="cantidad"]').attr('name', 'cantidad[]').end(); // Add new fields // Note that we also pass the validator rules for new field as the third parameter $('#remitoForm') .formValidation('addField', 'concepto[]', conceptoValidators) .formValidation('addField', 'cantidad[]', cantidadValidators); }) // Remove button click handler .on('click', '.removeButton', function () { var $row = $(this).parents('.form-group'), index = $row.attr('data-item-index'); // Remove fields $('#remitoForm') .formValidation('removeField', $row.find('[name="concepto[]"]')) .formValidation('removeField', $row.find('[name="cantidad[]"]')); // Remove element containing the fields $row.remove(); }); }); </script> </body> </html>
donde si fueran agregados 3 filas seria
name="concepto[]"
name="cantidad[]"
name="concepto[]"
name="cantidad[]"
name="concepto[]"
name="cantidad[]"
Cual de los 2 HTML remito.htm o remito2.htm es el que debo utilizar?
Y si quiero mostrar con un echo concepto y cantidad
deberia ser algo como
$indice=0; //es la primera fila
echo $_POST['concepto'] [$indice].'='.$_POST['cantidad'][$indice];
No logro obtener los datos del form y listarlo
Muchas gracias Juan por tu amabilidad
Saludos Votos: 2 - Link respuesta -
Fecha: 23-08-2016 20:24:19 Hola
Aun no logro obtener los datos del form y listarlo :(
El codigo que uso es el que he expuesto en el post de arriba
alguna idea?
Saludos Votos: 1 - Link respuesta -
Fecha: 20-11-2016 15:57:06 Hola, no se si lo has solucionado ya, pero he hecho algunos cambios a tu codigo y creo que puede servir.
<!DOCTYPE html> <html lang="es"> <head> <title>Bootstrap Remito</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="formvalidation/dist/css/formValidation.css"/> <script type="text/javascript" src="../jquery/jquery.min.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="formvalidation/dist/js/formValidation.js"></script> <script type="text/javascript" src="formvalidation/dist/js/framework/bootstrap.js"></script> </head> <body> <div class="container"> <br> <div class="panel panel-primary "> <div class="panel-heading"> <h3 class="panel-title">Ingreso de items del remito</h3> </div> <form id="remitoForm" method="post" class="form-horizontal" action="procesarRemito.php"> <div class="form-group"> <label class="col-xs-1 control-label"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Items:</label> <div class="col-xs-8"> <input type="text" class="form-control" name="item[0].concepto" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[0].cantidad" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-info addButton"><i class="fa fa-plus glyphicon glyphicon-plus"></i></button> </div> </div> <!-- The template for adding new field --> <div class="form-group hide" id="itemsRemito"> <div class="col-xs-8 col-xs-offset-1"> <input type="text" class="form-control" name="item[].concepto" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[].cantidad" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-danger glyphicon glyphicon-trash removeButton"><i class="fa fa-minus"></i></button> </div> </div> <div class="form-group"> <div class="col-xs-5 col-xs-offset-1"> <button id="grabar" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-send" aria-hidden="true"></span> Grabar</button> </div> </div> </form> </div> <script> $(document).ready(function () { var form = document.getElementById("remitoForm"); document.getElementById("grabar").addEventListener("click", function () { var a_borrar = document.getElementById("itemsRemito"); form.removeChild(a_borrar); form.submit(); }); var conceptoValidators = { row: '.col-xs-8', // The title is placed inside a <div class="col-xs-4"> element validators: { notEmpty: { message: 'Requiere un concepto' } } }, cantidadValidators = { row: '.col-xs-2', validators: { notEmpty: { message: 'Requiere cantidad' }, digits: { message: 'Solo digitos' } } }, itemIndex = 0; $('#remitoForm') .formValidation({ framework: 'bootstrap', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { 'item[0].concepto': conceptoValidators, 'item[0].cantidad': cantidadValidators } }) // Add button click handler .on('click', '.addButton', function () { oldIndex = itemIndex; itemIndex++; var $template = $('#itemsRemito'), $clone = $template .clone() .removeClass('hide') .removeAttr('id') .attr('data-item-index', itemIndex) .insertBefore($template); // Update the name attributes $clone .find('[name="item[].concepto"]').attr('name', 'item[' + itemIndex + '].concepto').end() .find('[name="item[].cantidad"]').attr('name', 'item[' + itemIndex + '].cantidad').end(); // Add new fields // Note that we also pass the validator rules for new field as the third parameter $('#remitoForm') .formValidation('addField', 'item[' + itemIndex + '].concepto', conceptoValidators) .formValidation('addField', 'item[' + itemIndex + '].cantidad', cantidadValidators); }) // Remove button click handler .on('click', '.removeButton', function () { var $row = $(this).parents('.form-group'), index = $row.attr('data-item-index'); // Remove fields $('#remitoForm') .formValidation('removeField', $row.find('[name="item[' + index + '].concepto"]')) .formValidation('removeField', $row.find('[name="item[' + index + '].cantidad"]')); // Remove element containing the fields $row.remove(); }); }); </script> </body> </html>Votos: 1 - Link respuesta -
Fecha: 21-11-2016 22:51:46 Hola amigos,
He adecuado un nuevo pluggin para esto, espero les guste, trate de hacerlo lo más sencillo posible.
jquery.addItem.js
/** @Author: Edinson Tique @Versión: 1.0 @Method: Bootstrap Structure @Year: 2016 @Contact: www.fb.com/QueCodigoPG @Name: jquery.addItem.js **/ (function ($){ jQuery.fn.addItem = function(addItem){ $(document).ready(function() { $(addItem.btn).each(function (e){ $(this).bind("click", addItems); }); }); function addItems(){ var id = addItem.id, element = addItem.element; var eventID = parseInt($(this).parent('div').parent('div').attr('id').replace(id,'')); var newEvent = (eventID+1); $newClone = $('#'+id+eventID).clone(true); $newClone.attr("id",id+newEvent); $newClone.children('div').children("input").eq(0).attr("id",element+newEvent).val(''); $newClone.children('div').children("input").eq(0).val(''); $newClone.children('div').children("input").eq(1).val(''); $newClone.children('div').children("input").eq(2).attr("id",newEvent); $newClone.insertAfter($('#'+id+eventID)); $("#"+eventID).val('-').unbind("click",addItems); $("#"+eventID).bind("click",delRow); }; function delRow() { $(this).parent('div').parent('div').remove(); }; }; })(jQuery);
Este pluggin esta adecuado para la maquetación de bootstrap, usando los ejemplos que ustedes han dado, es simple la implementación solo necesitas 6 lineas y lo tienes funcionando a tu gusto.
var options = { id : "div_", btn : ".bt_plus", element : "materiales", }; $(document).addItem(options);
Explicó un poco. Tenemos tres variables:
id: Es el identificador que le queremos poner a cada uno de los campos dinámicos (NOTA: Es no creo que sea necesario el "_").
btn: Sería la clase o el id de nuestro botón para añadir campos.
element: identificador principal del primer elemento/input.
Después de tener definidas las opciones se envían al pluggin para el funcionamiento.
Código completo con maquetación correcta.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Prueba Input's</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://code.jquery.com/jquery.min.js"></script> <script src="js/jquery.addItem.js"></script> <script> var options = { id : "div_", btn : ".bt_plus", element : "materiales", }; $(document).addItem(options); </script> </head> <body> <div class="container"> <br> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Ingreso de items del remito</h3> </div> <div class="container"> <br> <form id="form" class="form-horizontal" name="form" method="post" action="index.php"> <div id="div_1" class="form-group"> <label class="col-xs-1 control-label"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Items:</label> <div class="col-xs-8"> <input type="text" name="materiales[]" class="form-control"/> </div> <div class="col-xs-2"> <input type="text" name="cmateriales[]" class="form-control"/> </div> <div class="col-xs-1"> <input class="bt_plus" id="1" type="button" value="+" class="form-control"/> </div> </div> <button type="submit" class="boton">Save</button> <div class="spacer"></div> </form> </div> </div> </div> </body> </html>
Para hacer uso de este en el PHP, solo basta llamar a los input's con un for, en mi caso son "materiales" y "cmateriales".
<? $materiales = $_POST["materiales"]; $cmateriales = $_POST["cmateriales"]; for ($i=0; $i < count($materiales); $i++){ echo $materiales[$i]." ".$cmateriales[$i]."<br>"; } ?>
Así de simple se muestran los resultados del mismo.
Código completo con maquetación
<? $materiales = $_POST["materiales"]; $cmateriales = $_POST["cmateriales"]; ?> <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Mostrar inputs</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="container"> <br><br> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <td>Materiales</td> <td>Cantidad</td> </tr> </thead> <tbody> <? for ($i=0; $i < count($materiales); $i++){ echo "<tr><td>".$materiales[$i]."</td><td>".$cmateriales[$i]."</td></tr>"; } ?> </tbody> </table> </div> </body> </html>
Saludos
PD: perdón Walter por usar tu separador XD Votos: 1 - Link respuesta -
Fecha: 22-11-2016 12:52:03 CorpLan Web Aunque aun no he probado tu código, que lo haré en algún momento pare ver su funcionalidad.
Te has esmerado en compartir tu código bien desarrollado. Se puede leer con claridad.
En cuanto el uso del separado, no hay problema usalo cuando lo necesites, ello ayuda a separar los conceptos y dejar mas claro lo que expones ;)
Te agradezco que te hayas sumado a este tema y hayas realizado un excelente aporte, claro que te has ganado el +1.
Alfonso Cobo probare lo que has mencionado, aun no he terminado con el tema, se te agradece haber compartido tu codigo +1
Luego mencionare que tal me ha resultado la solución propuesta por uds.
Saludos Votos: 0 - Link respuesta -
Fecha: 22-11-2016 14:02:02 He probado el codigo de Alfonso
<!DOCTYPE html> <html lang="es"> <head> <title>Bootstrap Remito</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="formvalidation/dist/css/formValidation.css"/> <script type="text/javascript" src="../jquery/jquery.min.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="formvalidation/dist/js/formValidation.js"></script> <script type="text/javascript" src="formvalidation/dist/js/framework/bootstrap.js"></script> </head> <body> <div class="container"> <br> <div class="panel panel-primary "> <div class="panel-heading"> <h3 class="panel-title">Ingreso de items del remito</h3> </div> <form id="remitoForm" method="post" class="form-horizontal" action="procesarRemito.php"> <div class="form-group"> <label class="col-xs-1 control-label"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Items:</label> <div class="col-xs-8"> <input type="text" class="form-control" name="item[0].concepto" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[0].cantidad" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-info addButton"><i class="fa fa-plus glyphicon glyphicon-plus"></i></button> </div> </div> <!-- The template for adding new field --> <div class="form-group hide" id="itemsRemito"> <div class="col-xs-8 col-xs-offset-1"> <input type="text" class="form-control" name="item[].concepto" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[].cantidad" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-danger glyphicon glyphicon-trash removeButton"><i class="fa fa-minus"></i></button> </div> </div> <div class="form-group"> <div class="col-xs-5 col-xs-offset-1"> <button id="grabar" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-send" aria-hidden="true"></span> Grabar</button> </div> </div> </form> </div> <script> $(document).ready(function () { var form = document.getElementById("remitoForm"); document.getElementById("grabar").addEventListener("click", function () { var a_borrar = document.getElementById("itemsRemito"); form.removeChild(a_borrar); form.submit(); }); var conceptoValidators = { row: '.col-xs-8', // The title is placed inside a <div class="col-xs-4"> element validators: { notEmpty: { message: 'Requiere un concepto' } } }, cantidadValidators = { row: '.col-xs-2', validators: { notEmpty: { message: 'Requiere cantidad' }, digits: { message: 'Solo digitos' } } }, itemIndex = 0; $('#remitoForm') .formValidation({ framework: 'bootstrap', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { 'item[0].concepto': conceptoValidators, 'item[0].cantidad': cantidadValidators } }) // Add button click handler .on('click', '.addButton', function () { oldIndex = itemIndex; itemIndex++; var $template = $('#itemsRemito'), $clone = $template .clone() .removeClass('hide') .removeAttr('id') .attr('data-item-index', itemIndex) .insertBefore($template); // Update the name attributes $clone .find('[name="item[].concepto"]').attr('name', 'item[' + itemIndex + '].concepto').end() .find('[name="item[].cantidad"]').attr('name', 'item[' + itemIndex + '].cantidad').end(); // Add new fields // Note that we also pass the validator rules for new field as the third parameter $('#remitoForm') .formValidation('addField', 'item[' + itemIndex + '].concepto', conceptoValidators) .formValidation('addField', 'item[' + itemIndex + '].cantidad', cantidadValidators); }) // Remove button click handler .on('click', '.removeButton', function () { var $row = $(this).parents('.form-group'), index = $row.attr('data-item-index'); // Remove fields $('#remitoForm') .formValidation('removeField', $row.find('[name="item[' + index + '].concepto"]')) .formValidation('removeField', $row.find('[name="item[' + index + '].cantidad"]')); // Remove element containing the fields $row.remove(); }); }); </script> </body> </html>
Los datos trato de obtenerlo con el siguiente codigo:
procesarRemito.php
<?php print_r($_POST);
devuelve:
Array ( [item] => Array ( [0] => 1 [1] => 3 [2] => 4 [3] => 2 [4] => 5 ) )
Que son solo las cantidades sin los conceptos. Pareciera que no llegan los conceptos al procesarRemito.php
¿Como obtengo los conceptos con sus respectivas cantidades?
Muchas gracias por la ayuda.
Saludos Votos: 0 - Link respuesta -
Fecha: 22-11-2016 16:41:27 He probado el código que gentilmente compartió CorpLan Web
Solo hay un mínimo error en:
<? $materiales = $_POST["materiales"]; $cmateriales = $_POST["cmateriales"]; for ($i=0; $i < count($materiales); $i++){ echo .$materiales[$i]." ".$cmateriales[$i]."<br>"; } ?>
en la linea que contiene
echo .$materiales[$i]." ".$cmateriales[$i]."<br>";
tiene un punto el cual produce un error, deberia ser
echo $materiales[$i]." ".$cmateriales[$i]."<br>";
Posiblemente ha sido de tipeo ;)
El código funciona a la perfección!!!! Envía los datos
Lo único es que me gustaría es que conserve la gráfica del que estaba utilizando.
Así es como se ve el de CorpLan Web
Y me gustaría que sea como el expuesto:
Que tenga los mismos gráficos en los botones y haga las validaciones en los campos como se ven en la imagen.
Sigo sin entender porque no funciona el código original, por ejemplo el ultimo expuesto
Saludos Votos: 0 - Link respuesta -
Fecha: 22-11-2016 17:22:02 Hola,
Que bueno que te halla gustado y gracias por la corrección te daría puntos pero por alguna razón no me dejan.
los botones es porque la verdad no uso Bootstrap entonces no se cuales son las clases o como se implementan, si me pasas el código de los botones para ponerlos y adaptarlo con gusto lo hago, así me ayudas a mejorar mi pluggin, y espero que este crezca cada vez más, todo este tipo de Pluggins la idea es que sean 100% libres.
Saludos Votos: 1 - Link respuesta -
Fecha: 22-11-2016 18:28:07 Si la idea es la que mencionas de mejorarlo ;)
Para el botón de [+] agregar uso:
<div class="col-xs-1"> <button type="button" class="btn btn-info addButton"><i class="fa fa-plus glyphicon glyphicon-plus"></i></button> </div>
Para eliminar uso:
<div class="col-xs-1"> <button type="button" class="btn btn-danger glyphicon glyphicon-trash removeButton"><i class="fa fa-minus"></i></button> </div>
Para Grabar (En tu caso Save):
<div class="col-xs-5 col-xs-offset-1"> <button id="grabar" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-send" aria-hidden="true"></span> Grabar</button> </div>
En vez de utilizar <input deberia ser <button
eso en cuanto a la gráfica.
Una vez resuelto ello, faltaría las validaciones que se hace con el plugin formvalidation como esta integrado en mi código.
Saludos Votos: 0 - Link respuesta -
Fecha: 22-11-2016 18:59:22 Hola Walter,
Mira aquí te dejo la nueva versión del pluggin ya lo de la validación lo haces tu, ya que no se usar ese tipo de librería.
/** @Author: Edinson Tique @Versión: 1.2 @Method: Bootstrap Structure @Year: 2016 @Contact: www.fb.com/QueCodigoPG **/ (function ($){ jQuery.fn.addItem = function(addItem){ $(document).ready(function() { $(addItem.btn).each(function (e){ $(this).bind("click", addItems); }); }); function addItems(){ var id = addItem.id, icon = addItem.icon, add = addItem.addClass, element = addItem.element, remove = addItem.removeClass; if(id === undefined){ id = "div_"; } if(icon === undefined){ icon = "remove"; } if(add === undefined){ add = "btn-danger"; } if(remove === undefined){ remove = "btn-info"; } var eventID = parseInt($(this).parent('div').parent('div').attr('id').replace(id,'')); var newEvent = (eventID+1); $newClone = $('#'+id+eventID).clone(true); $newClone.attr("id",id+newEvent); $newClone.children('div').children("input").eq(0).attr("id",element+newEvent).val(''); $newClone.children('div').children("input").eq(0).val(''); $newClone.children('div').children("input").eq(1).val(''); //$newClone.children('div').children("input").eq(2).attr("id",newEvent); $newClone.children('div').children("button").eq(0).attr("id",newEvent); $newClone.insertAfter($('#'+id+eventID)); $("#"+eventID).html('<i class="glyphicon glyphicon-'+icon+'"></i>').removeClass(remove).addClass(add).unbind("click",addItems); $("#"+eventID).bind("click",delRow); }; function delRow() { $(this).parent('div').parent('div').remove(); }; }; })(jQuery);
Se han añadido varias lineas para que sea una utilización y integración más agradable.
var options = { id : "div_", icon : "trash", btn : ".bt_plus", element : "materiales", addClass : "btn-danger", removeClass : "btn-info", }; $(document).addItem(options);
id: Es el identificador que le queremos poner a cada uno de los campos dinámicos (NOTA: No es necesario el "_").
icon: Icono por el que será remplazado para eliminar la linea antigua.
btn: Sería la clase o el id de nuestro botón para añadir campos.
element: identificador principal del primer elemento/input.
addClass: Clase a añadir al botón (Actualmente usada para cambiar el color).
removeClass: Clase a remover del botón (Actualmente usada para cambiar el color).
Html con la maquetación
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Prueba Input's</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://code.jquery.com/jquery.min.js"></script> <script src="js/jquery.addItem.js"></script> <script> var options = { id : "div_", icon : "trash", btn : ".bt_plus", element : "materiales", addClass : "btn-danger", removeClass : "btn-info", }; $(document).addItem(options); </script> </head> <body> <div class="container"> <br> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Ingreso de items del remito</h3> </div> <div class="container"> <br> <form id="form" class="form-horizontal" name="form" method="post" action="index.php"> <div id="div_1" class="form-group"> <label class="col-xs-1 control-label"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Items:</label> <div class="col-xs-8"> <input type="text" name="materiales[]" class="form-control"/> </div> <div class="col-xs-2"> <input type="text" name="cmateriales[]" class="form-control"/> </div> <div class="col-xs-1"> <!-- <input class="bt_plus" id="1" type="button" value="+" class="form-control"/> --> <button type="button" id="1" class="bt_plus btn btn-info addButton"><i class="glyphicon glyphicon-plus"></i></button> </div> </div> <div class="col-xs-5 col-xs-offset-1"> <button id="grabar" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-send" aria-hidden="true"></span> Grabar</button> </div> <div class="spacer"></div> </form> </div> </div> </div> </body> </html>
Dejo demo online
Saludos Votos: 2 - Link respuesta -
Fecha: 22-11-2016 19:21:34 En el demo online al hacer click en agregar [+] no agrega un item.
El plugin de formvalidation luego veo de implementarlo ;)
Saludos Votos: 0 - Link respuesta -
Fecha: 22-11-2016 19:27:46 Gracias Walter por la observación era un problema al cargar JQuery con el https, pero problema solucionado, espero te sirva bastante. Votos: 1 - Link respuesta
-
Fecha: 23-11-2016 12:15:23 Hola Walter, efectivamente, el codigo yo lo probe con GET y si iba, pero no con POST.
Ya esta corregido, prueba este codigo:
<!DOCTYPE html> <html lang="es"> <head> <title>Bootstrap Remito</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="formvalidation/dist/css/formValidation.css"/> <script type="text/javascript" src="../jquery/jquery.min.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="formvalidation/dist/js/formValidation.js"></script> <script type="text/javascript" src="formvalidation/dist/js/framework/bootstrap.js"></script> </head> <body> <div class="container"> <br> <div class="panel panel-primary "> <div class="panel-heading"> <h3 class="panel-title">Ingreso de items del remito</h3> </div> <form id="remitoForm" method="post" class="form-horizontal" action="procesarRemito.php"> <div class="form-group"> <label class="col-xs-1 control-label"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Items:</label> <div class="col-xs-8"> <input type="text" class="form-control" name="item[0][concepto]" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[0][cantidad]" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-info addButton"><i class="fa fa-plus glyphicon glyphicon-plus"></i></button> </div> </div> <!-- The template for adding new field --> <div class="form-group hide" id="itemsRemito"> <div class="col-xs-8 col-xs-offset-1"> <input type="text" class="form-control" name="item[][concepto]" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[][cantidad]" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-danger glyphicon glyphicon-trash removeButton"><i class="fa fa-minus"></i></button> </div> </div> <div class="form-group"> <div class="col-xs-5 col-xs-offset-1"> <button id="grabar" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-send" aria-hidden="true"></span> Grabar</button> </div> </div> </form> </div> <script> $(document).ready(function () { var form = document.getElementById("remitoForm"); document.getElementById("grabar").addEventListener("click", function () { var a_borrar = document.getElementById("itemsRemito"); form.removeChild(a_borrar); form.submit(); }); var conceptoValidators = { row: '.col-xs-8', // The title is placed inside a <div class="col-xs-4"> element validators: { notEmpty: { message: 'Requiere un concepto' } } }, cantidadValidators = { row: '.col-xs-2', validators: { notEmpty: { message: 'Requiere cantidad' }, digits: { message: 'Solo digitos' } } }, itemIndex = 0; $('#remitoForm') .formValidation({ framework: 'bootstrap', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { 'item[0][concepto]': conceptoValidators, 'item[0][cantidad]': cantidadValidators } }) // Add button click handler .on('click', '.addButton', function () { oldIndex = itemIndex; itemIndex++; var $template = $('#itemsRemito'), $clone = $template .clone() .removeClass('hide') .removeAttr('id') .attr('data-item-index', itemIndex) .insertBefore($template); // Update the name attributes $clone .find('[name="item[][concepto]"]').attr('name', 'item[' + itemIndex + '][concepto]').end() .find('[name="item[][cantidad]"]').attr('name', 'item[' + itemIndex + '][cantidad]').end(); // Add new fields // Note that we also pass the validator rules for new field as the third parameter $('#remitoForm') .formValidation('addField', 'item[' + itemIndex + '][concepto]', conceptoValidators) .formValidation('addField', 'item[' + itemIndex + '][cantidad]', cantidadValidators); }) // Remove button click handler .on('click', '.removeButton', function () { var $row = $(this).parents('.form-group'), index = $row.attr('data-item-index'); // Remove fields $('#remitoForm') .formValidation('removeField', $row.find('[name="item[' + index + '][concepto]"]')) .formValidation('removeField', $row.find('[name="item[' + index + '][cantidad]"]')); // Remove element containing the fields $row.remove(); }); }); </script> </body> </html>
y este codigo en procesarRemito.php
<pre> <?php print_r($_POST); ?> </pre>
Espero te sirva.
Un saludo.
Ahora si funciona por POST
Saludos Votos: 2 - Link respuesta -
Fecha: 23-11-2016 14:57:33 CorpLan muchas gracias por la corrección ;)
Alfonso: necesitaría que se envié por medio del método POST. Desconozco cual es el problema que no se envíen todos los datos por este método.
Me esta desquiciando en no lograr encontrar la solución a ese inconveniente. Esperemos que se pueda resolver.
A ambos les agradezco mucho por brindarme su tiempo en este tema. +1 para ustedes
Probare ambos códigos.
Si hallo la solución del envío de los datos por el método POST lo publicare. Si alguien encontro la solución que nos avise.
Saludos Votos: 1 - Link respuesta -
Fecha: 25-11-2016 09:37:25 Walter. He modificado mi código anterior y ya funciona por POST.
Pruebalo y me dices.
Sólo faltaría para mejorarlo, intentar renumerar las líneas al eliminar alguna de ellas Votos: 1 - Link respuesta -
Fecha: 28-11-2016 09:15:46 Hola
Alfonso y CorpLan, muchas gracias nuevamente a uds por su ayuda.
He probado los códigos proporcionado por ambos a los cuales me referiré mas adelante.
A lo largo del camino el código de ambos han evolucionado notoriamente a fin de resolver el problema en cuestión.
Con respecto al ultimo código de Alfonso
Con su ultima corrección Funciona perfectamente respetando el código original,que se enviado por el método POST y que integre el plugin de formvalidation, el código jquery original, bootstrap.
Como detalle formvalidation No funciona, no hace las validaciones. Se puede enviar si los campos están vacios, si están vacíos debería no enviar el formulario y marcarlo con una cruz.
Dejo el código final y funcional de Alfonso
Archivo: Remito.html
<!DOCTYPE html> <html lang="es"> <head> <title>Bootstrap Remito</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="formvalidation/dist/css/formValidation.css"/> <script type="text/javascript" src="../jquery/jquery.min.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="formvalidation/dist/js/formValidation.js"></script> <script type="text/javascript" src="formvalidation/dist/js/framework/bootstrap.js"></script> </head> <body> <div class="container"> <br> <div class="panel panel-primary "> <div class="panel-heading"> <h3 class="panel-title">Ingreso de items del remito</h3> </div> <form id="remitoForm" method="post" class="form-horizontal" action="remitoProcesar.php"> <div class="form-group"> <label class="col-xs-1 control-label"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Items:</label> <div class="col-xs-8"> <input type="text" class="form-control" name="item[0][concepto]" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[0][cantidad]" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-info addButton"><i class="fa fa-plus glyphicon glyphicon-plus"></i></button> </div> </div> <!-- The template for adding new field --> <div class="form-group hide" id="itemsRemito"> <div class="col-xs-8 col-xs-offset-1"> <input type="text" class="form-control" name="item[][concepto]" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[][cantidad]" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-danger glyphicon glyphicon-trash removeButton"><i class="fa fa-minus"></i></button> </div> </div> <div class="form-group"> <div class="col-xs-5 col-xs-offset-1"> <button id="grabar" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-send" aria-hidden="true"></span> Grabar</button> </div> </div> </form> </div> <script> $(document).ready(function () { var form = document.getElementById("remitoForm"); document.getElementById("grabar").addEventListener("click", function () { var a_borrar = document.getElementById("itemsRemito"); form.removeChild(a_borrar); form.submit(); }); var conceptoValidators = { row: '.col-xs-8', // The title is placed inside a <div class="col-xs-4"> element validators: { notEmpty: { message: 'Requiere un concepto' } } }, cantidadValidators = { row: '.col-xs-2', validators: { notEmpty: { message: 'Requiere cantidad' }, digits: { message: 'Solo digitos' } } }, itemIndex = 0; $('#remitoForm') .formValidation({ framework: 'bootstrap', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { 'item[0][concepto]': conceptoValidators, 'item[0][cantidad]': cantidadValidators } }) // Add button click handler .on('click', '.addButton', function () { oldIndex = itemIndex; itemIndex++; var $template = $('#itemsRemito'), $clone = $template .clone() .removeClass('hide') .removeAttr('id') .attr('data-item-index', itemIndex) .insertBefore($template); // Update the name attributes $clone .find('[name="item[][concepto]"]').attr('name', 'item[' + itemIndex + '][concepto]').end() .find('[name="item[][cantidad]"]').attr('name', 'item[' + itemIndex + '][cantidad]').end(); // Add new fields // Note that we also pass the validator rules for new field as the third parameter $('#remitoForm') .formValidation('addField', 'item[' + itemIndex + '][concepto]', conceptoValidators) .formValidation('addField', 'item[' + itemIndex + '][cantidad]', cantidadValidators); }) // Remove button click handler .on('click', '.removeButton', function () { var $row = $(this).parents('.form-group'), index = $row.attr('data-item-index'); // Remove fields $('#remitoForm') .formValidation('removeField', $row.find('[name="item[' + index + '][concepto]"]')) .formValidation('removeField', $row.find('[name="item[' + index + '][cantidad]"]')); // Remove element containing the fields $row.remove(); }); }); </script> </body> </html>
Archivo: remitoProcesar.php Lo altere adaptándolo a Bootstrap.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Datos obtenidos</title> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"/> </head> <body> <div class="container"> <div class="row"> <h2>Form data</h2> <hr/> <p>Datos Obtenidos</p> <pre><?php print_r($_POST); ?></pre> </div> </div> </body> </html>
Ejemplo básico para obtener el primer elemento:
<?php echo 'El item: '. $_POST['item'][0]['concepto'].' tiene '. $_POST['item'][0]['cantidad'];
Solo queda iterar por cada elemento del array de datos enviados para luego ser almacenado en una base de datos.
Con respecto al ultimo código de CorpLan. Tomo un camino alternativo de solución creando un plugin de jquery y finalmente logro integrar a bootstrap aunque queda integrar el plugin de formvalidation esto ultimo no desmerece de ninguna manera su trabajo. Queda ver como integrarlo.
Hay que darle también crédito por presentar un demo totalmente funcional!
Dejo los códigos proporcionados por CorpLan
Archivo: Remito.html
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Prueba Input's</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery.min.js"></script> <script src="jquery.addItem.js"></script> <script> var options = { id : "div_", icon : "trash", btn : ".bt_plus", element : "materiales", addClass : "btn-danger", removeClass : "btn-info", }; $(document).addItem(options); </script> </head> <body> <div class="container"> <br> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Ingreso de items del remito</h3> </div> <div class="container"> <br> <form id="form" class="form-horizontal" name="form" method="post" action="remitoProcesar.php"> <div id="div_1" class="form-group"> <label class="col-xs-1 control-label"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Items:</label> <div class="col-xs-8"> <input type="text" name="materiales[]" class="form-control"/> </div> <div class="col-xs-2"> <input type="text" name="cmateriales[]" class="form-control"/> </div> <div class="col-xs-1"> <!-- <input class="bt_plus" id="1" type="button" value="+" class="form-control"/> --> <button type="button" id="1" class="bt_plus btn btn-info addButton"><i class="glyphicon glyphicon-plus"></i></button> </div> </div> <div class="col-xs-5 col-xs-offset-1"> <button id="grabar" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-send" aria-hidden="true"></span> Grabar</button> </div> <div class="spacer"></div> </form> </div> </div> </div> </body> </html>
Archivo: jquery.addItem.js
/** @Author: Edinson Tique @Versión: 1.2 @Method: Bootstrap Structure @Year: 2016 @Contact: www.fb.com/QueCodigoPG **/ (function ($){ jQuery.fn.addItem = function(addItem){ $(document).ready(function() { $(addItem.btn).each(function (e){ $(this).bind("click", addItems); }); }); function addItems(){ var id = addItem.id, icon = addItem.icon, add = addItem.addClass, element = addItem.element, remove = addItem.removeClass; if(id === undefined){ id = "div_"; } if(icon === undefined){ icon = "remove"; } if(add === undefined){ add = "btn-danger"; } if(remove === undefined){ remove = "btn-info"; } var eventID = parseInt($(this).parent('div').parent('div').attr('id').replace(id,'')); var newEvent = (eventID+1); $newClone = $('#'+id+eventID).clone(true); $newClone.attr("id",id+newEvent); $newClone.children('div').children("input").eq(0).attr("id",element+newEvent).val(''); $newClone.children('div').children("input").eq(0).val(''); $newClone.children('div').children("input").eq(1).val(''); //$newClone.children('div').children("input").eq(2).attr("id",newEvent); $newClone.children('div').children("button").eq(0).attr("id",newEvent); $newClone.insertAfter($('#'+id+eventID)); $("#"+eventID).html('<i class="glyphicon glyphicon-'+icon+'"></i>').removeClass(remove).addClass(add).unbind("click",addItems); $("#"+eventID).bind("click",delRow); }; function delRow() { $(this).parent('div').parent('div').remove(); }; }; })(jQuery);
Archivo: remitoProcesar.php
<?php $materiales = $_POST["materiales"]; $cmateriales = $_POST["cmateriales"]; ?> <html lang="es"> <head> <meta charset="UTF-8"> <title>Mostrar inputs</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="container"> <br><br> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <td>Materiales</td> <td>Cantidad</td> </tr> </thead> <tbody> <?php for ($i=0; $i < count($materiales); $i++){ echo "<tr><td>".$materiales[$i]."</td><td>".$cmateriales[$i]."</td></tr>"; } ?> </tbody> </table> </div> </body> </html>
Solo queda iterar por cada elemento del array POST de lo datos enviados para luego ser almacenado en una base de datos. Modelar la base de datos para guardar los remitos.
Como agregado como OFFTOPIC ¿Que se puede mejorar? Que cuando haga click en [Grabar] antes que se envie el formulario, con jquery eliminar todos los items cuyos contenido sea Vacio en concepto y/o cantidad antes que se envie a remitoProcesar.php
formvalidation realice la validaciones correspondientes.
Les agradezco mucho a Alfonso y CorpLan por haberme brindado la solución al planteo y por haber contribuido enormemente a la comunidad, puesto que le servirá a todos aquello interesados en este tema en particular
Los códigos funcionales que han proporcionado lo he dispuesto a su descarga en MEGA.
He alterado los códigos a fin que funcionen localmente sin necesidad de usar los CDN de los plugins.
El archivo contiene los códigos HTML, PHP, jQuery, Bootstrap, formvalidation.
Existen dos carpetas con la soluciones presentadas:
- Alfonso
- CorpLan
Descarga remito.zip (3mb) Actualizado al 26/11/2016
Que tenga un buen dia.
Saludos Votos: 2 - Link respuesta -
Fecha: 28-11-2016 13:06:04 Si desean resolver el problema de formvalidation
Les dejo un código de ejemplo que funciona, el cual lo guardan en la carpeta remito del archivo que he dispuesto para descargar anteriormente.
Aqui funciona validator pero no envia los conceptos como se habia mencionado en un comienzo.
Archivo: validator_remito.html
<!DOCTYPE html> <html lang="es"> <head> <title>Bootstrap Remito</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="../formvalidation/dist/css/formValidation.css"/> <script type="text/javascript" src="../jquery/jquery.min.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="../formvalidation/dist/js/formValidation.js"></script> <script type="text/javascript" src="../formvalidation/dist/js/framework/bootstrap.js"></script> </head> <body> <div class="container"> <br> <div class="panel panel-primary "> <div class="panel-heading"> <h3 class="panel-title">Ingreso de items del remito</h3> </div> <form id="remitoForm" method="post" class="form-horizontal" action="remitoProcesar.php"> <div class="form-group"> <label class="col-xs-1 control-label">Items:</label> <div class="col-xs-8"> <input type="text" class="form-control" name="item[0].concepto" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[0].cantidad" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-default addButton"><i class="fa fa-plus glyphicon glyphicon-plus"></i></button> </div> </div> <!-- The template for adding new field --> <div class="form-group hide" id="itemsRemito"> <div class="col-xs-8 col-xs-offset-1"> <input type="text" class="form-control" name="concepto" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="cantidad" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-default removeButton btn btn-danger glyphicon glyphicon-trash "><i class="fa fa-minus"></i></button> </div> </div> <div class="form-group"> <div class="col-xs-5 col-xs-offset-1"> <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-send" aria-hidden="true"></span> Grabar</button> </div> </div> </form> <script> $(document).ready(function() { var conceptoValidators = { row: '.col-xs-8', // The title is placed inside a <div class="col-xs-4"> element validators: { notEmpty: { message: 'Ingrese Concepto' } } }, cantidadValidators = { row: '.col-xs-2', validators: { notEmpty: { message: 'Ingrese la cantidadidad' }, integer: { message: 'La cantidadidad es un entero' } } }, itemIndex = 0; $('#remitoForm') .formValidation({ framework: 'bootstrap', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { 'item[0].concepto': conceptoValidators, 'item[0].cantidad': cantidadValidators } }) // Add button click handler .on('click', '.addButton', function() { itemIndex++; var $template = $('#itemsRemito'), $clone = $template .clone() .removeClass('hide') .removeAttr('id') .attr('data-item-index', itemIndex) .insertBefore($template); // Update the name attributes $clone .find('[name="concepto"]').attr('name', 'item[' + itemIndex + '].concepto').end() .find('[name="cantidad"]').attr('name', 'item[' + itemIndex + '].cantidad').end(); // Add new fields // Note that we also pass the validator rules for new field as the third parameter $('#remitoForm') .formValidation('addField', 'item[' + itemIndex + '].concepto', conceptoValidators) .formValidation('addField', 'item[' + itemIndex + '].cantidad', cantidadValidators); }) // Remove button click handler .on('click', '.removeButton', function() { var $row = $(this).parents('.form-group'), index = $row.attr('data-item-index'); // Remove fields $('#remitoForm') .formValidation('removeField', $row.find('[name="item[' + index + '].concepto"]')) .formValidation('removeField', $row.find('[name="item[' + index + '].cantidad"]')); // Remove element containing the fields $row.remove(); }); }); </script> </body> </html>
He encontrado el problema del porque no funciona validator en el codigo de Alfonso.
Para que funcione validator el boton de envio tiene que se del tipo submit
asi:
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-send" aria-hidden="true"></span> Grabar</button>
en el codigo de Alfonso es de tipo button
<button id="grabar" type="button" class="btn btn-primary"><span class="glyphicon glyphicon-send" aria-hidden="true"></span> Grabar</button>
El codigo de Alfonso envia los datos correctamente pero no valida con Validator.
Mi codigo valida con validator pero no envia bien los datos, envia las cantidades sin conceptos.
el otro problema esta en el template para que sea validado, tiene que ser
<!-- The template for adding new field --> <div class="form-group hide" id="itemsRemito"> <div class="col-xs-8 col-xs-offset-1"> <input type="text" class="form-control" name="concepto" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="cantidad" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-default removeButton btn btn-danger glyphicon glyphicon-trash "><i class="fa fa-minus"></i></button> </div> </div> <!-- The template for adding new field -->
Y en el codigo de Alonso esta
<!-- The template for adding new field --> <div class="form-group hide" id="itemsRemito"> <div class="col-xs-8 col-xs-offset-1"> <input type="text" class="form-control" name="item[][concepto]" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[][cantidad]" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-danger glyphicon glyphicon-trash removeButton"><i class="fa fa-minus"></i></button> </div> </div> <!-- The template for adding new field -->
Me esto enloqueciendo viendo como integrar ambos codigos.
Saludos Votos: 1 - Link respuesta -
Fecha: 28-11-2016 15:49:21 Sigo haciendo pruebas, y ya hace la validación, el problema ahora es que si hay fallo en la valoración, deja de funcionar el boton de añadir lineas.
Los dos cambios son:
<button type="button" class="btn btn-info addButton"><i class="fa fa-plus glyphicon glyphicon-plus"></i></button>
.on('submit', function(){ var form = document.getElementById("remitoForm"); var a_borrar = document.getElementById("itemsRemito"); form.removeChild(a_borrar); })
Seguire investigando.
Aqui teneis el codigo modificado. ya nos queda menos.
<!DOCTYPE html> <html lang="es"> <head> <title>Bootstrap Remito</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="../formvalidation/dist/css/formValidation.css"/> <script type="text/javascript" src="../jquery/jquery.min.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="../formvalidation/dist/js/formValidation.js"></script> <script type="text/javascript" src="../formvalidation/dist/js/framework/bootstrap.js"></script> </head> <body> <div class="container"> <br> <div class="panel panel-primary "> <div class="panel-heading"> <h3 class="panel-title">Ingreso de items del remito</h3> </div> <form id="remitoForm" method="post" class="form-horizontal" action="remitoProcesar.php"> <div class="form-group"> <label class="col-xs-1 control-label"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Items:</label> <div class="col-xs-8"> <input type="text" class="form-control" name="item[0][concepto]" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[0][cantidad]" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-info addButton"><i class="fa fa-plus glyphicon glyphicon-plus"></i></button> </div> </div> <!-- The template for adding new field --> <div class="form-group hide" id="itemsRemito"> <div class="col-xs-8 col-xs-offset-1"> <input type="text" class="form-control" name="item[][concepto]" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[][cantidad]" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-danger glyphicon glyphicon-trash removeButton"><i class="fa fa-minus"></i></button> </div> </div> <div class="form-group"> <div class="col-xs-5 col-xs-offset-1"> <button type="submit" class="btn btn-primary grabar" on_click="borra_sobra"><span class="fa fa-plus glyphicon glyphicon-send" >Grabar</span></button> </div> </div> </form> </div> <script> $(document).ready(function () { var conceptoValidators = { row: '.col-xs-8', // The title is placed inside a <div class="col-xs-4"> element validators: { notEmpty: { message: 'Requiere un concepto' } } }, cantidadValidators = { row: '.col-xs-2', validators: { notEmpty: { message: 'Requiere cantidad' }, digits: { message: 'Solo digitos' } } }, itemIndex = 0; $('#remitoForm') // Submit Handler .on('submit', function(){ var form = document.getElementById("remitoForm"); var a_borrar = document.getElementById("itemsRemito"); form.removeChild(a_borrar); }) .formValidation({ framework: 'bootstrap', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { 'item[0][concepto]': conceptoValidators, 'item[0][cantidad]': cantidadValidators } }) // Add button click handler .on('click', '.addButton', function () { oldIndex = itemIndex; itemIndex++; var $template = $('#itemsRemito'), $clone = $template .clone() .removeClass('hide') .removeAttr('id') .attr('data-item-index', itemIndex) .insertBefore($template); // Update the name attributes $clone .find('[name="item[][concepto]"]').attr('name', 'item[' + itemIndex + '][concepto]').end() .find('[name="item[][cantidad]"]').attr('name', 'item[' + itemIndex + '][cantidad]').end(); // Add new fields // Note that we also pass the validator rules for new field as the third parameter $('#remitoForm') .formValidation('addField', 'item[' + itemIndex + '][concepto]', conceptoValidators) .formValidation('addField', 'item[' + itemIndex + '][cantidad]', cantidadValidators); }) // Remove button click handler .on('click', '.removeButton', function () { var $row = $(this).parents('.form-group'), index = $row.attr('data-item-index'); // Remove fields $('#remitoForm') .formValidation('removeField', $row.find('[name="item[' + index + '][concepto]"]')) .formValidation('removeField', $row.find('[name="item[' + index + '][cantidad]"]')); // Remove element containing the fields $row.remove(); }); }); </script> </body> </html>Votos: 2 - Link respuesta -
Fecha: 28-11-2016 16:51:53 He probado muchas cosas y sin resultado positivo
Alfonso, va muy bien encaminado tus mejoras.
Si existe el fallo que mencionas queal validarlo y da un erro al hacer click en agregar [+] no agrega un nuevo items, pero lo estas resolviendo.
He encontrado un problema en esta linea que es en [Grabar] en tu código esta de esta manera
<button type="submit" class="btn btn-primary grabar" on_click="borra_sobra"><span class="fa fa-plus glyphicon glyphicon-send" > Grabar</span></button>
lo cual cambia el css del botón por la ubicación del cierre de </span> y también en class="fa fa-plus glyphicon glyphicon-send" debería ser:
<button type="submit" class="btn btn-primary grabar" on_click="borra_sobra"><span class="glyphicon glyphicon-send" ></span> Grabar</button>
El inspector de elementos dice:
ReferenceError: borra_sobra is not defined remito.html :1:1
TypeError: Argument 1 of Node.removeChild is not an object remito.html:80:33 esto se estaria refiriendo a: form.removeChild(a_borrar);
Netbeans me marca un error con respecto: on_click="borra_sobra" como se observa en la imagen.
Por lo tanto debería ser:
<button type="submit" class="btn btn-primary grabar" onclick="borra_sobra"><span class="glyphicon glyphicon-send" ></span> Grabar</button>
Y no esta declarada borra_sobra y tampoco esta la class grabar
suprimiendo ello quedaria:
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-send" ></span> Grabar</button>
Sigo probando tu código. Votos: 1 - Link respuesta -
Fecha: 28-11-2016 17:46:48 Alfonso he cambiado también esta parte del código, verifica si estaría bien.
// Submit Handler .on('submit', function(){ var form = document.getElementById("remitoForm"); var a_borrar = document.getElementById("itemsRemito"); form.removeChild(a_borrar); })
Por:
// Submit Handler .on('submit', function () { $('#itemsRemito').remove(); })
Codigo completo:
<!DOCTYPE html> <html lang="es"> <head> <title>Bootstrap Remito</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="../formvalidation/dist/css/formValidation.css"/> <script type="text/javascript" src="../jquery/jquery.min.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="../formvalidation/dist/js/formValidation.js"></script> <script type="text/javascript" src="../formvalidation/dist/js/framework/bootstrap.js"></script> </head> <body> <div class="container"> <br> <div class="panel panel-primary "> <div class="panel-heading"> <h3 class="panel-title">Ingreso de items del remito</h3> </div> <form id="remitoForm" method="post" class="form-horizontal" action="remitoProcesar.php"> <div class="form-group"> <label class="col-xs-1 control-label"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Items:</label> <div class="col-xs-8"> <input type="text" class="form-control" name="item[0][concepto]" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[0][cantidad]" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-info addButton"><i class="fa fa-plus glyphicon glyphicon-plus"></i></button> </div> </div> <!-- The template for adding new field --> <div class="form-group hide" id="itemsRemito"> <div class="col-xs-8 col-xs-offset-1"> <input type="text" class="form-control" name="item[][concepto]" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[][cantidad]" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-danger glyphicon glyphicon-trash removeButton"><i class="fa fa-minus"></i></button> </div> </div> <div class="form-group"> <div class="col-xs-5 col-xs-offset-1"> <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-send" ></span> Grabar</button> </div> </div> </form> </div> <script> $(document).ready(function () { var conceptoValidators = { row: '.col-xs-8', // The title is placed inside a <div class="col-xs-4"> element validators: { notEmpty: { message: 'Requiere un concepto' } } }, cantidadValidators = { row: '.col-xs-2', validators: { notEmpty: { message: 'Requiere cantidad' }, digits: { message: 'Solo digitos' } } }, itemIndex = 0; $('#remitoForm') // Submit Handler .on('submit', function () { $('#itemsRemito').remove(); }) .formValidation({ framework: 'bootstrap', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { 'item[0][concepto]': conceptoValidators, 'item[0][cantidad]': cantidadValidators } }) // Add button click handler .on('click', '.addButton', function () { oldIndex = itemIndex; itemIndex++; var $template = $('#itemsRemito'), $clone = $template .clone() .removeClass('hide') .removeAttr('id') .attr('data-item-index', itemIndex) .insertBefore($template); // Update the name attributes $clone .find('[name="item[][concepto]"]').attr('name', 'item[' + itemIndex + '][concepto]').end() .find('[name="item[][cantidad]"]').attr('name', 'item[' + itemIndex + '][cantidad]').end(); // Add new fields // Note that we also pass the validator rules for new field as the third parameter $('#remitoForm') .formValidation('addField', 'item[' + itemIndex + '][concepto]', conceptoValidators) .formValidation('addField', 'item[' + itemIndex + '][cantidad]', cantidadValidators); }) // Remove button click handler .on('click', '.removeButton', function () { var $row = $(this).parents('.form-group'), index = $row.attr('data-item-index'); // Remove fields $('#remitoForm') .formValidation('removeField', $row.find('[name="item[' + index + '][concepto]"]')) .formValidation('removeField', $row.find('[name="item[' + index + '][cantidad]"]')); // Remove element containing the fields $row.remove(); }); }); </script> </body> </html>
Aun no encuentro la solución del agregar [+] después de la validación
el problema esta cuando se elimina al hacer submit con form.removeChild(a_borrar); o con
si comentas esa linea // $('#itemsRemito').remove(); funciona el [+]
De hecho la ultima linea de codigo
// Remove element containing the fields
$row.remove();
eliminaría los campos concepto y cantidad, etc del item que se ha eliminado pero no lo hace
aun no encuentro la solución Votos: 1 - Link respuesta -
Fecha: 29-11-2016 17:30:13 Hola, aqui tienes una nueva version.
ya hace las validaciones y envia los datos correctamente. Ya no necesitamos borrar nada antes del submit, ya que el div #itemRemito oculto, lo he sacado del form.
Cuando borras una linea, te la borra pero aun no reajusta los indices.
<!DOCTYPE html> <html lang="es"> <head> <title>Bootstrap Remito</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="../formvalidation/dist/css/formValidation.css"/> <script type="text/javascript" src="../jquery/jquery.min.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="../formvalidation/dist/js/formValidation.js"></script> <script type="text/javascript" src="../formvalidation/dist/js/framework/bootstrap.js"></script> </head> <body> <div class="container"> <br> <div class="panel panel-primary "> <div class="panel-heading"> <h3 class="panel-title">Ingreso de items del remito</h3> </div> <form id="remitoForm" method="post" class="form-horizontal" action="remitoProcesar.php"> <div class="remitoGroups" id="remitoGroups"> <div class="form-group"> <label class="col-xs-1 control-label"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Items:</label> <div class="col-xs-8"> <input type="text" class="form-control" name="item[0][concepto]" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[0][cantidad]" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-info addButton"><i class="fa fa-plus glyphicon glyphicon-plus"></i></button> </div> </div> </div> <!-- The template for adding new field --> <div class="form-group"> <div class="col-xs-5 col-xs-offset-1"> <button id="grabar" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-send" aria-hidden="true"></span> Grabar</button> </div> </div> </form> <div class="form-group hide" id="itemsRemito"> <div class="col-xs-8 col-xs-offset-1"> <input type="text" class="form-control" name="item[][concepto]" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[][cantidad]" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-danger glyphicon glyphicon-trash removeButton"><i class="fa fa-minus"></i></button> </div> </div> </div> <script> $(document).ready(function () { var form = document.getElementById("remitoForm"); var conceptoValidators = { row: '.col-xs-8', // The title is placed inside a <div class="col-xs-4"> element validators: { notEmpty: { message: 'Requiere un concepto' } } }, cantidadValidators = { row: '.col-xs-2', validators: { notEmpty: { message: 'Requiere cantidad' }, digits: { message: 'Solo digitos' } } }, itemIndex = 0; $('#remitoForm') .formValidation({ framework: 'bootstrap', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { 'item[0][concepto]': conceptoValidators, 'item[0][cantidad]': cantidadValidators } }) // Add button click handler .on('click', '.addButton', function () { oldIndex = itemIndex; itemIndex++; var $template = $('#itemsRemito'), $clone = $template .clone() .removeClass('hide') .removeAttr('id') .attr('data-item-index', itemIndex) .appendTo("#remitoGroups"); // .insertBefore($template); // Update the name attributes $clone .find('[name="item[][concepto]"]').attr('name', 'item[' + itemIndex + '][concepto]').end() .find('[name="item[][cantidad]"]').attr('name', 'item[' + itemIndex + '][cantidad]').end(); // Add new fields // Note that we also pass the validator rules for new field as the third parameter $('#remitoForm') .formValidation('addField', 'item[' + itemIndex + '][concepto]', conceptoValidators) .formValidation('addField', 'item[' + itemIndex + '][cantidad]', cantidadValidators); }) // Remove button click handler .on('click', '.removeButton', function () { var $row = $(this).parents('.form-group'), index = $row.attr('data-item-index'); // Remove fields $('#remitoForm') .formValidation('removeField', $row.find('[name="item[' + index + '][concepto]"]')) .formValidation('removeField', $row.find('[name="item[' + index + '][cantidad]"]')); // Remove element containing the fields $row.remove(); }); }); </script> </body> </html>
Creo que ya podria valer, porque aunque los indices no sean consecutivos, no creo que sea algo imprescindible.
Tambien falta que la primera linea pueda ser borrada, para lo cual habra que mover el boton de añadir a otra parte y que pueda funcionar aunque no quede ninguna linea.
Saludos
Alfonso Votos: 2 - Link respuesta -
Fecha: 30-11-2016 09:58:38 Nueva version modificada.
Permite eliminar todas las lineas, incluso la primera, para eso he modificado la posicion de los botones de añadir y enviar.
Si eliminamos 1 linea, las restantes se renumeran.
Al añadir 1 linea se fija el foco al campo concepto de dicha linea.f
Aqui teneis el codigo:
<!DOCTYPE html> <html lang="es"> <head> <title>Bootstrap Remito</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="../formvalidation/dist/css/formValidation.css"/> <script type="text/javascript" src="../jquery/jquery.min.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="../formvalidation/dist/js/formValidation.js"></script> <script type="text/javascript" src="../formvalidation/dist/js/framework/bootstrap.js"></script> </head> <body> <div class="container"> <br> <div class="panel panel-primary "> <div class="panel-heading"> <h3 class="panel-title">Ingreso de items del remito</h3> </div> <form id="remitoForm" method="post" class="form-horizontal" action="remitoProcesar.php"> <div class="form-group"> <label class="col-xs-1 control-label"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Items:</label> <div class="col-xs-1"> <button type="button" class="btn btn-info addButton"><i class="fa fa-plus glyphicon glyphicon-plus">Añadir</i></button> </div> <div class="col-xs-5 col-xs-offset-1"> <button id="grabar" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-send" aria-hidden="true"></span> Grabar</button> </div> </div> <div class="remitoGroups" id="remitoGroups"> <div class="form-group" data-item-index="0"> <div class="col-xs-8 col-xs-offset-1"> <input type="text" class="form-control" name="item[0][concepto]" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[0][cantidad]" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-danger glyphicon glyphicon-trash removeButton"><i class="fa fa-minus"></i></button> </div> </div> </div> <!-- The template for adding new field --> </form> <div class="form-group hide" id="itemsRemito"> <div class="col-xs-8 col-xs-offset-1"> <input type="text" class="form-control" name="item[][concepto]" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[][cantidad]" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-danger glyphicon glyphicon-trash removeButton"><i class="fa fa-minus"></i></button> </div> </div> </div> <script> $(document).ready(function () { var form = document.getElementById("remitoForm"); var conceptoValidators = { row: '.col-xs-8', // The title is placed inside a <div class="col-xs-4"> element validators: { notEmpty: { message: 'Requiere un concepto' } } }, cantidadValidators = { row: '.col-xs-2', validators: { notEmpty: { message: 'Requiere cantidad' }, digits: { message: 'Solo digitos' } } }, itemIndex = 0; $('#remitoForm') .formValidation({ framework: 'bootstrap', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { 'item[0][concepto]': conceptoValidators, 'item[0][cantidad]': cantidadValidators } }) // Add button click handler .on('click', '.addButton', function () { oldIndex = itemIndex; itemIndex++; var $template = $('#itemsRemito'), $clone = $template .clone() .removeClass('hide') .removeAttr('id') .attr('data-item-index', itemIndex) .appendTo("#remitoGroups"); // Update the name attributes $clone .find('[name="item[][concepto]"]').attr('name', 'item[' + itemIndex + '][concepto]').end() .find('[name="item[][cantidad]"]').attr('name', 'item[' + itemIndex + '][cantidad]').end(); // Add new fields // Note that we also pass the validator rules for new field as the third parameter $('#remitoForm') .formValidation('addField', 'item[' + itemIndex + '][concepto]', conceptoValidators) .formValidation('addField', 'item[' + itemIndex + '][cantidad]', cantidadValidators) .find('[name="item['+itemIndex+'][concepto]"]').focus(); }) // Remove button click handler .on('click', '.removeButton', function () { var $row = $(this).parents('.form-group'), index = $row.attr('data-item-index'); // Remove fields $('#remitoForm') .formValidation('removeField', $row.find('[name="item[' + index + '][concepto]"]')) .formValidation('removeField', $row.find('[name="item[' + index + '][cantidad]"]')); // Remove element containing the fields $row.remove(); nuevoIndex = index; index++; while (index <= itemIndex){ $('#remitoForm') .find('[name="item['+index+'][concepto]"]').formValidation('removeField', 'item[' + index + '][concepto]').attr('name', 'item[' + nuevoIndex + '][concepto]').end() .find('[name="item['+index+'][cantidad]"]').formValidation('removeField', 'item[' + index + '][cantidad]').attr('name', 'item[' + nuevoIndex + '][cantidad]').end() .formValidation('resetForm') .find('[data-item-index="'+index+'"]').attr('data-item-index',nuevoIndex).end() .formValidation('addField', 'item[' + nuevoIndex + '][concepto]', conceptoValidators) .formValidation('addField', 'item[' + nuevoIndex + '][cantidad]', cantidadValidators) .formValidation('validate'); nuevoIndex++; index++; } itemIndex--; }); }); </script> </body> </html>Votos: 2 - Link respuesta -
Fecha: 01-12-2016 17:18:27 Hola Alonso, Muy bueno!!!! Eres un genio!
No he respondido antes porque he estado probando el código y tratando de modificarlo.
Una cuestión estética de bootstrap, el botón [Añadir] su fuente no es la que utiliza bootstrap, y no queda bien alineado el botón con respecto.
Otro inconveniente que he encontrado es cuando no hay ningún item, se puede GRABAR, si no hay items no se debería poder grabar.
Como en la siguiente imagen.
Todos los cambios lo he realizado con tu ultimo código.
He comentado dentro del código para que te sea mas simple entenderlo.
He cambiado:
var form = document.getElementById("remitoForm");
por jQuery:
form = $("remitoForm");
¿Para que es utilizado esa linea, var form? no me doy cuenta que función cumple.
He modificado el código.
cuando no hay ningún item el botón [Grabar] desaparece, si no hay items y se agregar un item vuelve aparecer el botón [Grabar]
No hay items desaparece el botón [Grabar]
Se agrega un item y vuelve aparecer el botón [Grabar]
Este es el codigo:
<!DOCTYPE html> <html lang="es"> <head> <title>Bootstrap Remito</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="../formvalidation/dist/css/formValidation.css"/> <script type="text/javascript" src="../jquery/jquery.min.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="../formvalidation/dist/js/formValidation.js"></script> <script type="text/javascript" src="../formvalidation/dist/js/framework/bootstrap.js"></script> </head> <body> <div class="container"> <br> <div class="panel panel-primary "> <div class="panel-heading"> <h3 class="panel-title">Ingreso de items del remito</h3> </div> <form id="remitoForm" method="post" class="form-horizontal" action="remitoProcesar.php"> <div class="form-group"> <label class="col-xs-1 control-label"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Items:</label> <div class="col-xs-11"> <button type="button" class="btn btn-info addButton"><span class="fa fa-plus glyphicon glyphicon-plus"></span> Añadir</button> <button id="grabar" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-send" aria-hidden="true"></span> Grabar</button> </div> </div> <div class="remitoGroups" id="remitoGroups"> <div class="form-group" data-item-index="0"> <div class="col-xs-8 col-xs-offset-1"> <input type="text" class="form-control" name="item[0][concepto]" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[0][cantidad]" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-danger glyphicon glyphicon-trash removeButton"><i class="fa fa-minus"></i></button> </div> </div> </div> <!-- The template for adding new field --> </form> <div class="form-group hide" id="itemsRemito"> <div class="col-xs-8 col-xs-offset-1"> <input type="text" class="form-control" name="item[][concepto]" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[][cantidad]" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-danger glyphicon glyphicon-trash removeButton"><i class="fa fa-minus"></i></button> </div> </div> </div> <script> $(document).ready(function () { form = $("remitoForm"); $('#remitoForm').find('[name="item[0][concepto]"]').focus(); var conceptoValidators = { row: '.col-xs-8', // The title is placed inside a <div class="col-xs-4"> element validators: { notEmpty: { message: 'Requiere un concepto' } } }, cantidadValidators = { row: '.col-xs-2', validators: { notEmpty: { message: 'Requiere cantidad' }, digits: { message: 'Solo digitos' } } }, itemIndex = 0; $('#remitoForm') .formValidation({ framework: 'bootstrap', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { 'item[0][concepto]': conceptoValidators, 'item[0][cantidad]': cantidadValidators } }) // Add button click handler .on('click', '.addButton', function () { oldIndex = itemIndex; itemIndex++; if (itemIndex == 0) { // si hay items muestro el boton GRABAR $('#grabar').show('slow'); } var $template = $('#itemsRemito'), $clone = $template .clone() .removeClass('hide') .removeAttr('id') .attr('data-item-index', itemIndex) .appendTo("#remitoGroups"); // Update the name attributes $clone .find('[name="item[][concepto]"]').attr('name', 'item[' + itemIndex + '][concepto]').end() .find('[name="item[][cantidad]"]').attr('name', 'item[' + itemIndex + '][cantidad]').end(); // Add new fields // Note that we also pass the validator rules for new field as the third parameter $('#remitoForm') .formValidation('addField', 'item[' + itemIndex + '][concepto]', conceptoValidators) .formValidation('addField', 'item[' + itemIndex + '][cantidad]', cantidadValidators) .find('[name="item[' + itemIndex + '][concepto]"]').focus(); }) // Remove button click handler .on('click', '.removeButton', function () { if (itemIndex == 0) { // si no hay items oculto el boton GRABAR $('#grabar').hide('slow'); } var $row = $(this).parents('.form-group'), index = $row.attr('data-item-index'); // Remove fields $('#remitoForm') .formValidation('removeField', $row.find('[name="item[' + index + '][concepto]"]')) .formValidation('removeField', $row.find('[name="item[' + index + '][cantidad]"]')); // Remove element containing the fields $row.remove(); nuevoIndex = index; index++; while (index <= itemIndex) { $('#remitoForm') .find('[name="item[' + index + '][concepto]"]').formValidation('removeField', 'item[' + index + '][concepto]').attr('name', 'item[' + nuevoIndex + '][concepto]').end() .find('[name="item[' + index + '][cantidad]"]').formValidation('removeField', 'item[' + index + '][cantidad]').attr('name', 'item[' + nuevoIndex + '][cantidad]').end() .formValidation('resetForm') .find('[data-item-index="' + index + '"]').attr('data-item-index', nuevoIndex).end() .formValidation('addField', 'item[' + nuevoIndex + '][concepto]', conceptoValidators) .formValidation('addField', 'item[' + nuevoIndex + '][cantidad]', cantidadValidators) .formValidation('validate'); nuevoIndex++; index++; } itemIndex--; $('#remitoForm').find('[name="item[' + itemIndex + '][concepto]"]').focus(); }); }); </script> </body> </html>
El próximo código es el mismo que el anterior, solo que he agregado un contador de items con el motivo de poder establecer la máxima cantidad de items permitidos.
La variable itemConatdor lleva el control de la cantidad de items. Este se actualiza, si se eliminan o se agregan items.
Si se llega al MAXIMO de items permitidos, que es la variable MAX_item el boton [Añadir] desaparece y vuelve a aparecer si se elimina algún item.
Por ejemplo si esta permitido agregar hasta 5 items. Se establece la variable en el código MAX_item = 5;
Si se establece MAX_item = 0; se puede agregar todos los items que se desee, tendria el comportamiento igual que el codigo anterior.
En la siguiente imagen de ejemplo se ha llegado a la máxima cantidad de items permitidos que son hasta 5. Alli desaparece el botón [Añadir]
Elimino un item y vuelve aparecer el botón [Añadir] ya que hay disponible agregar un item mas.
Si elimino a todos los items desaparece el botón [Grabar]
Codigo:
<!DOCTYPE html> <html lang="es"> <head> <title>Bootstrap Remito</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="../formvalidation/dist/css/formValidation.css"/> <script type="text/javascript" src="../jquery/jquery.min.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="../formvalidation/dist/js/formValidation.js"></script> <script type="text/javascript" src="../formvalidation/dist/js/framework/bootstrap.js"></script> </head> <body> <div class="container"> <br> <div class="panel panel-primary "> <div class="panel-heading"> <h3 class="panel-title">Ingreso de items del remito</h3> </div> <form id="remitoForm" method="post" class="form-horizontal" action="remitoProcesar.php"> <div class="form-group"> <label class="col-xs-1 control-label"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Items:</label> <div class="col-xs-11"> <button id="agregar" type="button" class="btn btn-info addButton"><span class="fa fa-plus glyphicon glyphicon-plus"></span> Añadir</button> <button id="grabar" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-send" aria-hidden="true"></span> Grabar</button> </div> </div> <div class="remitoGroups" id="remitoGroups"> <div class="form-group" data-item-index="0"> <div class="col-xs-8 col-xs-offset-1"> <input type="text" class="form-control" name="item[0][concepto]" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[0][cantidad]" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-danger glyphicon glyphicon-trash removeButton"><i class="fa fa-minus"></i></button> </div> </div> </div> <!-- The template for adding new field --> </form> <div class="form-group hide" id="itemsRemito"> <div class="col-xs-8 col-xs-offset-1"> <input type="text" class="form-control" name="item[][concepto]" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[][cantidad]" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-danger glyphicon glyphicon-trash removeButton"><i class="fa fa-minus"></i></button> </div> </div> </div> <script> $(document).ready(function () { var MAX_item = 5; // maximo de items permitidos, si el valor es 0 es ilimitado de items var itemConatdor = 1 // inicializo el conatdor de item cuand carga la pagina form = $("remitoForm"); var conceptoValidators = { row: '.col-xs-8', // The title is placed inside a <div class="col-xs-4"> element validators: { notEmpty: { message: 'Requiere un concepto' } } }, cantidadValidators = { row: '.col-xs-2', validators: { notEmpty: { message: 'Requiere cantidad' }, digits: { message: 'Solo digitos' } } }, itemIndex = 0; $('#remitoForm') .formValidation({ framework: 'bootstrap', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { 'item[0][concepto]': conceptoValidators, 'item[0][cantidad]': cantidadValidators } }) // Add button click handler .on('click', '.addButton', function () { if (itemConatdor == 0) { //si el contador es 0 hay item muestro el boton GRABAR $('#grabar').show('slow'); } if ((itemConatdor < MAX_item) || (MAX_item == 0)) { // verifico que el contador de item sea menor al MAXimo permitido, o MAX_item sea 0 que es inimitado de items itemConatdor++; // conatdor de items le sumo 1 al agregar un item itemIndex++; oldIndex = itemIndex; var $template = $('#itemsRemito'), $clone = $template .clone() .removeClass('hide') .removeAttr('id') .attr('data-item-index', itemIndex) .appendTo("#remitoGroups"); // Update the name attributes $clone .find('[name="item[][concepto]"]').attr('name', 'item[' + itemIndex + '][concepto]').end() .find('[name="item[][cantidad]"]').attr('name', 'item[' + itemIndex + '][cantidad]').end(); // Add new fields // Note that we also pass the validator rules for new field as the third parameter $('#remitoForm') .formValidation('addField', 'item[' + itemIndex + '][concepto]', conceptoValidators) .formValidation('addField', 'item[' + itemIndex + '][cantidad]', cantidadValidators) .find('[name="item[' + itemIndex + '][concepto]"]').focus(); }else{ // del if del contador de itema MAX // si es mayor al MAX escondo el boton de AREGAR $('#agregar').hide('slow'); } // cierre del IF }) // Remove button click handler .on('click', '.removeButton', function () { itemConatdor--; // conatdor de item le resto 1 al eliminar un item if (itemConatdor == 0) { // si el contador es 0 no hay item escondo el boton AGREGAR $('#grabar').hide('slow'); // oculto el boton AGREGAR }else{ $('#agregar').show('slow'); // Muestro el boton AGREGAR } var $row = $(this).parents('.form-group'), index = $row.attr('data-item-index'); // Remove fields $('#remitoForm') .formValidation('removeField', $row.find('[name="item[' + index + '][concepto]"]')) .formValidation('removeField', $row.find('[name="item[' + index + '][cantidad]"]')); // Remove element containing the fields $row.remove(); nuevoIndex = index; index++; while (index <= itemIndex) { $('#remitoForm') .find('[name="item[' + index + '][concepto]"]').formValidation('removeField', 'item[' + index + '][concepto]').attr('name', 'item[' + nuevoIndex + '][concepto]').end() .find('[name="item[' + index + '][cantidad]"]').formValidation('removeField', 'item[' + index + '][cantidad]').attr('name', 'item[' + nuevoIndex + '][cantidad]').end() .formValidation('resetForm') .find('[data-item-index="' + index + '"]').attr('data-item-index', nuevoIndex).end() .formValidation('addField', 'item[' + nuevoIndex + '][concepto]', conceptoValidators) .formValidation('addField', 'item[' + nuevoIndex + '][cantidad]', cantidadValidators) .formValidation('validate'); nuevoIndex++; index++; } itemIndex--; }); }); </script> </body> </html>
Alfonso: Has pruebas a ambos códigos y me comentas.
Esta mejorando muchísimo el código.
El único detalle que encontré es que si se elimina un item pierde el foco. Modifique el código de tal manera que si se elimina un ítem el foco lo hace en el concepto del ultimo item.
Cuando se carga la pagina por primera vez hace foco en el concepto del primer y único item.
Quedo en la espera de tu respuesta a la pregunta que he realizado al principio y los comentarios sobre la ultima modificación.
Que tengas un buen día.
Saludos. Votos: 1 - Link respuesta -
Fecha: 02-12-2016 03:55:41 Hola. La variable form ya no es necesaria, era para borrar el grupo itemsremito pero como ahora esta fuera del formulario ya no es necesario. Se puede borrar esa línea.
En cuanto al contador, ya existe es ítemIndex, pero inicializado a 0 como índice de array.
Lo de limitar el número de líneas en caso de superarlas debería aparecer algún mensaje.
Para mi gusto, prefiero inhabilitar los botones. Ya que al ocultarlos cambia el diseño. Por ejemplo al ocultar el de añadir, el de grabar ocupa su posición, con lo cual si no se dan cuenta, puede ser pulsado por error.
Por lo demás lo veo correcto.
Aqui lo tienes modificado, a ver que te parece.
<!DOCTYPE html> <html lang="es"> <head> <title>Bootstrap Remito</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="../formvalidation/dist/css/formValidation.css"/> <script type="text/javascript" src="../jquery/jquery.min.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="../formvalidation/dist/js/formValidation.min.js"></script> <script type="text/javascript" src="../formvalidation/dist/js/framework/bootstrap.min.js"></script> </head> <body> <div class="container"> <br> <div class="panel panel-primary "> <div class="panel-heading"> <h3 class="panel-title">Ingreso de items del remito</h3> </div> <form id="remitoForm" method="post" class="form-horizontal" action="remitoProcesar.php"> <div class="form-group"> <label class="col-xs-1 control-label"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Items:</label> <div class="col-xs-11"> <button id="agregar" type="button" class="btn btn-info addButton"><span class="fa fa-plus glyphicon glyphicon-plus"></span> Añadir</button> <button id="grabar" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-send" aria-hidden="true"></span> Grabar</button> </div> </div> <div class="remitoGroups" id="remitoGroups"> <div class="form-group" data-item-index="0"> <div class="col-xs-8 col-xs-offset-1"> <input type="text" class="form-control" name="item[0][concepto]" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[0][cantidad]" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-danger glyphicon glyphicon-trash removeButton"><i class="fa fa-minus"></i></button> </div> </div> </div> <!-- The template for adding new field --> </form> <div class="form-group hide" id="itemsRemito"> <div class="col-xs-8 col-xs-offset-1"> <input type="text" class="form-control" name="item[][concepto]" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[][cantidad]" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-danger glyphicon glyphicon-trash removeButton"><i class="fa fa-minus"></i></button> </div> </div> </div> </div> <script> $(document).ready(function () { var MAX_item = 5; // maximo de items permitidos, si el valor es 0 es ilimitado de items var conceptoValidators = { row: '.col-xs-8', // The title is placed inside a <div class="col-xs-4"> element validators: { notEmpty: { message: 'Requiere un concepto' } } }, cantidadValidators = { row: '.col-xs-2', validators: { notEmpty: { message: 'Requiere cantidad' }, digits: { message: 'Solo digitos' } } }, itemIndex = 0; $('#grabar').removeAttr('disabled');// activo el boton GRABAR $('#agregar').removeAttr('disabled');// activo el boton AGREGAR $('#remitoForm').find('[name="item[' + itemIndex + '][concepto]"]').focus(); $('#remitoForm') .formValidation({ framework: 'bootstrap', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { 'item[0][concepto]': conceptoValidators, 'item[0][cantidad]': cantidadValidators } }) // Add button click handler .on('click', '.addButton', function () { if (itemIndex < 0) { //si el contador es menor de 0 no hay item desactivo el boton GRABAR $('#grabar').removeAttr('disabled'); } $('remitoForm').formValidation('resetForm') .formValidation('validate'); itemIndex++; oldIndex = itemIndex; var $template = $('#itemsRemito'), $clone = $template .clone() .removeClass('hide') .removeAttr('id') .attr('data-item-index', itemIndex) .appendTo("#remitoGroups"); // Update the name attributes $clone .find('[name="item[][concepto]"]').attr('name', 'item[' + itemIndex + '][concepto]').end() .find('[name="item[][cantidad]"]').attr('name', 'item[' + itemIndex + '][cantidad]').end(); // Add new fields // Note that we also pass the validator rules for new field as the third parameter $('#remitoForm') .formValidation('addField', 'item[' + itemIndex + '][concepto]', conceptoValidators) .formValidation('addField', 'item[' + itemIndex + '][cantidad]', cantidadValidators); if ((itemIndex >= MAX_item - 1 ) && (MAX_item != 0)) { // verifico que el contador de item sea menor al MAXimo permitido, o MAX_item sea 0 que es ilimitado de items // si es mayor al MAX desactivo el boton de AGREGAR $('#agregar').attr('disabled', 'disabled');// desactivo el boton AGREGAR } // cierre del IF $('#remitoForm').find('[name="item[' + itemIndex + '][concepto]"]').focus(); }) // Remove button click handler .on('click', '.removeButton', function () { var $row = $(this).parents('.form-group'), index = $row.attr('data-item-index'); // Remove fields $('#remitoForm') .formValidation('removeField', $row.find('[name="item[' + index + '][concepto]"]')) .formValidation('removeField', $row.find('[name="item[' + index + '][cantidad]"]')); // Remove element containing the fields $row.remove(); nuevoIndex = index; index++; while (index <= itemIndex) { $('#remitoForm') .find('[name="item[' + index + '][concepto]"]').formValidation('removeField', 'item[' + index + '][concepto]').attr('name', 'item[' + nuevoIndex + '][concepto]').end() .find('[name="item[' + index + '][cantidad]"]').formValidation('removeField', 'item[' + index + '][cantidad]').attr('name', 'item[' + nuevoIndex + '][cantidad]').end() .formValidation('resetForm') .find('[data-item-index="' + index + '"]').attr('data-item-index', nuevoIndex).end() .formValidation('addField', 'item[' + nuevoIndex + '][concepto]', conceptoValidators) .formValidation('addField', 'item[' + nuevoIndex + '][cantidad]', cantidadValidators); nuevoIndex++; index++; } itemIndex--; if (itemIndex < MAX_item - 1 ){ $('#agregar').removeAttr('disabled'); // desactivo el boton AGREGAR } if (itemIndex < 0) { // si el contador es 0 no hay item desactivo el boton GRABAR $('#grabar').attr('disabled', 'disabled'); $('#agregar').focus(); }else{ // si no, lo activo $('#grabar').removeAttr('disabled'); $('#remitoForm').find('[name="item[' + itemIndex + '][concepto]"]').focus(); } }); }); </script> </body> </html>
Un saludo,
Alfonso Votos: 2 - Link respuesta -
Fecha: 06-12-2016 20:15:50 Hola Alfonso
Tu idea me parece muy buena la de no ocultar los botones, que es mejor inhabilitar su uso.
Hice unas mejoras utilizando tu ultimo codigo, un contador de items, por ejemplo si MAX_item = 5 en el mismo botón añadir dirá 0/5 y a medida que se vallan agregando items cambia el primer numero hasta llegar al máximo 5/5
La otra mejora es sobre lo que has sugerido, aparece un mensaje de alerta sobre que no se puede grabar el remito porque o hay al menos un item como asi también que se ha alcanzado el máximo de items.
Como se ve en la siguiente animación:
El problema ahora por resolver es que cuando MAX_item = 0 que es sin limite de items máximo, cuando elimino todos los items no se desactiva el botón Grabar.
Como se ve en la siguiente animación:
Te dejo el código para que lo puedas probar y revisar.
<!DOCTYPE html> <html lang="es"> <head> <title>Remito</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="../formvalidation/dist/css/formValidation.css"/> <script type="text/javascript" src="../jquery/jquery.min.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="../formvalidation/dist/js/formValidation.min.js"></script> <script type="text/javascript" src="../formvalidation/dist/js/framework/bootstrap.min.js"></script> </head> <body> <div class="container"> <br> <div class="panel panel-primary "> <div class="panel-heading"> <h3 class="panel-title">Ingreso de items del remito</h3> </div> <form id="remitoForm" method="post" class="form-horizontal" action="remitoProcesar.php"> <div class="form-group"> <label class="col-xs-1 control-label"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Items:</label> <div class="col-xs-11"> <button id="agregar" type="button" class="btn btn-info addButton"><span class="fa fa-plus glyphicon glyphicon-plus"></span> Añadir <span id="agregarCant" class="badge active">1</span></button> <button id="grabar" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-send" aria-hidden="true"></span> Grabar</button> <div id="mensajeDeAlerta" class="alert alert-danger" role="alert" style="display: none"></div> </div> </div> <div class="remitoGroups" id="remitoGroups"> <div class="form-group" data-item-index="0"> <div class="col-xs-8 col-xs-offset-1"> <input type="text" class="form-control" name="item[0][concepto]" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[0][cantidad]" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-danger glyphicon glyphicon-trash removeButton"><i class="fa fa-minus"></i></button> </div> </div> </div> <!-- The template for adding new field --> </form> <div class="form-group hide" id="itemsRemito"> <div class="col-xs-8 col-xs-offset-1"> <input type="text" class="form-control" name="item[][concepto]" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[][cantidad]" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-danger glyphicon glyphicon-trash removeButton"><i class="fa fa-minus"></i></button> </div> </div> </div> </div> <script> $(document).ready(function () { var MAX_item = 5; // maximo de items permitidos, si el valor es 0 es ilimitado de items $('#agregarCant').html(Math.abs(MAX_item - 1) + ' / ' + MAX_item); // cantidad disponible de items para agregar var conceptoValidators = { row: '.col-xs-8', // The title is placed inside a <div class="col-xs-4"> element validators: { notEmpty: { message: 'Requiere un concepto' } } }, cantidadValidators = { row: '.col-xs-2', validators: { notEmpty: { message: 'Requiere cantidad' }, digits: { message: 'Solo digitos' } } }, itemIndex = 0; $('#grabar').removeAttr('disabled').removeAttr('title');// activo el boton GRABAR $('#agregar').removeAttr('disabled');// activo el boton AGREGAR $('#remitoForm').find('[name="item[' + itemIndex + '][concepto]"]').focus(); $('#remitoForm') .formValidation({ framework: 'bootstrap', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { 'item[0][concepto]': conceptoValidators, 'item[0][cantidad]': cantidadValidators } }) // Add button click handler .on('click', '.addButton', function () { if (itemIndex < 0) { //si el contador es menor de 0 no hay item desactivo el boton GRABAR $('#grabar').removeAttr('disabled').removeAttr('title'); } $('remitoForm').formValidation('resetForm') .formValidation('validate'); itemIndex++; oldIndex = itemIndex; var $template = $('#itemsRemito'), $clone = $template .clone() .removeClass('hide') .removeAttr('id') .attr('data-item-index', itemIndex) .appendTo("#remitoGroups"); // Update the name attributes $clone .find('[name="item[][concepto]"]').attr('name', 'item[' + itemIndex + '][concepto]').end() .find('[name="item[][cantidad]"]').attr('name', 'item[' + itemIndex + '][cantidad]').end(); // Add new fields // Note that we also pass the validator rules for new field as the third parameter $('#remitoForm') .formValidation('addField', 'item[' + itemIndex + '][concepto]', conceptoValidators) .formValidation('addField', 'item[' + itemIndex + '][cantidad]', cantidadValidators); if ((itemIndex >= MAX_item - 1) && (MAX_item != 0)) { // verifico que el contador de item sea menor al MAXimo permitido, o MAX_item sea 0 que es ilimitado de items // si es mayor al MAX desactivo el boton de AGREGAR $('#agregar').attr('disabled', 'disabled').attr('title', 'Maximo de cantidad de items alcanzado');// desactivo el boton AGREGAR $('#mensajeDeAlerta').html("Máximo de cantidad de items alcanzado.").show(); $('#agregarCant').html(0 + ' / ' + MAX_item); // cantidad disponible de items para agregar cero } else { $('#mensajeDeAlerta').html(".").hide(); // quito la alerta de grabar si no hay item } // cierre del IF $('#remitoForm').find('[name="item[' + itemIndex + '][concepto]"]').focus(); $('#agregarCant').html(Math.abs(MAX_item - itemIndex - 1) + ' / ' + MAX_item); // cantidad disponible de items para agregar cero }) // Remove button click handler .on('click', '.removeButton', function () { $('#mensajeDeAlerta').html("").hide(); $('#agregarCant').html(Math.abs(MAX_item - itemIndex) + ' / ' + MAX_item); // cantidad disponible de items para agregar var $row = $(this).parents('.form-group'), index = $row.attr('data-item-index'); // Remove fields $('#remitoForm') .formValidation('removeField', $row.find('[name="item[' + index + '][concepto]"]')) .formValidation('removeField', $row.find('[name="item[' + index + '][cantidad]"]')); // Remove element containing the fields $row.remove(); nuevoIndex = index; index++; while (index <= itemIndex) { $('#remitoForm') .find('[name="item[' + index + '][concepto]"]').formValidation('removeField', 'item[' + index + '][concepto]').attr('name', 'item[' + nuevoIndex + '][concepto]').end() .find('[name="item[' + index + '][cantidad]"]').formValidation('removeField', 'item[' + index + '][cantidad]').attr('name', 'item[' + nuevoIndex + '][cantidad]').end() .formValidation('resetForm') .find('[data-item-index="' + index + '"]').attr('data-item-index', nuevoIndex).end() .formValidation('addField', 'item[' + nuevoIndex + '][concepto]', conceptoValidators) .formValidation('addField', 'item[' + nuevoIndex + '][cantidad]', cantidadValidators); nuevoIndex++; index++; } itemIndex--; if (itemIndex < MAX_item - 1) { $('#agregar').removeAttr('disabled').removeAttr('title');// desactivo el boton AGREGAR $('#grabar').attr('disabled', 'disabled'); } if (itemIndex < 0) { // si el contador es 0 no hay item desactivo el boton GRABAR $('#mensajeDeAlerta').html("Para grabar el remito debe existir al menos un item.").show(); //muestro alerta que no se puede grabar sin item $('#agregar').focus(); } else { // si no, lo activo $('#grabar').removeAttr('disabled'); $('#remitoForm').find('[name="item[' + itemIndex + '][concepto]"]').focus(); } }); }); </script> </body> </html>
Cada modificación se va mejorando.
Que tengas un buen día
Saludos Votos: 1 - Link respuesta -
Fecha: 07-12-2016 02:55:37 Walter:
2 Temas
1.- He probado tu ejemplo y no he logrado hacerlo funcionar.
2.- Hice un prototipo básico al respecto el cual expongo a continuación y posteriomente paso a explicar mi problemática:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#agregar").click(function(){ $("ol").append("<li id='li'><select><option>Provincia</option><option>CABA</option><option>Buenos Aires</option><option>Entre Rios</option><option>Santa Fe</option><option>Corrientes</option><option>Misiones</option></select></li>"); }); $("#eliminar").click(function(){ $("#li").remove(); }); }); </script> </head> <body> <p>Mi ejemplo</p> <ol></ol><br> <button id='agregar'>Agregar</button> <button id='eliminar'>Eliminar</button><br> </body> </html>]
Problemas con los que me encuentro en mi ejemplo:
1.- Como podes aprecias en el js en click indico la acción que llevara adelante el append.
Hasta acá va todo en coche ... el problema se me plantea cuando el select se carga mediante una consulta Mysql (¿Dónde y como la pongo?), lo que se me ocurrió es intentar cargar el select con js o ver de agregarle Ajax ....
2.- En mi proyecto a la vez tengo que necesariamente hacer un onchange en el select, dado que debo pasar información por Ajax.
3.- En realidad lo que busco es hacer algo parecido a esto Enlace ... linck que expuso CorPlan y adaptarlo a select dinámicos.
Espero tu comentario, te felicito por trabajo realizado tanto a vos como a Alfonso como a CorPlan Votos: 0 - Link respuesta -
Fecha: 07-12-2016 05:36:17 Hola Walter,
ya esta solucionado, habia algunos chequeos cruzados . pruebalo a ver.
<!DOCTYPE html> <html lang="es"> <head> <title>Remito</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="../formvalidation/dist/css/formValidation.css"/> <script type="text/javascript" src="../jquery/jquery.min.js"></script> <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> <script type="text/javascript" src="../formvalidation/dist/js/formValidation.min.js"></script> <script type="text/javascript" src="../formvalidation/dist/js/framework/bootstrap.min.js"></script> </head> <body> <div class="container"> <br> <div class="panel panel-primary "> <div class="panel-heading"> <h3 class="panel-title">Ingreso de items del remito</h3> </div> <form id="remitoForm" method="post" class="form-horizontal" action="remitoProcesar.php"> <div class="form-group"> <label class="col-xs-1 control-label"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Items:</label> <div class="col-xs-11"> <button id="agregar" type="button" class="btn btn-info addButton"><span class="fa fa-plus glyphicon glyphicon-plus"></span> Añadir <span id="agregarCant" class="badge active">1</span></button> <button id="grabar" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-send" aria-hidden="true"></span> Grabar</button> <div id="mensajeDeAlerta" class="alert alert-danger" role="alert" style="display: none"></div> </div> </div> <div class="remitoGroups" id="remitoGroups"> <div class="form-group" data-item-index="0"> <div class="col-xs-8 col-xs-offset-1"> <input type="text" class="form-control" name="item[0][concepto]" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[0][cantidad]" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-danger glyphicon glyphicon-trash removeButton"><i class="fa fa-minus"></i></button> </div> </div> </div> <!-- The template for adding new field --> </form> <div class="form-group hide" id="itemsRemito"> <div class="col-xs-8 col-xs-offset-1"> <input type="text" class="form-control" name="item[][concepto]" placeholder="Concepto" /> </div> <div class="col-xs-2"> <input type="text" class="form-control" name="item[][cantidad]" placeholder="Cant" /> </div> <div class="col-xs-1"> <button type="button" class="btn btn-danger glyphicon glyphicon-trash removeButton"><i class="fa fa-minus"></i></button> </div> </div> </div> </div> <script> $(document).ready(function () { var MAX_item = 5; // maximo de items permitidos, si el valor es 0 es ilimitado de items $('#agregarCant').html(Math.abs(MAX_item - 1) + ' / ' + MAX_item); // cantidad disponible de items para agregar var conceptoValidators = { row: '.col-xs-8', // The title is placed inside a <div class="col-xs-4"> element validators: { notEmpty: { message: 'Requiere un concepto' } } }, cantidadValidators = { row: '.col-xs-2', validators: { notEmpty: { message: 'Requiere cantidad' }, digits: { message: 'Solo digitos' } } }, itemIndex = 0; $('#grabar').removeAttr('disabled').removeAttr('title');// activo el boton GRABAR $('#agregar').removeAttr('disabled');// activo el boton AGREGAR $('#remitoForm').find('[name="item[' + itemIndex + '][concepto]"]').focus(); $('#remitoForm') .formValidation({ framework: 'bootstrap', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { 'item[0][concepto]': conceptoValidators, 'item[0][cantidad]': cantidadValidators } }) // Add button click handler .on('click', '.addButton', function () { $('remitoForm').formValidation('resetForm') .formValidation('validate'); itemIndex++; oldIndex = itemIndex; var $template = $('#itemsRemito'), $clone = $template .clone() .removeClass('hide') .removeAttr('id') .attr('data-item-index', itemIndex) .appendTo("#remitoGroups"); // Update the name attributes $clone .find('[name="item[][concepto]"]').attr('name', 'item[' + itemIndex + '][concepto]').end() .find('[name="item[][cantidad]"]').attr('name', 'item[' + itemIndex + '][cantidad]').end(); // Add new fields // Note that we also pass the validator rules for new field as the third parameter $('#remitoForm') .formValidation('addField', 'item[' + itemIndex + '][concepto]', conceptoValidators) .formValidation('addField', 'item[' + itemIndex + '][cantidad]', cantidadValidators); if ((itemIndex >= MAX_item - 1) && (MAX_item != 0)) { // verifico que el contador de item sea menor al MAXimo permitido, o MAX_item sea 0 que es ilimitado de items // si es mayor al MAX desactivo el boton de AGREGAR $('#agregar').attr('disabled', 'disabled').attr('title', 'Maximo de cantidad de items alcanzado');// desactivo el boton AGREGAR $('#mensajeDeAlerta').html("Máximo de cantidad de items alcanzado.").show(); $('#agregarCant').html(0 + ' / ' + MAX_item); // cantidad disponible de items para agregar cero } else { $('#mensajeDeAlerta').html(".").hide(); // quito la alerta de grabar si no hay item } // cierre del IF if (itemIndex >= 0 ) { $('#grabar').removeAttr('disabled'); } $('#remitoForm').find('[name="item[' + itemIndex + '][concepto]"]').focus(); $('#agregarCant').html(Math.abs(MAX_item - itemIndex - 1) + ' / ' + MAX_item); // cantidad disponible de items para agregar cero }) // Remove button click handler .on('click', '.removeButton', function () { $('#mensajeDeAlerta').html("").hide(); $('#agregarCant').html(Math.abs(MAX_item - itemIndex) + ' / ' + MAX_item); // cantidad disponible de items para agregar var $row = $(this).parents('.form-group'), index = $row.attr('data-item-index'); // Remove fields $('#remitoForm') .formValidation('removeField', $row.find('[name="item[' + index + '][concepto]"]')) .formValidation('removeField', $row.find('[name="item[' + index + '][cantidad]"]')); // Remove element containing the fields $row.remove(); nuevoIndex = index; index++; while (index <= itemIndex) { $('#remitoForm') .find('[name="item[' + index + '][concepto]"]').formValidation('removeField', 'item[' + index + '][concepto]').attr('name', 'item[' + nuevoIndex + '][concepto]').end() .find('[name="item[' + index + '][cantidad]"]').formValidation('removeField', 'item[' + index + '][cantidad]').attr('name', 'item[' + nuevoIndex + '][cantidad]').end() .formValidation('resetForm') .find('[data-item-index="' + index + '"]').attr('data-item-index', nuevoIndex).end() .formValidation('addField', 'item[' + nuevoIndex + '][concepto]', conceptoValidators) .formValidation('addField', 'item[' + nuevoIndex + '][cantidad]', cantidadValidators); nuevoIndex++; index++; } itemIndex--; $('#agregar').removeAttr('disabled').removeAttr('title');// Activo el boton AGREGAR ya que si hemos borrado 1 linea siempre sera posible añadir otra if (itemIndex < 0) { // si no hay lineas $('#grabar').attr('disabled','disabled'); // desactivo el boton Grabar y $('#mensajeDeAlerta').html("Para grabar el remito debe existir al menos un item.").show(); //muestro alerta que no se puede grabar sin item $('#agregar').focus(); } else { // si no, lo activo $('#grabar').removeAttr('disabled'); $('#remitoForm').find('[name="item[' + itemIndex + '][concepto]"]').focus(); } }); }); </script> </body> </html>
Antuan, no entiendo bien que es lo que quieres.
1.- tienes 1 select y quieres añadir dinamicamente las opciones desde mysql
2.- Quieres añadir varios select dinamicamente, con sus opciones desde mysql.
Muestra mas o menos que tienes hecho, como es la tabla de la base de datos, como se selecciona que select hay que añadir, que funciones se tienen que disparar con el onchange...
Saludos
Alfonso Votos: 1 - Link respuesta -
Fecha: 07-12-2016 06:05:17 Antuan,
Mira a ver si es esto.
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ maxItem = 0; $("#agregar").click(function(){ $("ol").append("<li id='li_" + maxItem + "'><select name='Provincia'><option>CABA</option><option>Buenos Aires</option><option>Entre Rios</option><option>Santa Fe</option><option>Corrientes</option><option>Misiones</option></select></li>"); maxItem++; }); $("#eliminar").click(function(){ maxItem--; $('ol').find('[id="li_' + maxItem + '"]').remove(); }); }); </script> </head> <body> <p>Mi ejemplo</p> <ol></ol><br> <button id='agregar'>Agregar</button> <button id='eliminar'>Eliminar</button><br> </body> </html>]
Saludos
Alfonso Votos: 1 - Link respuesta -
Fecha: 07-12-2016 07:44:51 Alfonso
Ante todo muchas gracias por tu ayuda ...
La pregunta es como puedo hacer para que estas líneas de script realicen ese proceso, ya que tengo un select que se carga con un una consulta mysql por medio de php ...
Aquí mi script:
<div class="form-group"> <div class="col-sm-3"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-map-marker" aria-hidden="true"></i> - 1º</span> <?php $res=mysqli_query($con, "SELECT id_provincia, provincia FROM tabla_provincias ORDER BY provincia ASC ");?> <select class='form-control' id='' name='id_provincia_1' onchange="from(document.form1.id_provincia_1.value,'localidad_1','buscar_localidades_1_proceso.php')"> <option value="">Seleccione Provincia</option> <?php while($row=mysqli_fetch_assoc($res)){ ?> <option value="<?php echo $row['id_provincia']; ?>"><?php echo $row['provincia']; ?></option> <?php } ?> </select> </div> </div> <div id="localidad_1"></div> </div>Votos: 0 - Link respuesta -
Fecha: 07-12-2016 10:45:01 Hola Antuan,
creo que seria mas o menos asi.
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ maxItem = 0; $("#agregar").click(function(){ var $template = $('#origen'), $clone = $template .clone() // duplicamos el grupo <li id="origen"> .removeClass('hide') // le quitamos la clase hide .removeAttr('id') // le borramos la id "origen" .removeAttr('style') // le quitamos el style para que sea visible .attr('id', 'li_' + maxItem) // le asignamos una id correspondiente al numero de linea .appendTo("ol"); // lo copiamos al grupo <ol> maxItem++; }); $("#eliminar").click(function(){ maxItem--; $('ol').find('[id="li_' + maxItem + '"]').remove(); }); }); </script> </head> <body> <p>Mi ejemplo</p> <ol>Provincia:</ol><br> <button id='agregar'>Agregar</button> <button id='eliminar'>Eliminar</button><br> <!-- Creamos el grupo li con nuestros datos, pero en oculto. Aqui puedes poner todo lo que quieras que se añada. --> <li class="hide" id="origen" style="display:none;"> <div class="form-group")> <div class="col-sm-3"> <div class="input-group"> <!-- <span class="input-group-addon"><i class="fa fa-map-marker" aria-hidden="true">- 1º</i> </span> --> <?php $res=mysqli_query($con, "SELECT id_provincia, provincia FROM tabla_provincias ORDER BY provincia ASC ");?> <select class='form-control' id='' name='id_provincia_1' onchange="from(document.form1.id_provincia_1.value,'localidad_1','buscar_localidades_1_proceso.php')"> <option value="">Seleccione Provincia</option> <?php while($row=mysqli_fetch_assoc($res)){ ?> <option value="<?php echo $row['id_provincia']; ?>"><?php echo $row['provincia']; ?></option> <?php } ?> </select> </div> </div> <div id="localidad_1"></div> </div> </li> </body> </html>
La parte del <li> no visible, la puedes hacer variable, de modo que por ejemplo, en un select tengas varias opciones por ejemplo, provincias, paises, colores,...y al pulsar el boton agregar insertes un duplicado de la opcion elegida.
por ejemplo:
<li class="hide" id="provincias" style="display:none;"> ..... </li> <li class="hide" id="paises" style="display:none;"> ..... </li> <li class="hide" id="colores" style="display:none;"> ..... </li>
y en la linea
var $template = $('#origen'), cambiar $('#origen') por $('#' + valor) siendo valor el campo del select anterior.
Pruebalo y ya me diras.
Alfonso Votos: 0 - Link respuesta -
Fecha: 12-12-2016 19:24:04 Alfonso:
Muchísimas gracias por tus correcciones.Funciona perfectamente. Esta quedando muy bueno.
En este momento estoy estudiando el jQuery User Interface Datepicker para agregar una fecha de emisión del remito donde se selecciona por medio de un calendario.
Cuando lo tenga listo lo publico.
Mientras tranto para los interesados estoy viendo sobre el calendario de este post
La idea es agregarle mas funcionalidad, ademas de la fecha, la posibilidad de elegir una razón social a la cual se le emitirá tal remito el cual se selecciona por medio de un select proveniente de una base de datos, entre otras ideas que irán surgiendo.
Que bueno que se haya sumado Antuan a este desafío.
Entre todos podremos lograr algo muy interesante.
Que tengan un buen dia
Saludos Votos: 1 - Link respuesta -
Fecha: 14-12-2016 15:33:55 Walter / Alfonso
Ante todo disculpas por no responder rápidamente, me aquejan unos problemas de salud.
He realizado una serie de correcciones al código, con la finalidad de hacerlo mas sencillo e inyectarle Ajax.
Me voy a limitar a tirarle una idea a Walter sobre el Datepicker .... yo en realidad uso esta librería que me gusta mas "DATETIME PICKER " LINCK PAGINA PRINCIPAL
He aquí mi código ... aclaro que funciona perfecto
/// Traigo el DATETIMEPICKER despues de la PETICION AJAX $("#origen_int").change(function() { $.ajax({ url: 'buscar_origen_proceso.php', type: 'post', data: 'id=' + $("#origen_int").find(':selected').val(), success: function(data){ $("#origen_del_servicio").html(data), $('.kalofa').datetimepicker({ format:'Y-m-d H:i:00', lang:'es', value:'',step:5 }) } }); });
SOLO restaría incorporar en la pagina donde se ejecuta ...
<script src="../time_picker/jquery.js"></script> <script src="../time_picker/build/jquery.datetimepicker.full.js"></script> <script src="../time_picker/i18n/grid.locale-es.js"></script> <script> jQuery.datetimepicker.setLocale('es'); jQuery('#datetimepicker').datetimepicker({ i18n:{ de:{ months:[ 'Enero','Febrero','Marzo','Abril', 'Mayo','Junio','Julio','Augusto', 'Septiembre','Octubre','Noviembre','Diciembre', ], dayOfWeek:[ "Do.", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa.", ] } }, timepicker:false, format:'Y-m-d' }); </script>Votos: 1 - Link respuesta -
Fecha: 12-04-2017 06:22:56 Tengo armado una forma diferente para trabajar con entrada de productos.
Dejo un link para que vean el funcionamiento del mismo (Demo alta de remitos)
Basicamente es un formulario y una tabla con ID, ITEM que uso de manera transitoria.
Al momento de confirmar guardo la tabla definitiva.
Les dejo el link
aplicacion de remitos
Saludos,
Pablo Votos: 2 - Link respuesta -
Fecha: 30-05-2017 00:44:26 Hola,
Perdonen responder tan tarde,
Antuan Es fácil agregar la lista, solamente debes agregar el otro div con el mismo elemento y el script se encargara del resto.
Aquí un ejemplo con el select
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Prueba Input's</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery.min.js"></script> <script src="jquery.addItem.js"></script> <script> var options = { id : "div_", icon : "trash", btn : ".bt_plus", element : "materiales", addClass : "btn-danger", removeClass : "btn-info", }; $(document).addItem(options); </script> </head> <body> <div class="container"> <br> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Ingreso de items del remito</h3> </div> <div class="container"> <br> <form id="form" class="form-horizontal" name="form" method="post" action="remitoProcesar.php"> <div id="div_1" class="form-group"> <label class="col-xs-1 control-label"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Items:</label> <div class="col-xs-8"> <input type="text" name="materiales[]" class="form-control"/> </div> <div class="col-xs-2"> <select name="provincia[]" class="form-control"><option>Provincia</option><option>CABA</option><option>Buenos Aires</option><option>Entre Rios</option><option>Santa Fe</option><option>Corrientes</option><option>Misiones</option></select> </div> <div class="col-xs-2"> <input type="text" name="cmateriales[]" class="form-control"/> </div> <div class="col-xs-1"> <!-- <input class="bt_plus" id="1" type="button" value="+" class="form-control"/> --> <button type="button" id="1" class="bt_plus btn btn-info addButton"><i class="glyphicon glyphicon-plus"></i></button> </div> </div> <div class="col-xs-5 col-xs-offset-1"> <button id="grabar" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-send" aria-hidden="true"></span> Grabar</button> </div> <div class="spacer"></div> </form> </div> </div> </div> </body> </html>
Nota: estoy trabajando en una nueva versión del script ya que tuve la necesidad de volver a utilizarlo.
Esta es la actualización
jquery.addItem.js
/** @Author: Edinson Tique @Versión: 1.3 @Method: Bootstrap Structure @Year: 2017 @Contact: www.fb.com/QueCodigoPG **/ (function ($){ jQuery.fn.addItem = function(option){ $(document).ready(function() { $("input").each(function (e){ $(this).val(''); }); $(option.btn).each(function (e){ $(this).bind("click", addItems); }); $(option.rmBtn).each(function (e){ $(this).bind("click", delRow); }); }); function addItems(){ var defaults = { id: "div_", MaxItem: 0, form: "form", icon: "remove", addClass: "btn-danger", removeClass: "btn-info", } var options = $.extend({}, defaults, option); var element = $(options.form).children("div").eq(-2); var eventID = parseInt(element.attr('id').replace(options.id,'')); var newEvent = (eventID+1); $newClone = $('#'+options.id+eventID).clone(true); $newClone.attr("id",options.id+newEvent).attr("data-num",newEvent); $newClone.children('div').children("input").eq(0).val(''); $newClone.children('div').children("input").eq(1).val(''); //$newClone.children('div').children("input").eq(2).attr("id",newEvent); $newClone.children('div').children("button").eq(0).attr("id",newEvent); $newClone.insertAfter($('#'+options.id+eventID)); $("#"+eventID).html('<i class="glyphicon glyphicon-'+options.icon+'"></i>').removeClass(options.removeClass).addClass(options.addClass); $("#"+eventID).bind("click",delRow); }; function delRow() { $(this).parent('div').parent('div').fadeOut("slow").remove(); var element = $(options.form).children("div").eq(-2); }; }; })(jQuery);
Remiso.html
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Prueba Input's</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery.min.js"></script> <script src="js/qc.addItem.js"></script> <script> var options = { id: "div_", icon: "trash", form: "#form", btn : ".addButton", rmBtn: ".removeButton", addClass : "btn-danger", removeClass : "btn-info", }; $(document).addItem(options); </script> </head> <body> <div class="container"> <br> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Ingreso de items del remito</h3> </div> <div class="container"> <br> <form id="form" class="form-horizontal" name="form" method="post" action="remitoProcesar.php"> <div class="form-group"> <label class="col-xs-1 control-label"></span> Opciones:</label> <div class="col-xs-11"> <button type="button" class="btn btn-info addButton bt_plus"><span class="fa fa-plus glyphicon glyphicon-plus"></span> Añadir</button> <button id="grabar" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-send" aria-hidden="true"></span> Grabar</button> </div> </div> <div id="div_1" class="form-group"> <label class="col-xs-1 control-label"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> Items:</label> <div class="col-xs-6"> <input type="text" name="materiales[]" class="form-control"/> </div> <div class="col-xs-2"> <select name="provincia[]" class="form-control"><option>Provincia</option><option>CABA</option><option>Buenos Aires</option><option>Entre Rios</option><option>Santa Fe</option><option>Corrientes</option><option>Misiones</option></select> </div> <div class="col-xs-2"> <input type="text" name="cmateriales[]" class="form-control"/> </div> <div class="col-xs-1"> <!-- <input class="bt_plus" id="1" type="button" value="+" class="form-control"/> --> <button type="button" id="1" class="btn btn-danger removeButton"><i class="glyphicon glyphicon-trash"></i></button> </div> </div> <div class="spacer"></div> </form> </div> </div> </div> </body> </html>
PD: tengo un problema y es al eliminar el primer elemento no se pueden crear más porque no hay de donde clonar.
Veo que ustedes usan un pequeño elemento oculto para poder eliminar el mismo, pero esto no me parece muy buena practica, ya que tocaría duplicar el formulario y para alguien convencional que no sepa que es, perderá usabilidad del mismo!
Saludos Votos: 1 - Link respuesta -
Fecha: 23-04-2018 17:49:06 Walter Sanchez: ¿Hacen remitos legales de AFIP? Porque eso no lo tengo. Votos: 0 - Link respuesta
-
Fecha: 20-10-2019 15:22:27 Hola, se que este pregunta tiene tiempo pero como solucionaron el problema? podrian pasar el codigo por favor ?
GRacias Votos: 0 - Link respuesta
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión
