Membership Calculator Options

[Hull Archery Club]

total is the sum of the breakdown
the breakdown just breaks it apart showingwhat they're buying

an average adult needing training equipment hire joining in september
first day is £70 then £5 per week

the insurance is due every september and membership is january

[Christian J]

Here's another version.

I added back the months dropdown (before the script relied on the user computer's current month, but that's not a good idea if the user doesn't want to join the same month).

I also removed the single session price from the table, since it became too confusing. Or do you want the Total and Breakdown figures to apply to single sessions too?

Finally, since the table itself both shows the pricing and indicates which checkboxes the user has ticked, I see no reason to repeat all the Breakdown option prices (Training, etc) below it again. All the user really needs is the Total and Pro rata prices. How about removing the rest from the Breakdown?

CODE

<script type="text/javascript">
var price=new Object();
price.year_adult=24;
price.year_child=12;
price.session_adult=3;
price.session_child=2;
price.training_adult=30;
price.training_child=24;
price.insurance_adult=25;
price.insurance_child=15;
price.badges_adult=2;
price.badges_child=2;
price.subs_adult=3;
price.subs_child=2;
price.equipment_adult=2;
price.equipment_child=2;

function calculate_fee()
{
    var total=0;

    var age_group='child';
    if(document.getElementById('adult_field').checked)
    {
        age_group='adult';
    }

    // subtract passed months from full year
    var selected_month=document.getElementById('month_field').selectedIndex;
    var remaining_months=12-selected_month;
    if(selected_month<9) // Months are counted from zero in javascript, so September is 8.
    {
        total+=price['year_'+age_group]/12*remaining_months;
        var pro_rata=total+' ('+remaining_months+' months)';
    }

    // after September the next full year is added too
    else
    {
        total+=price['year_'+age_group]+remaining_months;
        var pro_rata=total+' ('+(remaining_months+12)+' months)';
    }
    document.getElementById('year').innerHTML=pro_rata;

    var extras=document.getElementsByClassName('extras');
    var  result=document.getElementsByClassName('result');
    for(var i=0; i<extras.length; i++)
    {
        if(extras[i].checked)
        {
            result[i].innerHTML=price[extras[i].id+'_'+age_group];
            total+=price[extras[i].id+'_'+age_group];
        }
        else
        {
            result[i].innerHTML=0;
        }
    }
    document.getElementById('session').innerHTML=total;
}
</script>

<table>
<tr>
<td>
Date of joining
<select id="month_field">
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
</td>
<td><input type="radio" name="age" id="child_field" value="child">Age 10-15</td>
<td><input type="radio" name="age" value="adult" id="adult_field" checked>Age 16+</td>
</tr>
<tr>
<td>Membership, yearly</td>
<td>£12</td>
<td>£24</td>
</tr>
<tr>
<td><input type="checkbox" class="extras" id="training">Training, 6 weeks</td>
<td>£24</td>
<td>£30</td>
</tr>
<tr>
<td><input type="checkbox" class="extras" id="insurance">Insurance, yearly</td>
<td>£15</td>
<td>£25</td>
</tr>
<tr>
<td><input type="checkbox" class="extras" id="badges">Badges, quarterly</td>
<td>£2</td>
<td>£2</td>
</tr>
<tr>
<td><input type="checkbox" class="extras" id="subs">Subs, weekly</td>
<td>£2</td>
<td>£3</td>
</tr>
<tr>
<td><input type="checkbox" class="extras" id="equipment">Equipment, weekly</td>
<td>£2</td>
<td>£2</td>
</tr>
</table>

<p><input type="button" value="Calculate Fee" onclick="calculate_fee();"></p>

<h3>Total</h3>
<p>On first day: £<span id="session">0</span>.</p>

<h3>Breakdown</h3>
<ul>
<li>Pro Rata Membership: £<span id="year">0</span>.</li>
<li>Training 6 Weeks: £<span class="result" id="training_fee">0</span> One Off Payment.</li>
<li>Insurance: £<span class="result" id="insurance_fee">0</span> Annually.</li>
<li>Badges: £<span class="result" id="badges_fee">0</span> Quarterly.</li>
<li>Subs: £<span class="result" id="subs_fee">0</span> Weekly.</li>
<li>Equipment Hire: £<span class="result" id="equipment_fee">0</span> Weekly.</li>
</ul>

[Hull Archery Club]

Many many thanks,
it needed a couple of touches, ie insurance and things like that which are permanently needed to be done, but a few tweaks and I now have them pre-ticked

Here's the finished article http://hullarcheryclub.co.uk/fees.html

I'd like to thank you on the site, if you have a link and a bit of a description, I'd be happy to add it..

Again, Thank You

[Christian J]

Many many thanks,

You're welcome!

it needed a couple of touches, ie insurance and things like that which are permanently needed to be done, but a few tweaks and I now have them pre-ticked

That should work, but note that users can untick the checkboxes again and confuse themselves. Instead you might use hidden INPUT elements, perhaps together with checked and disabled dummy checkboxes (just for show, the script doesn't need the latter):

CODE

<td>
<input type="checkbox" disabled checked>
<input type="hidden" class="extras" id="insurance" checked>Insurance, yearly
</td>

A more elegant solution would be to hardwire the mandatory fees into the script, but then I'd have to rewrite it all from the beginning.

I'd like to thank you on the site, if you have a link and a bit of a description, I'd be happy to add it..

Thank you, but that's not necessary.

[Hull Archery Club]

many thanks again
new lines of code added and adapted

[Christian J]

Silly me, a hidden INPUT element can't have a CHECKED attribute (only radio buttons and checkboxes can). Even though it may work in browsers anyway, it's not valid HTML.

Instead, give each hidden INPUT element the VALUE "checked", like this:

CODE

<td>
<input type="checkbox" disabled checked>
<input type="hidden" class="extras" id="insurance" value="checked">Insurance, yearly
</td>

(none of the checkboxes should have it) and in the script, change this line:

CODE

if(extras[i].checked)

to this:

CODE

if(extras[i].checked || extras[i].value=='checked')

This post has been edited by Christian J: Sep 10 2016, 07:20 AM

[Hull Archery Club]

I've done those changes locally, but now the total is wrong as its not adding the value for equipment hire

[Christian J]

This line was wrong too:

CODE

if(extras[i].value=='checked')

change it to:

CODE

if(extras[i].checked || extras[i].value=='checked')

Also none of the checkboxes should have

CODE

value="checked"

like I incorrectly wrote before, only the hidden INPUTs. I've edited my previous post, hope it's correct now.

[Hull Archery Club]

awesome ... all working and uploaded ... thanks..

[Hull Archery Club]

I understand I am probably pushing my luck but, is it possible to get this working in a wordpress page?

[Christian J]

I don't have experience with WP, but if you can edit HTML in it directly (using e.g. a text editor) it should work.

[Hull Archery Club]

i'll give it a go.. cheers