add/remove array to an Hidden input

Question

I am using a jQuery code to add products that are chosen in a select list à a table. Included is the product name and quantity, and finally only the button to remove the product from the table. I have a input hidden which should be filled 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 also it should come out of the value of the 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: http://jsfiddle.net/K2hc4/1/

Answer 1

I suggest changing strategy.

Keeping up your idea of having a string, test do 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 call it from remover also. Note that the object is in available scope.

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

Example: http://jsfiddle.net/gbKnT/

Answer 2

I agree with Sergio’s answer, maybe it is better to reevaluate the way to capture the parameters, more if you want to maintain this strategy, follow a suggested implementation

1º When adding products - Whenever there is onclick to add a new producer, you recreate the prod_array = [];, in this way is always the last product in the array, I suggest you define this array as 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());
});

2º When removing item - To remove the product from the array, you will have to locate it by the value and remove, in the example below 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