I'm using a jQuery code to add products that are chosen from a select list to a table . The product name and quantity are included, and lastly only the button to remove the product from the table. I have a input hidden
that should be populated with an array of all products added to the table this way:
value="[nomeproduto][25],[produto2][15]"
Each time I add a product to the table it should be added to the value of this input hidden
, but my code only inserts 1 product, the other problem is that when removing the product it should also exit the value of input hidden
.
The code:
$('#add_produto').on('click', function () {
var table = $('#cesta_produtos tbody'), // Tabela de produtos
list = $('#lista_produtos').val(), // Select com a lista de produtos
quant = $('#quant_produtos').val(), // Campo com a quantidade de produtos
remove = "<a href='#' class='del_produto'><i class='icon-remove-small'></i></a>", // Link para remover o produto
input_hidden = $('#products_array'),
prod_array = []; // Array de produtos
// Remove a mensagem de cesta vazia depois que produto é adicionado
$('#cesta_vazia').remove();
// Insere o produto selecionado no select list dentro da tabela
table.append("<tr><td class='produto'>" + list + "</td><td class='quantidade'>" + quant + "</td><td>" + remove + "</td></tr>");
prod_array.push("[" + list + "]" + "[" + quant + "]");
input_hidden.val(prod_array);
console.log("novo produto adicionado :)");
console.log(input_hidden.val());
});
// Remoção de produtos da tabela
$(document).on('click', '.del_produto', function (e) {
e.preventDefault();
// Janela de confirmação de exclusão do item
var dialog = confirm("Clique 'OK' para remover o produto, ou 'cancelar' para mantê-lo na lista.");
if (dialog == true) {
$(this).closest('tr').remove();
console.log("produto removido :(");
} else if (dialog == false) {
console.log("produto mantido :O");
}
});
JSFiddle: link