[JavaScript/PHP] Optellen van aangevinkte waarden

donderdag 18 oktober 2007 19:15

Acties:

0 Henk 'm!

Topicstarter

Ik wil de waarden van de aangeklikte checkboxes in mijn PHP script optellen.

Nou kan ik redelijk PHP maar weinig tot geen JavaScript.

Zodoende heb ik gegoogled en mensen geraadpleegd maar ik ben er bijna. Het lukt nog niet helemaal.

Daarom hoop ik dat er iemand is die mij kan vertellen wat er hier mis gaat:

Bij de checkbox:

code:

1	onchange="countform(this.form)"

Weergeven van de opgetelde prijs:

code:

1	<div id="prijs"></div>

JS:

code:

<script language='javascript'>
function countform (elm){
var total=0;
for (i=0;i<elm.elements.length;i++){
if (elm.elements.type=="radio" || elm.elements.type=="checkbox"){
if (elm.elements.checked == true){
total=total + elm.elements.value;
}
}
}
}
</script>

Het ophalen en echo'en van de db inhoud:

code:

<?php
$sql = "SELECT naam, prijs, id FROM maatregelen ORDER BY naam";

$resultaat = mysql_query($sql) or die(mysql_error());

while ($maatregelen = mysql_fetch_array($resultaat))
{
}
?>

Helaas krijg ik slechts een 0 als resultaat zodra ik iets aanvink. Wat doe ik fout?

donderdag 18 oktober 2007 19:18

Acties:

0 Henk 'm!

frickY

Ik hoop niet dat ik nu heel veel uren werk overbodig maak, maar probeer hert eens met;

PHP:

<?php
if($_SERVER['REQUEST_METHOD'] == "POST") {
   if(!isset($_POST['check']) || !is_array($_POST['check'])) {
      $check = array();
    } else {
      $check = $_POST['check'];
    }
    echo 'Je hebt ' . sizeof($check) . ' checkboxje(s) aangezet.<br />';
    // edit
    echo 'Som van waarden: '. array_sum($check) . '.<br>';
}
?>
<html>
  <body>
    <form method="post">
    <input type="checkbox" name="check[]" value="1" />
    <input type="checkbox" name="check[]" value="2" />
    <input type="checkbox" name="check[]" value="3" />
    <input type="checkbox" name="check[]" value="4" />
    <input type="submit" />
    </form>
  </body>
</html>

In je post zeg je dat je in PHP het aantal aangevinkte checkboxjes wilt tellen. Maar in je code tel je de values van de aangevinkte checkboxjes bij elkaar op in javascript. Wat is nou je bedoeling?

[ Voor 16% gewijzigd door frickY op 18-10-2007 19:21 ]

donderdag 18 oktober 2007 19:24

Acties:

0 Henk 'm!

MiKeZZa

Topicstarter

De manier waarop het gebeurd maakt niet uit!

Maar de bedoeling is niet dat ik tel of er 1 of 2 vakjes aangevinkt zijn.

Elk vakje representeert een:
naam, prijs, id

Als mensen de rijen met id 3 en id 6 aanvinken moet de prijs van die rijen opgeteld worden.

Mijn excuses voor de onduidelijkheid.

donderdag 18 oktober 2007 19:46

Acties:

0 Henk 'm!

Verwijderd

Geef dan ten eerste gewoon de naam check[3] etcetera aan de checkboxen. Gewoon het id meegeven als key in de array. Daarmee maak je het jezelf best makkelijk.

donderdag 18 oktober 2007 19:48

Acties:

0 Henk 'm!

MiKeZZa

Topicstarter

Verwijderd schreef op donderdag 18 oktober 2007 @ 19:46:
Geef dan ten eerste gewoon de naam check[3] etcetera aan de checkboxen. Gewoon het id meegeven als key in de array. Daarmee maak je het jezelf best makkelijk.

Ik heb:

code:

1	<input type="checkbox" name="checkbox[]" value="'. $maatregelen['id'] .'">

donderdag 18 oktober 2007 19:51

Acties:

0 Henk 'm!

Verwijderd

En als je de naam nou doet op de manier die ik aangaf, en de value de prijs maakt, dan stelt het in javascript ook niets meer voor. Gewoon de this.form.elements collectie langslopen, kijken of een checkbox gecheckt is, en zo ja, tel je de waarde op bij het totaal.

Server-size heb je dan een array van de keys met als value de prijzen. Als je alleen de keys nodig hebt, kun je die met array_keys opvragen.

donderdag 18 oktober 2007 19:56

Acties:

0 Henk 'm!

MiKeZZa

Topicstarter

Verwijderd schreef op donderdag 18 oktober 2007 @ 19:51:
En als je de naam nou doet op de manier die ik aangaf, en de value de prijs maakt, dan stelt het in javascript ook niets meer voor. Gewoon de this.form.elements collectie langslopen, kijken of een checkbox gecheckt is, en zo ja, tel je de waarde op bij het totaal.

Server-size heb je dan een array van de keys met als value de prijzen. Als je alleen de keys nodig hebt, kun je die met array_keys opvragen.

Die value wil ik graag zo laten omdat ik die al gebruik voor het maken van een array voor het toevoegen aan de db....

Ben wel lastig

donderdag 18 oktober 2007 19:58

Acties:

0 Henk 'm!

Verwijderd

MiKeZZa schreef op donderdag 18 oktober 2007 @ 19:56:

Die value wil ik graag zo laten omdat ik die al gebruik voor het maken van een array voor het toevoegen aan de db....

Ben wel lastig

Dan roep je tussendoor even een keer array_keys aan van checkboxes array, en dan heb je de id's ook in een array.

donderdag 18 oktober 2007 20:17

Acties:

0 Henk 'm!

MiKeZZa

Topicstarter

Verwijderd schreef op donderdag 18 oktober 2007 @ 19:58:
[...]

Dan roep je tussendoor even een keer array_keys aan van checkboxes array, en dan heb je de id's ook in een array.

Wow, dit gaat mij even boven de pet eerlijk gezegd

Hoe doe ik dat?

vrijdag 19 oktober 2007 08:46

Acties:

0 Henk 'm!

sky-

qn nna 👌

zo doe je dat..

don't be afraid of machines, be afraid of the people who build and train them.

vrijdag 19 oktober 2007 09:02

Acties:

0 Henk 'm!

frickY

Ofwel;

PHP:

<?php
if($_SERVER['REQUEST_METHOD'] == "POST") {
   if(!isset($_POST['check']) || !is_array($_POST['check'])) {
      $check = array();
    } else {
      $check = $_POST['check'];
    }
    echo 'Je hebt ' . sizeof($check) . ' checkboxje(s) aangezet.<br />';
    echo 'Values opgetelt:&euro;  '. array_sum($check) . '.<br>';

    $itemIDs = array_keys($check);
    // En nu heb je je array weer met alleen de ID's
}
?>
<html>
  <body>
    <form method="post">
    <!-- name = check[ id ] || value = prijs
    <input type="checkbox" name="check[1]" value="1.85" />
    <input type="checkbox" name="check[3]" value="3.99" />
    <input type="checkbox" name="check[9]" value="0.95" />
    <input type="checkbox" name="check[11]" value="3.12" />
    <input type="submit" />
    </form>
  </body>
</html>

Of in JS

JavaScript:

<html>
  <head>
    <script type="text/javascript">
      function handleform(frm) {
        var numChecked = 0;
        var sumValues = 0;
        for(var i = 0; i < frm.elements.length; i++) {
          if(frm.elements[i].checked) {
            numChecked++;
            sumValues += frm.elements[i].value;
          }
        }
        window.alert("Er zijn " + numChecked  + " checkboxjes aangevinkt. Deze hebben een totale waarde van " + sumValues);
        return false;
      }
    </script>
  <body>
    <form onsubmit="return handleform(this);">
    <!-- name = check[ id ] || value = prijs -->
    <input type="checkbox" name="check[1]" value="1.85" />
    <input type="checkbox" name="check[3]" value="3.99" />
    <input type="checkbox" name="check[9]" value="0.95" />
    <input type="checkbox" name="check[11]" value="3.12" />
    <input type="submit" />
    </form>
  </body>
</html>

[ Voor 35% gewijzigd door frickY op 19-10-2007 09:09 ]

vrijdag 19 oktober 2007 17:46

Acties:

0 Henk 'm!

MiKeZZa

Topicstarter

Ik heb gekozen voor je JS oplossing.

Dit gaat echter nog niet helemaal ok!

Van de checkbox heb ik dit gemaakt:

code:

1	<input type="checkbox" name="checkbox['. $maatregelen['id'] .']" value="'. $maatregelen['prijs'] .'">

En de rest ook aangepast. Nu krijg ik echter een popup-venster met daarin de waardes niet opgeteld maar aan elkaar geplaats als 2 strings. Dat is niet wat ik wil.

Ik heb het pop-upvenster al aangepast aan een waarde die ge'echoed wordt (helemaal trots op mezelf $_/-\o_$ ):

code:

        <script type="text/javascript">
      function handleform(frm) {
        var numChecked = 0;
        var sumValues = 0;
        for(var i = 0; i < frm.elements.length; i++) {
          if(frm.elements[i].checked) {
            numChecked++;
            sumValues += frm.elements[i].value;
          }
        }
        document.getElementById('prijs').innerHTML=sumValues;
        return false;
      }
    </script>

code:

1	<div id="prijs"></div>

Ik zit nu echter nog met 2 zaken:
- Het zijn nog steeds achter elkaar geplakte strings ipv opgeteld ints
- Ik zie de waarde pas na het indrukken van de sendbutton

Ik hoop dat iemand mij hier nog even mee wil helpen!

zaterdag 20 oktober 2007 13:36

Acties:

0 Henk 'm!

Verwijderd

1: parseFloat
2: hang die functie aan onclick de handler

Maar als het om bedragen gaat, hoor je sowieso met integers (centen dus) te werken (en dus parseInt). Die komma is zuiver presentatie.

zaterdag 20 oktober 2007 17:02

Acties:

0 Henk 'm!

MiKeZZa

Topicstarter

Verwijderd schreef op zaterdag 20 oktober 2007 @ 13:36:
1: parseFloat
2: hang die functie aan onclick de handler

Maar als het om bedragen gaat, hoor je sowieso met integers (centen dus) te werken (en dus parseInt). Die komma is zuiver presentatie.

1: Gelukt
2: onClick="handleform(frm);" en onClick="handleform();" geprobeerd maar dit werkt niet....

Wat doe ik fout bij 2?

zondag 21 oktober 2007 00:45

Acties:

0 Henk 'm!

MiKeZZa

Topicstarter

Wat ik nu heb is dat hij wel opteld maar dit niet weergeeft en bij id in de db slaat hij nu de prijs op....

Wie helpt me hier nog ff mee?

code:

<html>
    <head>
        <script type="text/javascript">
      function handleform(frm) {
        var numChecked = 0;
        var sumValues = 0;
        for(var i = 0; i < frm.elements.length; i++) {
          if(frm.elements[i].checked) {
            numChecked++;
            sumValues += parseFloat(frm.elements[i].value);
          }
        }
        document.getElementById('prijs').innerHTML=sumValues;
        return false;
      }
    </script> 
    </head>
    <body>
<?
    //includen van de databaseconnectie
    include('config.php');
    
    //kijken of iemand ingelogd is
    session_start();

    //iemand is geen user dus wordt niet toegelaten
    if($_SESSION['gebruikerstype'] != "user") {
        header('Location: ../');
        exit();
    }
    
    //wel user
    else
    {
    
    $groep = $_SESSION['groep'];
    $spel = $_SESSION['spel'];
    
//de query voor het selecteren ophalen van de rondegegevens van dit spel
$sql = "SELECT MAX(rondenummer) FROM spelrondes_afgerond WHERE spel_id = $spel";

//query uitvoeren of foutmelding genereren
$resultaat = mysql_query($sql) or die(mysql_error());
    
while ($rondenummers = mysql_fetch_array($resultaat)) {
    
    if ((int) $rondenummers['MAX(rondenummer)'] == 4) {
        echo '<h1>Het spel is afgelopen, </h1>';
    }

    if ((int) $rondenummers['MAX(rondenummer)'] == 3) {
        echo '<h1>Welkom in ronde 4, ';
    }
    
    if ((int) $rondenummers['MAX(rondenummer)'] == 2) {
        echo '<h1>Welkom in ronde 3, ';
    }
   
    if ((int) $rondenummers['MAX(rondenummer)'] == 1) {
        echo '<h1>Welkom in ronde 2, ';
    }
    if ((int) $rondenummers['MAX(rondenummer)'] == NULL)
    {
        echo '<h1>Welkom in ronde 1, ';        
    }
} 

    echo 'groep ' .$groep. '!</h1>';
 
if ($_SERVER['REQUEST_METHOD'] == "POST" && is_array($_POST['checkbox'])) {
foreach ($_POST['checkbox'] as $key=>$maatregelid) {

$query = "INSERT INTO maatregelen_gekozen (maatregel_id, groep_id, spelronde_id)
VALUES ('".$maatregelid."','$groep','$spel')";
mysql_query($query) or die (mysql_error()); ;
}
?>
<p>Maatregelen zijn succesvol gekozen!</p>

<?php
} else { 
?>
<h2>Maatregelen kiezen:</h2>
<div id="prijs"></div>
<?php
//de query voor het selecteren van alle maatregelen op alfabetische volgorde
$sql = "SELECT naam, prijs, id FROM maatregelen ORDER BY naam";

//query uitvoeren of foutmelding genereren
$resultaat = mysql_query($sql) or die(mysql_error());

//openen formulier
echo '<form action="" method="post" name="formulier">
      <!-- name = check[ id ] || value = prijs -->';
    
//openen van de tabel
echo '<table cellpadding="0" cellspacing="0">
      <tr>
        <td width="50"><p><b>Keuze</b></p></td>
        <td width="500"><p><b>Maatregel</b></p></td>
        <td width="100" colspan="2"><p><b>Kosten</b></p></td>
      </tr>
    ';

//array met maatregelen maken en zolang er resultaat is ga je door
while ($maatregelen = mysql_fetch_array($resultaat))

{
//weergeven van de namen uit de array
echo '<tr>
          <td width="50" style="border-left-width: 2px; border-right-width: 2px; border-top-style: solid; border-top-width: 2px; border-bottom-style: solid; border-bottom-width: 0px"><input type="checkbox" name="checkbox['. $maatregelen['id'] .']" value="'. $maatregelen['prijs'] .'" onClick="handleform(frm);">
          <td width="500" style="border-left-width: 2px; border-right-width: 2px; border-top-style: solid; border-top-width: 2px; border-bottom-style: solid; border-bottom-width: 0px"><p>'.$maatregelen['naam']. '</p></td>
          <td width="10" style="border-left-width: 2px; border-right-width: 2px; border-top-style: solid; border-top-width: 2px; border-bottom-style: solid; border-bottom-width: 0px"><p>€ </p></td>
          <td align="right" width="90" style="border-left-width: 2px; border-right-width: 2px; border-top-style: solid; border-top-width: 2px; border-bottom-style: solid; border-bottom-width: 0px"><p>'.$maatregelen['prijs']. ',-</p></td>
      </tr>';   
}

//sluiten van de tabel
echo '</table>';

//toevoegknop en wis-veld-knop
echo        '
            <br>
            <input type="submit" value="Bevestig gemaakte keuze" name="submit">
            <input type="reset" value="Deselecteer alles" name="reset">';

//sluiten formulier
echo        '</form>';
}
}
?>
    </body>
</html>

zondag 21 oktober 2007 11:04

Acties:

0 Henk 'm!

Verwijderd

MiKeZZa schreef op zaterdag 20 oktober 2007 @ 17:02:

2: onClick="handleform(frm);" en onClick="handleform();" geprobeerd maar dit werkt niet....

Wat doe ik fout bij 2?

In je startpost gebruikte je wel functieaanroep(this.form) dus ik snap niet waarom je ineens een variabele erbij gaat verzinnen die in de globale scope niet eens bestaat.

Ik denk echt dat je teveel ineens probeert, en dat het puur een gebrek aan ervaring is met elk van de afzonderlijke technieken. Als je die niet beheerst, lukt het je nooit om in één keer iets handigs te produceren.

zondag 21 oktober 2007 11:40

Acties:

0 Henk 'm!

MiKeZZa

Topicstarter

Nou goed, ik snap er niets van: hij staat nu weer op de beginpostsituatie en ook dan krijg ik niets dus dan houdt het op.

Ik snap er niets meer van.

Toch bedankt voor de moeite.

maandag 22 oktober 2007 19:44

Acties:

0 Henk 'm!

Verwijderd

die hele lap code heb ik ff niet gelezen. maar die code uit de startpost gaat in ieder geval fout.

je houd netjes een teller i bij maar je doet er niets mee. je gaat de value van de hele elements lijst opvragen en dat is fout. je moet de value van element met iterator i aanroepen. zal dus wel iets zijn van elm.elements[i] ofzo (ben niet zo thuis in JS)

Java:

<script language='javascript'>
function countform (elm){
var total=0;
for (i=0;i<elm.elements.length;i++){
if (elm.elements.type=="radio" || elm.elements.type=="checkbox"){
if (elm.elements.checked == true){
total=total + elm.elements.value;
}
}
}
}
</script>

dinsdag 23 oktober 2007 10:14

Acties:

0 Henk 'm!

Crayne

Have face, will travel

Bekijk de volgende HTML en JS code en verwerk dat in je PHP script. Het kan zijn dat je het moet aanpassen, als het bijvoorbeeld generiek gebruikt moet kunnen worden door verschillende forms, of wanneer het ook moet kijken naar andere typen inputs.

JavaScript:

function handleForm() { 
      
    var aInputs = document.getElementById('form').getElementsByTagName('input');
    var oDiv = document.getElementById('prijs');
    var fSum = 0.00; 

    for (var x = 0; x < aInputs.length; x++)
    { 

        if (aInputs[x].type == "checkbox" && aInputs[x].checked)
        { 

            fSum += parseFloat(aInputs[x].value);

        } 

    } 

    oDiv.innerHTML = "Totale prijs: " + fSum.toFixed(2);

}

HTML:

<form id="form" action="" method="post"> 
    <input type="checkbox" name="check[1]" value="1.85" onClick="handleForm();"> 
    <input type="checkbox" name="check[3]" value="3.99" onClick="handleForm();"> 
    <input type="checkbox" name="check[9]" value="0.95" onClick="handleForm();"> 
    <input type="checkbox" name="check[11]" value="3.12" onClick="handleForm();"> 
    <input type="submit"> 
</form>

<div id="prijs"></div>

Mijn Library Thing catalogus

Onderwerpen