Sommare elementi tabella tramite checkbox

Printable View

25-09-2017, 17.33.56

Sommare elementi tabella tramite checkbox

Salve, nel mio database ho una tabella suddivisa nelle colonne: ID , titolo, prezzo. Ho creato una pagina nella quale tutti gli elementi di questa tabella appaiono in lista e sono selezionabili tramite checkbox in questo modo:

Codice PHP:

$result = mysql_query("SELECT * FROM accessori") or die(mysql_error()); echo "<form action='' method='get'><table cellpadding='10' class='tabella'>"; while($row = mysql_fetch_array( $result )) { $prezzocheck = $row['prezzo']; // emissione del contenuto di ogni riga in una tabella echo "<tr>"; echo '<td><input type="checkbox" name="'. $prezzocheck .'" id="check'. $prezzocheck .'"><label for="check'. $prezzocheck .'">' . $row['titolo'] . '</label></td>'; echo '<td align=\'center\'>' . $row['prezzo'] . '</td>'; echo "</tr>"; }

ora quello che voglio fare è che quando si spunta la casella dei checkbox poi automaticamente in un riquadro della stessa pagina appaiono in lista gli elementi selezionati (in altre parole il checkbox deve avere anche la funzione di inviare il modulo), seguiti dal totale della somma del campo 'prezzo' degli elementi selezionati. come posso fare?
25-09-2017, 18.30.03
mzanella

Puoi ottenere tutto ciò molto più semplicemente usando JavaScript.
Generi la tua lista di checkbox tramite PHP, inserendo in ciascuno l'informazione sul prezzo, ed utilizzando una funzione di callback che aggiunga l'elemento selezionato ad una lista di elementi da mostrare e aggiorni il prezzo complessivo.
25-09-2017, 18.41.15
darbula

Intanto dovresti rendere unici il name e id (di solito si usa ID del tuo Database e il prezzo nel value di html).... Può coesistere più di una volta lo stesso prezzo..
Sposta nell'angolo JavaScript
Per quanto riguarda il checked (la/le checkbox selezionata/e) https://api.jquery.com/checked-selector/
Il clik è l'azione che produce la pressione del pulsante ovviamente devi abbinarlo ad un submit o altrimenti ad ogni pressione sul checkbox parte il JavaScript (immagina che l'utente deve selezionare 10 articoli, così lo disorienti) http://api.jquery.com/click/
Stop all'inoltro del modulo (cioè quando si preme il submit) https://api.jquery.com/event.preventdefault/..
Cmq. qualsiasi richiesta può essere contraffatta io ti consiglierei di prelevare l'ID e fare una chiamata ajax dove prendi l'articolo e di nuovo il prezzo.
27-09-2017, 18.04.11

Mi potreste fare un esempio di codice java su come richiamo gli elementi checkati in una seconda lista dove appunto i valori di un determinato campo della tabella (in questo caso il prezzo) vengono sommati? Grazie
28-09-2017, 10.24.51
mzanella

A prescindere dal modo in cui genererai la lista di checkbox (che sia PHP o mano è completamente irrilevante, visto che riguarda solo JavaScript...), dovresti ottenere una struttura di questo tipo:

Codice HTML:

<label> <input type="checkbox" name="TITOLO" id="ID" value="PREZZO" class="selectable_item"> titolo </label>

la classe selectable_item serve a rendere le operazioni successive più semplici.

Poi, tramite JavaScript (usando jQuery per semplificare ulteriormente), registri un event listener a ciascuna checkbox. Quando cliccata, la lista degli oggetti selezionati (supponiamo sia un <ul id="results"></ul>) e l'accumulatore della somma (supposto <span id='sum'></span> vengono aggiornatati. Se la checkbox è stata selezionata, l'oggetto viene aggiunto e la somma incrementata del suo prezzo, altrimenti l'oggetto viene rimosso e la somma decrementata.
In concreto:

Codice:

$('.selectable_item').click(function() { var name = $(this).attr('name'); var price = parseFloat($(this).val()); var added_item_id = 'added_' + name; var sum_container = $('#sum'); var sum = parseFloat(sum_container.html()); if ($(this).prop('checked')) { var item = $('<li/>').html(name).attr('id', added_item_id); item.appendTo($('#results')); sum_container.html(sum + price); } else { $('#' + added_item_id).remove(); sum_container.html(sum - price); } });

Di seguito trovi anche un esempio completo:

Codice HTML:

<html> <head> <style> label { display: block; } </style> </head> <body> <div> <h2>Selezionare da qui:</h2> <label> <input type="checkbox" name="titolo1" id="titolo1" value="10" class="selectable_item"> titolo 1 </label> <label> <input type="checkbox" name="titolo2" id="titolo2" value="12" class="selectable_item"> titolo 2 </label> <label> <input type="checkbox" name="titolo3" id="titolo3" value="7" class="selectable_item"> titolo 3 </label> <label> <input type="checkbox" name="titolo4" id="titolo4" value="2" class="selectable_item"> titolo 4 </label> <label> <input type="checkbox" name="titolo5" id="titolo5" value="20" class="selectable_item"> titolo 5 </label> </div> <div> <h2>Selezionati:</h2> <ul id="results"></ul> <strong>Somma:</strong> <span id="sum">0</span> </div> <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $(function () { $('.selectable_item').click(function() { var name = $(this).attr('name'); var price = parseFloat($(this).val()); var added_item_id = 'added_' + name; var sum_container = $('#sum'); var sum = parseFloat(sum_container.html()); if ($(this).prop('checked')) { var item = $('<li/>').html(name).attr('id', added_item_id); item.appendTo($('#results')); sum_container.html(sum + price); } else { $('#' + added_item_id).remove(); sum_container.html(sum - price); } }); }); </script> </body> </html>
28-09-2017, 10.32.47
darbula

Cerca carrello in php con sessione (cosi metti solo aggiungi al carrello e ti rimane anche se cambi pagina)... Mrwebmaster offre un esempio con l'uso di MySQL deprecato
28-09-2017, 23.25.28

mzanella sei un grande!!! funziona! :mrgreen:
30-09-2017, 21.41.22

Ho un problema... praticamente se nel titolo di un elemento da selezionare ci sono degli spazi, lo script non lo rimuove dalla lista, rimuove solo il suo prezzo dalla somma totale. come risolvo?
01-10-2017, 12.35.19
darbula

1)name e id html = deve almeno iniziare con un carattere ([A-Za-z])+ dopo si unirà con il valore ID del tuo database (do per scontato che sia un valore intero se è diverso può compromettere la funzionalità dello script).
2)Nel label html = titolo del tuo database.
3)value per mezzo dell'attributo value o qualcosa contenuto tra gli elementi (HTML 4.01 <li value="10.00">10.00</li> è disapprovato.. Alternativa <li>10.00</li>) = prezzo del tuo database.
4)Si presti attenzione che le operazioni aritmetiche con il numero in virgola mobile potrebbero non corrispondere (0.7+0.1) potrebbe non essere 0.8
5)prezzo deve essere di tipo decimal nel database (10.00) non con il comma separated "," https://www.andrearonchetti.it/preci...in-javascript/
Va modificata anche la funzione JavaScript..
Approfondimento sui valori possibili per id e name html 4.01 https://www.diodati.org/w3c/html401/...html#type-name
Per il label l'uso di for deve corrispondere esattamente al valore id https://www.diodati.org/w3c/html401/...tml#edef-LABEL
Praticamente in jquery sarebbe $('#added_articolo\\ 1') invece di $('#added_aticolo 1') cerca un elemento chiamato 1 che sia discendente dell'id added_articolo cioè "id=added_articolo" e "<1>" rispettivamente per come elencati in precedenza, ne consegue che in jquery deve essere sfuggito con il doppio (perché il backslash ha un significato speciale in jquery o per meglio dire stringa JavaScript var variabile= "ciao \"ernesto\"";) backslash o singolo se non si usa jquery e si usa CSS puro.. http://code.i-harness.com/it/q/113b3
PS. Non c'è peggior sordo "di chi non vuol sentire"