The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V < 1 2  
Reply to this topicStart new topic
> Membership Calculator
Hull Archery Club
post Sep 8 2016, 10:36 AM
Post #21


Newbie
*

Group: Members
Posts: 15
Joined: 3-September 16
Member No.: 24,799



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 8 2016, 04:21 PM
Post #22


.
********

Group: WDG Moderators
Posts: 8,066
Joined: 10-August 06
Member No.: 7



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Hull Archery Club
post Sep 9 2016, 05:52 AM
Post #23


Newbie
*

Group: Members
Posts: 15
Joined: 3-September 16
Member No.: 24,799



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 9 2016, 07:59 AM
Post #24


.
********

Group: WDG Moderators
Posts: 8,066
Joined: 10-August 06
Member No.: 7



QUOTE(Hull Archery Club @ Sep 9 2016, 12:52 PM) *

Many many thanks,

You're welcome!

QUOTE
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.

QUOTE
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. smile.gif


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Hull Archery Club
post Sep 9 2016, 10:17 AM
Post #25


Newbie
*

Group: Members
Posts: 15
Joined: 3-September 16
Member No.: 24,799



many thanks again
new lines of code added and adapted
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 9 2016, 12:48 PM
Post #26


.
********

Group: WDG Moderators
Posts: 8,066
Joined: 10-August 06
Member No.: 7



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')

blush.gif

This post has been edited by Christian J: Sep 10 2016, 07:20 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Hull Archery Club
post Sep 10 2016, 06:00 AM
Post #27


Newbie
*

Group: Members
Posts: 15
Joined: 3-September 16
Member No.: 24,799



I've done those changes locally, but now the total is wrong as its not adding the value for equipment hire
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 10 2016, 06:58 AM
Post #28


.
********

Group: WDG Moderators
Posts: 8,066
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Hull Archery Club
post Sep 10 2016, 12:44 PM
Post #29


Newbie
*

Group: Members
Posts: 15
Joined: 3-September 16
Member No.: 24,799



awesome ... all working and uploaded ... thanks..
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Hull Archery Club
post Sep 27 2016, 07:26 AM
Post #30


Newbie
*

Group: Members
Posts: 15
Joined: 3-September 16
Member No.: 24,799



I understand I am probably pushing my luck but, is it possible to get this working in a wordpress page?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 27 2016, 08:07 AM
Post #31


.
********

Group: WDG Moderators
Posts: 8,066
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Hull Archery Club
post Sep 28 2016, 01:33 PM
Post #32


Newbie
*

Group: Members
Posts: 15
Joined: 3-September 16
Member No.: 24,799



i'll give it a go.. cheers
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V < 1 2
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th March 2019 - 12:26 PM