add / remove array to an input hidden

2

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

    
asked by anonymous 30.06.2014 / 22:37

2 answers

0

I agree with Sergio's answer, maybe it is better to re-evaluate the way to capture the parameters, but if you want to keep this strategy,

1st When adding products - Whenever there is onclick to add a new producer, you recreate the prod_array = []; , so this is always the last product in the array, I suggest you set this array to global variable, example:

prod_array = []; // Array de produtos
$('#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'>Remover<i class='icon-remove-small'></i></a>", 
      // Link para remover o produto
    input_hidden = $('#products_array');

    // 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());
});

2nd When removing item - To remove the product from the array, you will have to find it by value and remove, in the example below I used splice () , to remove the item:

   // 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) {
        var tr = $(this).closest('tr'); //seleciona a tr
        var list = tr.find('td').eq(0).text(); // seleciona o produto
        var quant = tr.find('td').eq(1).text(); // seleciona a quantidade
        //procura a posição no array
        var index = prod_array.indexOf("[" + list + "]" + "[" + quant + "]");
        prod_array.splice(index, 1); //remove do array
        tr.remove(); //remove a linha
        console.log("produto removido :(");
        console.log(prod_array);

    } else if (dialog == false) {

        console.log("produto mantido :O");
        console.log(prod_array);

    }
});

JSFiddle

    
01.07.2014 / 00:04
1

I suggest changing strategy.

Keeping your idea of having a string, try doing so:

function recalcular(item, qtd) {
    prod_array[item] = qtd;
    var string = '';
    for (var prod in prod_array) {
        if (prod_array[prod]) string += '[' + prod + '][' + prod_array[prod] + ']';
    }
    $('#products_array').val(string);
}

This idea should however be used in a function to be able to call remover as well. Note that the object is in scope.

If you want to do this in a new way use this object at the top, remove the input hidden, and submit via ajax by passing prod_array.serialize() in the data field. This way also facilitates the removal of elements when clicking the remove since it can do delete prod_array.nomeproduto; or only zero prod_array.nomeproduto = 0;

Example: link

    
30.06.2014 / 23:21