Bueno luego de haber creado la estructura básica que necesitamos para hacer nuestros campos automáticos, ahora toca la parte dinámica de dichos campos.
¿Que hace todo ese codigo?
Muy simple, en primer lugar captura los valores que nos interesan, al dar click sobre nuestro boton verde
Si todo va como queremos pasamos a colocar nuestros campos al DIV con id = "for_new_adds" para que se cree el efecto que queremos.
Y eso es todo para esta entrada, falta una donde explicaremos como hacer que cada campo sea funcional, espero les haya agradado
$("#addToDOM").click(function(){ var object_toAdd = ""; //nombre del producto var description = $("#id_producto :selected").text(); //precio del producto var price = $("#id_producto").val(); //cantidad var quantity = $(".cantidad").val(); var result = parseFloat(price) * parseInt(quantity); if(price.trim() === '') { object_toAdd += '\ \ Error:\ Debe seleccionar un producto\'; $(object_toAdd).appendTo("#Adds"); } else { $(".alert-danger").remove(); if(quantity.trim() === '') { object_toAdd += '\ \ Error:\ Debe ingresar una cantidad\'; $(object_toAdd).appendTo("#Adds"); } else { $(".alert-warning").remove(); //creando el agregado object_toAdd += '' + description + '\ \ ' + price + '\ '+ result.toFixed(2) + ''; var addToDiv = $(object_toAdd).appendTo("#for_new_adds"); var deleteLink = $(''); deleteLink.appendTo(addToDiv); deleteLink.click(function () { addToDiv.remove(); }); } } }); });
¿Que hace todo ese codigo?
Muy simple, en primer lugar captura los valores que nos interesan, al dar click sobre nuestro boton verde
$("#addToDOM").click(function(){ var object_toAdd = ""; //nombre del producto var description = $("#id_producto :selected").text(); //precio del producto var price = $("#id_producto").val(); //cantidad var quantity = $(".cantidad").val(); var result = parseFloat(price) * parseInt(quantity); });Luego hace una simple validacion para saber si se a seleccionado uno de los 4 productos que tenemos disponibles y a la vez mostramos una advertencia en caso de que no se haya seleccionado nada. Luego hacemos algo similar pero con la cantidad de productos
if(price.trim() === '') { object_toAdd += '\ \ Error:\ Debe seleccionar un producto\'; $(object_toAdd).appendTo("#Adds"); } else { $(".alert-danger").remove(); if(quantity.trim() === '') { object_toAdd += '\ \ Error:\ Debe ingresar una cantidad\'; $(object_toAdd).appendTo("#Adds"); } else { //Aca el codigo para agregar en el DIV id = "for_new_adds" } } });
Si todo va como queremos pasamos a colocar nuestros campos al DIV con id = "for_new_adds" para que se cree el efecto que queremos.
$(".alert-warning").remove(); //creando el agregado object_toAdd += '' + description + '\ \ ' + price + '\ '+ result.toFixed(2) + ''; var addToDiv = $(object_toAdd).appendTo("#for_new_adds"); var deleteLink = $(''); deleteLink.appendTo(addToDiv); deleteLink.click(function () { addToDiv.remove(); });
Y eso es todo para esta entrada, falta una donde explicaremos como hacer que cada campo sea funcional, espero les haya agradado