0

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
51
Views
1 Month
Discussion Span
Last Post by AndrisP
1

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

Votes + Comments
Wow, that is flawlessly what I meant!
0

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

0

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>
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.