Member Avatar for Jon_7

I'm attempting to simplify my fundraising page, and would like to show exactly how much each donation would help us out. I've listed the options below, but I would like for the first two dropdown boxes to change the third one depending on the combination chosen. Fruthermore, I'd like for the third dropdown box to adjust the first two if that one is selected. IFFTT, basically. No action needed beyond that, as it's mostly meant for informative purposes. Is this possible? Thanks for any help whatsoever.

Examples:
1 donation of $50 = 1 hour of gym time.
10 donations of $50 = 10 hours of gym time.
3 donations of $500 = 6 days of gym time.
9 donations of $500 = 27 days of gym time.
3 donations of $5,000 = 3 months of gym time.

<span style="font-size:11px; font-family:arial;">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select> 
donation(s) of
<select>
<option>$50</option>
<option>$500</option>
<option>$5,000</option>
</select> 
= 
<select>
<option>1 hour</option>
<option>2 hours</option>
<option>3 hours</option>
<option>4 hours</option>
<option>5 hours</option>
<option>6 hours</option>
<option>7 hours</option>
<option>8 hours</option>
<option>9 hours</option>
<option>10 hours</option>
<option>3 days</option>
<option>6 days</option>
<option>9 days</option>
<option>12 days</option>
<option>15 days</option>
<option>18 days</option>
<option>21 days</option>
<option>24 days</option>
<option>27 days</option>
<option>30 days</option>
<option>1 month</option>
<option>2 months</option>
<option>3 months</option>
<option>4 months</option>
<option>5 months</option>
<option>6 months</option>
<option>7 months</option>
<option>8 months</option>
<option>9 months</option>
<option>10 months</option>
</select> 
of gym time.</span>
  • 2 Contributors
  • 3 Replies
  • 450 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by AndrisP
Member Avatar for AndrisP

Would you think something like this?

<!DOCTYPE html>
<head>
    <script type="text/javascript">
    function donation(){
        this.dnts = [1,2,3,4,5,6,7,8,9,10];
        this.cost = [50,500,5000];
        this.unit = ['hours', 'days', 'months'];
        this.selected = [0,0];
        this.init = function(){
            this.dn = document.getElementById('dn');
            this.sm = document.getElementById('sm');
            this.rs = document.getElementById('rs');
            this.dn.innerHTML="";
            for(var i in this.dnts){
                this.dn.innerHTML += '<option>'+(this.dnts[i])+'</option>';
            }
            this.sm.innerHTML="";
            for(var i in this.cost){
                this.sm.innerHTML += '<option>$'+(this.cost[i])+'</option>';
            }
            this.rs.innerHTML="";
            for(var c in this.cost){
                for(var d in this.dnts){
                    this.rs.innerHTML += '<option>'+(Number(c)===1?this.dnts[d]*3:this.dnts[d])+' '+(this.unit[c])+'</option>';
                }
            }
        }
        this.update = function(fromResult){
            if(fromResult){
                this.dn.selectedIndex = this.rs.selectedIndex % 10;
                this.sm.selectedIndex = Math.floor(this.rs.selectedIndex / 10);
            }
            else {
                this.rs.selectedIndex = this.dn.selectedIndex + (this.sm.selectedIndex*10);
            }
        }
    }
    var dnt = new donation;
    </script>
</head>
<body onload="dnt.init();">
<div>
<span style="font-size:11px; font-family:arial;">
<select id="dn" onchange="dnt.update();">
</select> 
donation(s) of
<select id="sm" onchange="dnt.update();">
</select> 
= 
<select id="rs" onchange="dnt.update(1);">
</select> 
of gym time.</span>
</div>
</body>
</html>
Edited by AndrisP
commented: Wow, that is flawlessly what I meant! +1
Member Avatar for Jon_7

YES! That is exactly what I needed. Thank you so very much!!!

Member Avatar for AndrisP

Another version mutch more compact and easy to configure

    <script type="text/javascript">
    function donation(){
        this.range = {'min':1,'max':10};
        this.unit = {'hours':50, 'days':500, 'months':5000};
        this.init = function(){
            var sel = ['dn','sm','rs'];
            for(var k in sel){
                this[sel[k]] = document.getElementById(sel[k]);
            }
            this.dn.innerHTML="";
            for(var i=this.range.min; i<=this.range.max; i++){
                this.dn.innerHTML += '<option>'+(i)+'</option>';
            }
            this.sm.innerHTML="";
            for(var u in this.unit){
                this.sm.innerHTML += '<option>$'+(this.unit[u])+'</option>';
            }
            this.rs.innerHTML="";
            for(var u in this.unit){
                for(var i=this.range.min; i<=this.range.max; i++){
                    this.rs.innerHTML += '<option>'+(u=='days'?i*3:i)+' '+(u)+'</option>';
                }
            }
        }
        this.update = function(fromResult){
            if(fromResult){
                this.dn.selectedIndex = this.rs.selectedIndex % 10;
                this.sm.selectedIndex = Math.floor(this.rs.selectedIndex / 10);
            }
            else {
                this.rs.selectedIndex = this.dn.selectedIndex + (this.sm.selectedIndex*10);
            }
        }
    }
    var dnt = new donation;
    </script>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.