[JS]Add up dropdowns

[DNA_Saint]

Ik ben momenteel bezig met een applicatie.
Daar wordt met php een accordion gevuld met tabs naarmate de hoeveelheid id's hij terug krijgt.

In de tabs zitten 2 dingen die voor nu belangrijk zijn.
Een dropdown en een weging.

Bij de dropdown kan je een cijfer kiezen van 1 t/m 10.
En bij de weging staat een cijfer dat uit de database komt.

En bovenaan van de accordion zie je een tekstvak met een eindcijfer.

Nu wil ik dus wanneer je de cijfers selecteerd, je de gemiddelde ziet in het textvak.

Ik zou niet weten, hoe je dit moet doen omdat het aantal dropdowns verschilt per pagina.

PHP:

 <div id="critera">
    Eindcijfer:     <input type="text" name="eindcijfer" id="eindcijfer" size="3"/><br /><br />
      <div id="Accordion1" class="Accordion" tabindex="0">
      <?php
      $criteria = mysql_query("SELECT id, criteriatekst, weging, module_id FROM criteria WHERE module_id = ".$_GET['m']." ");
      if (isset($_GET['m'])){
                    while (list($criteria_id, $criteriatekst, $weging, $module_id) = mysql_fetch_row($criteria))
                    {
                        echo "<div class=\"AccordionPanel\">
                                  <div class=\"AccordionPanelTab\">$criteriatekst</div>
                                  <div class=\"AccordionPanelContent\"><table width=\"200\" border=\"0\" cellpadding=\"2\" cellspacing=\"2\">
                                      <tr>
                                        <td width=\"84\">Opmerking</td>
                                        <td width=\"102\"><textarea name=\"opmerking".$criteria_id."\" id=\"opmerking\" cols=\"45\" rows=\"5\"></textarea></td>
                                      </tr>
                                      <tr>
                                        <td height=\"54\" rowspan=\"2\" valign=\"top\">Cijfer</td>
                                        <td>Weging ($weging)</td>
                                      </tr>
                                      <tr>
                                        <td><select name=\"cijfer".$criteria_id."[s][/s\" id=\"cijfer\">
                                        <option value=\"10\">10</option>
                                        <option value=\"9\">9</option>
                                        <option value=\"8\">8</option>
                                        <option value=\"7\">7</option>
                                        <option value=\"6\">6</option>
                                        <option value=\"5\">5</option>
                                        <option value=\"4\">4</option>
                                        <option value=\"3\">3</option>
                                        <option value=\"2\">2</option>
                                        <option value=\"1\">1</option>
                                        </select>
                                        </td>
                                      </tr>
                                    </table>
                                    </div>
                               </div>";
                    }
                }
 
        ?>
        </div>
     </div>

Formule moet sowieso: cijfer * weging / aantal dropdowns zijn.

De namen van de dropdowns zijn uniek, doordat er gewoon elke keer een id aan de naam wordt geplakt.

Wie kan mij in de goede richting schoppen?

[ Voor 3% gewijzigd door DNA_Saint op 13-02-2008 13:33 ]

[Rekcor]

Ik zou niet weten, hoe je dit moet doen omdat het aantal dropdowns verschilt per pagina

Maar je weet het aantal dropdowns op de pagina toch?

PHP:

$iAantalDropdowns = 0;

while (list($criteria_id, $criteriatekst, $weging, $module_id) = mysql_fetch_row($criteria)) 
{ 
  iAantalDropdowns++;
  ....
}

Dit kun je aan Javascript doorgeven.

Wat je ook kunt doen is je dropdowns een class meegeven, en dan in JS met de functie getElementsByClassName werken.

JavaScript:

var aoDropDowns        = getElementsByClassName('dropdownclass');
var iNumberOfDropDowns = aoDropDowns.length;

[ Voor 38% gewijzigd door Rekcor op 13-02-2008 15:06 . Reden: link ]

[DNA_Saint]

ja, dit snap ik.
Maar hoe maak je dan de bereken functie?
Want ik kan wel laten tellen hoeveel dropdowns er op een pagina zijn. Maar toch moet het op een of andere manier alle dropdown values eruit halen met daarbij de weging.
functie moet toch
cijfer1 + cijfer2 / aantal cijfers

aantal cijfers werkt..

maar hoe kan ik dan de aantal cijfers in de formule zetten, aan de hand van de hoeveelheid cijfers er zijn.

[Rekcor]

Simpel. De wegingen stop je met PHP in hidden inputs met als class 'wegingInput' oid, de dropdowns geef je de class 'cijferDropdown' mee:

PHP:

while (list($criteria_id, $criteriatekst, $weging, $module_id) = mysql_fetch_row($criteria)) 
{ 
  (...)
  echo '<input type="hidden" class="wegingInput" value="$weging">';
  (...)
  echo '<select class="cijferDropdown" name=\"cijfer".$criteria_id."[s][/s\" id=\"cijfer\"> ';
  (...)
}

Vervolgens doe je in javascript iets als:

JavaScript:

var aoCijferDropDowns  = getElementsByClassName('cijferDropdown');
var aoWeegInputs       = getElementsByClassName('wegingInput');
var iNumberOfDropDowns = aoDropDowns.length;

for (var i=0; i<iNumberOfDropDowns; i++)
{
  var cijfer    = aoWeegInputs[i].value;
  var weging    = aoCijferDropDowns[i].options[aoCijferDropDowns[i].selectedIndex].value;

  //jouw formule cijfer * weging / aantal dropdowns
  var resultaat = cijfer*weging/iNumberOfDropDowns; 

  //doe iets met resultaat
  (...)
}

[moozzuzz]

JavaScript:

var aoDropDowns        = getElementsByClassName('dropdownclass');
var iNumberOfDropDowns = aoDropDowns.length;

aoDropDowns is een array met elementen. aoDropDowns[0] verwijst dus naar het eerste etc. Zie ook een JS-ref.

[Rekcor]

@moozzuzz: thanks, maarre...

[moozzuzz]

Rekcor schreef op woensdag 13 februari 2008 @ 16:01:
@moozzuzz: thanks, maarre...

Oeps.

Te lang zitten aan typen geloof ik (ofwel onze proxy-server, die cached T.net sinds laatste .plan).

[DNA_Saint]

Bedankt voor de uitleg en voorbeeld.
Nog 2 dingetjes die ik niet snap.

Wat is [s][/s bij:
name=\"cijfer".$criteria_id."[s][/s\"

En 2e.
Nu gaat ie gewoon formule heel de tijd herhalen. En var resultaat is dan gewoon het resultaat van laatste dropdown.

Moet ik elke aparte resultaat eerst in een array doen?
En daarna alle resultaten optellen en die delen door iNumberOfDropDowns?

[Rekcor]

DNA_Saint schreef op woensdag 13 februari 2008 @ 18:24:
Bedankt voor de uitleg en voorbeeld.
Nog 2 dingetjes die ik niet snap.

Wat is [s][/s bij:
name=\"cijfer".$criteria_id."[s][/s\"

Eh... daarvoor moet je bij DNA_Saint zijn, want ik heb e.e.a. gekopieerd uit zijn/haar code

DNA_Saint schreef op woensdag 13 februari 2008 @ 18:24:
En 2e.
Nu gaat ie gewoon formule heel de tijd herhalen. En var resultaat is dan gewoon het resultaat van laatste dropdown.

Moet ik elke aparte resultaat eerst in een array doen?
En daarna alle resultaten optellen en die delen door iNumberOfDropDowns?

Ja ik snap nog steeds niet precies wat je wil, ik bereken nu het resultaat van iedere dropdown apart.

[DNA_Saint]

De bedoeling is dus dat het juist van alle dropdowns tegelijk doet.
dus cijfer1*weging1+cijfer2*weging2+cijfer3*weging3/all cijfers

Dit vind ik dan ook moeilijk.
Maar dit doe je door een array ofzo? Alle getallen uit dropdown en wegingen in array zetten en die dan optellen en delen?

Nu is het zo dat de cijfer al met de weging wordt vermenigvuldigd in de lus.
Wat er dus nog eigenlijk moet gebeuren is, resultaat1+resultaat2+resultaat3/aantal dropdowns.

JavaScript:

function Berekencijfer(){
    var aoDropDowns        = <?=$iAantaldropdown ?>;
    var aoCijferDropDowns  = getElementsByClassName('cijferDropdown');
    var aoWeegInputs       = getElementsByClassName('wegingInput');

    for (var i=0; i<aoDropDowns; i++)
    {
      var cijfer    = aoWeegInputs[i].value;
      var weging    = aoCijferDropDowns[i].options[aoCijferDropDowns[i].selectedIndex].value;
    
      var resultaat[i] = cijfer*weging; 
      
     
    }


    // tel all resultaten op / aantal dropdowns



     document.getElementById('eindcijfer').value = eindcijfer;
    
}

[ Voor 57% gewijzigd door DNA_Saint op 14-02-2008 21:52 ]

[DNA_Saint]

update,
na veel proberen en experimenteren ben ik hierop uitgekomen en het werkt

JavaScript:

function Berekencijfer(){
    var aoDropDowns         = <?=$iAantaldropdown ?>;
    var aoCijferDropDowns   = getElementsByClassName('cijferDropdown');
    var aoWeegInputs        = getElementsByClassName('wegingInput');
    var eindcijfer          = 0;
    for (var i=0; i<aoDropDowns; i++)
    {
      var cijfer    = aoWeegInputs[i].value;
      var weging    = aoCijferDropDowns[i].options[aoCijferDropDowns[i].selectedIndex].value;
    
      var resultaat = cijfer*weging; 
      
     var eindcijfer = resultaat + eindcijfer;
    }
    var gemiddelde = eindcijfer / aoDropDowns
    document.getElementById('eindcijfer').value = gemiddelde;
}

[Rekcor]

Gefeliciteerd!

Kleine opmerking, de 'a' en de 'o' voor 'DropDowns'

JavaScript:

var aoDropDowns            = <?=$iAantaldropdown ?>; 

staan voor 'array' en 'objecten'. Dit is een manier van noteren die ik prettig vind:

- een 's' ervoor betekent: dit is een string, bijv. var sNaam;
- een 'i' een integer, bijv. var iAantal;
- een 'f' een float, bijv. var fBedrag;
- een 'o' een object, bijv. var oInputelement;

verder dus:

- een 'a' een array, bijv. var asNamen; var aiAantallen, var aoDropDowns;

Jouw

JavaScript:

var aoDropDowns            = <?=$iAantaldropdown ?>; 

moet dus zijn:

JavaScript:

var iDropDowns            = <?=$iAantaldropdown ?>; 

of, beter nog,

JavaScript:

var iAantalDropDowns            = <?=$iAantaldropdown ?>; 

Sommige mensen vinden het onzin, maar het is voor mij een methode om netjes te programmeren: je bent je er voortdurend bewust van welke type de variabelen zijn.

Succes met je project!