[JS] Radio buttons met 2 onclick functies

[te(X)en]

Ik ben bezig een formulier te maken waarbij de bezoeker met radio buttons producten kan kiezen uit een paar groepen producten. De kosten van alle gekozen producten bij elkaar moeten onderaan het formulier weergegeven worden.

Omdat ik zelf weinig ervaring heb met JS heb ik het volgende script gevonden dat met een paar kleine aanpassingen prima werkt:

Voorbeeld 1 functie 1 werkend: http://members.chello.nl/sdehaas/got/test1.html

code:

<script type="text/javascript">

function setRadios()
{
    function sumRadios()
    {
        var total = 0, i = 1, oForm = this.form;
        while (radgrp = oForm.elements['Set' + (i++)])
        {
            j = radgrp.length;
            do
                if (radgrp[--j].checked)
                {
                    total += Number(radgrp[j].value);
                    break;
                }
            while (j);
        }
        oForm.elements.total.value = total.toFixed(2);
    }

    var i = 0, input, inputs = document.getElementById('f1').getElementsByTagName('input');
    while (input = inputs.item(i++))
        if (input.name.match(/^Set\d+$/))
            input.onclick = sumRadios;

}

onload = setRadios;

</script>

In totaal zijn er 4 sets producten.
Set 1 is niets mee aan de hand (lekker makkelijk )
Set 2 bestaat uit een combinatie van producten van Set 3 en Set 4. Als een product uit Set 2 gekozen wordt, dan moeten de radio buttons van Set 3 en Set 4 niet gechecked zijn.
Andersom geldt hetzelfde: als een bezoeker iets kiest uit Set 3 en/of Set 4 dan moet Set 2 ge-unchecked worden.
Hier heb ik het volgende script voor dat ook prima werkt:

Voorbeeld 2 functie 2 werkend: http://members.chello.nl/sdehaas/got/test2.html

code:

<SCRIPT LANGUAGE="JavaScript">
function clearButtons(buttonGroup){

   for (i=0; i < buttonGroup.length; i++) {

    if (buttonGroup[i].checked == true) {
    buttonGroup[i].checked = false
    }

   }

}
</SCRIPT>

En dit in de body:

code:

<fieldset onClick="clearButtons(document.f1.Set3);clearButtons(document.f1.Set4)">

Probleem is alleen dat beide functies samen niet werken
Wanneer ik bijvoorbeeld uit Set 3 en Set 4 voor 15 euro aan producten heb geselecteerd en ik klik op de combinatie uit Set 2 die 4 euro kost, dan zou hij 4 euro als nieuw totaalbedrag moeten geven, maar hij geeft als totaalbedrag 19 euro (15 + 4). Pas als ik voor de 2e keer klik op het product van 4 euro geeft hij ook 4 euro als totaalbedrag aan.

Voorbeeld 1 functie 1 werkend: http://members.chello.nl/sdehaas/got/test1.html
Voorbeeld 2 functie 2 werkend: http://members.chello.nl/sdehaas/got/test2.html
Voorbeeld 3 beide functies niet werkend: http://members.chello.nl/sdehaas/got/test3.html


Volgens mij komt het doordat beide functies gebruik maken van de OnClick. Ik heb al vanalles geprobeerd:
- bij 1 van beide OnChange gebruiken in plaats van OnClick
- 1 van beide OnClick/OnChange toepassen op een andere tag
- De ene functie nog eens aanroepen aan het einde van de andere functie
- etc

Maar het lukt me dus niet.
Heeft een van jullie een idee hoe ik dit wel werkend kan krijgen?

[Blackbird-ce]

Waarom niet 1 nieuwe functie die beide functies aanroept, met twee parameters om door te geven welke functies /welke parameters precies? Dan staat er maar 1 functie-aanroep in je onClick...

[te(X)en]

Ook dat heb ik geprobeerd maar lukt niet:

http://members.chello.nl/sdehaas/got/test4.html

code:

<script type="text/javascript">

function setRadios(buttonGroup)
{
    function sumRadios()
    {
        var total = 0, i = 1, oForm = this.form;
        while (radgrp = oForm.elements['Set' + (i++)])
        {
            j = radgrp.length;
            do
                if (radgrp[--j].checked)
                {
                    total += Number(radgrp[j].value);
                    break;
                }
            while (j);
        }
        oForm.elements.total.value = total.toFixed(2);
    }

    var i = 0, input, inputs = document.getElementById('f1').getElementsByTagName('input');
    while (input = inputs.item(i++))
        if (input.name.match(/^Set\d+$/))
            input.onclick = sumRadios;


   for (i=0; i < buttonGroup.length; i++) {

    if (buttonGroup[i].checked == true) {
    buttonGroup[i].checked = false;
    }
   }
}

onload = setRadios;

</script>

Hij doet hetzelfde: je moet 2x op een radio button klikken voor het totaal opnieuw berekend wordt. Ik heb ook al geprobeerd aan het einde van de clearButtons functie de sumRadios functie nog eens aan te roepen (zodat hij na het omzetten van checked naar unchecked opnieuw gaat rekenen), maar ook dit lukt niet.

[Blackbird-ce]

Klein Proof of Concept: twee sets met radiobuttons die beiden 1 functie aanroepen. In de functie kun je vervolgens natuurlijk doen wat je wilt (eventueel andere functies aanroepen).

code:

<html>
<body>
<script language="Javascript">
function test(a,b)
{
    alert (a);
    alert (b);
}
</script>


<fieldset onClick="test('1','2')">
    <legend>Set 1 (returned 1 en 2)</legend>
    <input id="a1" type="radio" name="Set1" value="0">geen<br>
    <input id="a2" type="radio" name="Set1" value="1">1<br>
    <input id="a3" type="radio" name="Set1" value="2">2<br>
</fieldset>

<fieldset onClick="test('3','4')">
    <legend>Set 2 (returned 3 en 4)</legend>
    <input id="b1" type="radio" name="Set2" value="0">geen<br>
    <input id="b2" type="radio" name="Set2" value="1">1<br>
    <input id="b3" type="radio" name="Set2" value="2">2<br>
</fieldset>


</form>

</body>
</html>

In jouw voorbeeld heb je genestte functies. Ik weet niet in hoeverre dat hoort te werken.