Get values from selected checkboxes and their respective prices

Navigation
3


Well, I'm developing an online ordering system, initially just for learning purposes, but I came across something that I have no idea how to do and would greatly appreciate any kind of help. In the products.php page I establish two connections with the DB and search the products in the products table by category and the additions in the table we add : 

$sql = "SELECT p.id_produto, p.nome_produto, p.preco_produto, p.id_categoria, c.nome_categoria FROM produtos p, categorias c WHERE c.id_categoria = p.id_categoria ORDER BY p.id_categoria, p.nome_produto";
$stmt = $conexao->prepare($sql);
$stmt->execute();

$sql2 = "SELECT id_acrescimo, nome_acrescimo, preco_acrescimo FROM acrescimos ORDER BY nome_acrescimo";
$stmt2 = $conexao->prepare($sql2);
$stmt2->execute();

$num = $stmt->rowCount();
$categoria = null;

if($num>0)
{
    while ($row = $stmt->fetch(PDO::FETCH_ASSOC))
    {
        extract($row);
        if($categoria != $id_categoria)
        {
            if(!is_null($categoria)) { echo "</table>"; }

        echo "<h1>{$nome_categoria}</h1>
        <table>
            <tr>
                <th>NOME</th>
                <th>PREÇO</th>
                <th>QUANTIDADE</th>";
                if($id_categoria == 1) echo" <th>ACRÉSCIMOS</th>";
            echo "</tr>";

            $categoria = $id_categoria;
        }
        $preco_produto_reajustado = number_format($preco_produto, 2, ",", ".");
        echo "
        <tr>
            <td>
                <div class='id-produto' style='display: none'>{$id_produto}</div>
                <div class='nome-produto'>{$nome_produto}</div></td>
                <td>R&#36;{$preco_produto_reajustado}
            </td>
            <td>
                <input type='number' name='quantidade' value='1' min='1' max='20'/>
            </td>";
            if($id_categoria == 1)
            {
                echo "<td>";
                while ($row = $stmt2->fetch(PDO::FETCH_ASSOC))
                {
                    extract($row);
                    $preco_acrescimo_reajustado = number_format($preco_acrescimo, 2, ",", ".");
                    echo "
                    <input type='checkbox' name='{$nome_acrescimo}' value='{$nome_acrescimo}'/>{$nome_acrescimo} - R&#36;{$preco_acrescimo_reajustado} <input type='number' name='quantidade_acr[]' value='1' min='1' max='5'/><br/>
                    ";
                }
                echo "</td>";
            }
            echo "<td>
                <form class='adicionar'>
                    <button type='submit'>Adicionar</button>
                </form>
            </td>
        </tr>";
    }
    echo "</table>";
}

As you could see from this code, if the corresponding category ID equals 1, another column will be created in the table . The Accruals column. And that's where my biggest problem lies. If you analyzed the code well, you could see that my output will look something like: DidyounoticethecheckboxesintheAccrualscolumn?SowhatIamtryingtodo(unsuccessfully)is,intheclickbuttonontheAddbutton,getthevaluesofthecheckboxesselectedaccordinglywiththeirnamesandpricesinthetableweadded.Buthowtodothat?
IneedtogetthesevaluesandstoretheminvariablestolaterinsertthemintoSESSIONanddisplaythemalongwiththeothersintheuser'scart.Inproducts.phpIhaveajQueryfunctionthatstoresthedataoftheselectedrowinvariablestobeinsertedintotheirgivenvariablesinSESSION:

$(document).ready(function(){$('.adicionar').on('submit',function(){varid_produto=$(this).closest('tr').find('.id-produto').text();varnome_produto=$(this).closest('tr').find('.nome-produto').text();varquantidade=$(this).closest('tr').find('input').val();window.location.href="adicionar.php?id_produto=" + id_produto + "&nome_produto=" + nome_produto + "&quantidade=" + quantidade;
        return false;
    });
});
asked by anonymous 10.04.2015 / 13:17

2 answers

1

You can do the following in your form, put the data- attribute (the parameter you want to capture): 

<input type='checkbox' name='acr[0]' data-id="1" data-valor="2.00" value='Queijo'/>Queijo - R&#36;2,00 <input type='number' name='quantidade_acr[0]' value='1' step="1" min='1' max='5'/><br/>
                <input type='checkbox' data-id="2" data-valor="0.50" name='acr[1]' value='Alho'/>Alho - R&#36;0,50 <input type='number' name='quantidade_acr[1]' value='1' step="1" min='1' max='5'/><br/>
                <input type='checkbox' data-id="3" data-valor="0.50" name='acr[2]' value='Oregano'/>Orégano - R&#36;0,50 <input type='number' name='quantidade_acr[2]' value='1'step="1" min='1' max='5'/><br/>

<button id="salvar">Salva</button>

Then create the jquery method to save the data: 

$(document).ready(function(){
    $('#salvar').on('click', function() {
        var list = [];
         $('[name*="acr"]:checked').each(function(key) {

             var qtde = $('[name*="quantidade_acr['+key+']"]').val();
             var produto = $(this).val();
             var id = $(this).data('id');
             var valor = $(this).data('valor');
             var total = qtde * valor;
            list[key] = {
                          produto: produto,
                          quantidade: qtde,
                          id: id,
                          valor: valor,
                          total_valor: total
                         };

           });
          /* aqui eu dei uma saída em HTML
             do JSON apenas para exibir, o
             ideal é que você envie esse
             array para o seu método post. */
           alert(JSON.stringify(list));

    });
});

Here is the example: link

Here is a more complex example: link

    
16.10.2015 / 22:50
1

If you change the HTML a little easier things. Mute: 

<td>
    <input type='checkbox' name='acr[0]' value='Queijo'/>Queijo - R&#36;2,00 <input type='number' name='quantidade_acr[0]' value='1' min='1' max='5'/><br/>
    <input type='checkbox' name='acr[1]' value='Alho'/>Alho - R&#36;0,50 <input type='number' name='quantidade_acr[1]' value='1' min='1' max='5'/><br/>
    <input type='checkbox' name='acr[2]' value='Oregano'/>Orégano - R&#36;0,50 <input type='number' name='quantidade_acr[2]' value='1' min='1' max='5'/><br/>
</td>

To: 

<td classe="acr">
   <input type='checkbox' name='acr[]' value='{"tipo": "Queijo", "preco": 2.0}'/>Queijo - R&#36;2,00 <input type='number' name='quantidade_acr[0]' value='1' min='1' max='5'/><br/>
   etc...

So in the value of these checkboxes you already have the price and you have a class with that td .

Then you can do this to pass this to a JavaScript: 

var dados = $('.acr input[type=checkbox]:checked').map(function (i) {
    var data = JSON.parse(this.value);
    var qtd = this.checked ? parseInt($(this).next('input').val(), 10) : 0;
    var preco = data.preco;
    var toString = {
        tipo: data.tipo,
        preco: data.preco,
        qdt: qtd,
        total: qtd * data.preco
    };
    var obj = {};
    obj['acr_' + i] = encodeURIComponent(JSON.stringify(toString));
    return obj;
});

var queryString = dados.map(function () {
    return $.param(this, true)
}).get().join('&');

This will create a dados array with objects with type, price, qtd, and total. Then convert this information all numa _query string_ , which I see that you use in your code. So you can join what is in this variable queryString to the GET that you do when you have window.location.href = ... remember to join & between each part of that url.

If you do with AJAX you can do so, within the function that starts sending to the server: 

var obj = {};
var dados = $('.acr input[type=checkbox]:checked').each(function (i) {
    var data = JSON.parse(this.value);
    var qtd = this.checked ? parseInt($(this).next('input').val(), 10) : 0;
    var preco = data.preco;
    var dados = {
        tipo: data.tipo,
        preco: data.preco,
        qdt: qtd,
        total: qtd * data.preco
    };
    obj['acr_' + i] = dados;
});
$.post(url, obj, function (res) {
    console.log(res);
});

If you have problems retrieving this in PHP, ask another question that we can help more.

jsFiddle: link

    
10.04.2015 / 13:54
How to remove specific rows from a data frame? JavaScript error when opening page - Uncaught SyntaxError