Membership Calculator |
Membership Calculator |
Hull Archery Club |
Sep 3 2016, 06:30 AM
Post
#1
|
Newbie Group: Members Posts: 15 Joined: 3-September 16 Member No.: 24,799 |
Hi All I run a not for profit archery club, and I am responsible for the website.. I am currently trying to make the site fool proof, so nothing is hidden... A part I am struggling with is a page for the fees for the club.. even though the information is all on the page, people are still confused, so I want a simple calculator on there which breaks everything down for them.. My problem is I cant get the calculator to work. I've seen all sorts of tutorials but nothing I do works.. I've stripped it right back to basics and I am looking for some nice web designer to make the relevant changes to make it work.. Heres the code for the page and the code for the css Thank you for any help CODE <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Hull Archery Club</title> <link rel="stylesheet" href="css/style.css" type="text/css"> <!--[if IE 7]> <link rel="stylesheet" href="css/ie7.css" type="text/css"> <![endif]--> <style type="text/css"> <!-- .style2 {font-size: 13px} .style3 { color: #FF0000; font-style: italic; } --> </style> </head> <body> <div id="header"> <div> <div> <span>Hull Disabled Archery Club </span> <a href="index.html" class="logo"><img src="images/logo.png" alt=""></a> <span class="tagline">Hull Youth Archery Club </span> </div> <ul> <li> <a href="index.html">Welcome</a> </li> <li> <a href="club.html">The Club</a> </li> <li> <a href="comps.html">Competitions</a> </li> <li class="selected"> <a href="fees.html">Fees</a> </li> <li> <a href="news.html">News</a> </li> <li> <a href="findus.html">Find Us</a> </li> <li> <a href="fundraising.html">Fund Raising</a> </li> </ul> </div> </div> <div id="body"> <div id="content"> <div id="sidebar"> <h3>Other Fees .</h3> <ul><li class="selected collapse"><ul><li> <p><span class="article"><span class="style2">£2.00 per week for bow and arrow hire, for members not having own equipment. <em><br> If you want to get your own archery equipment, we can measure you up to ensure you get the correct equipment from the start. From club level to professional.</em></span><br> </span></p> </li> <li> <p class="article"><span class="style2">Bow Tuning - Get the most of your own bow by having it custom tuned to your own stanceand shooting style to improve your shooting. - £30</span><br> <br> </p> </li> </ul> </li> <li class="selected collapse"></li> <li class="selected collapse"> <p class="article style2">252 at 20m including medal FREE</p> </li> <li class="selected collapse"></li> <li class="selected collapse"> <p class="article style2">Other competitions may include a small charge to cover prizes </p> </li> <li class="selected collapse"> <ul> <li></li> <li> <p class="article"><br> <span class="style2">Tea, Coffee and Hot Chocolate available at 50p per mug. (In winter) <br> Flavoured Bottles Water at 60p <br> <br> Toilet facilities available.<br> <br> </span></p> </li> </ul> </li> </ul> </div> <div id="section"> <h2>Hull Archery Club Fees </h2> <p>The price is £3.00 per person per night (£2.00 per child) <em>(With own equipment).</em> - If equipment hire is required, this will be at a price of £2.00 per session.</p> <p> </p> <p>An upfront yearly fee of £24.00 per adult is charged in January and £12.00 per child payable in September .. <em>New members joining will pay for this pro-rata based on £2.00 per remaining month of the year (£1.00 per month for children). </em>This money will be used to pay for any equipment and insurances etc.</p> <p> </p> <p>If it's required, 6 week training course £30.00. Training per child will be £24.00</p> <ul> <form id="theform" action="#"> <label>Age : <select name="select"> <option>Choose</option> <option>Over 16</option> <option>Age 10 to 15</option> </select> </label> <label><br> <br> Date of Joining : <select name="select2"> <option>Choose</option> <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> </label> <label><br> <br> Do you need training : <select name="select3"> <option>Choose</option> <option>Yes</option> <option>No</option> </select> </label> <label><br> <br> Do you need to hire equipment : <select name="select4"> <option>Choose</option> <option>Yes</option> <option>No</option> </select> </label> <p> </p> <p> <label> <input type="submit" name="Calculate" value="Calculate"> </label> <label> <input type="reset" name="Reset" value="Reset"> </label> </p> <p> </p> <p><strong>Total: </strong><span class="style3">Result here Please</span> <em>On first day. </em></p> <p> </p> <p><strong>Breakdown:</strong></p> <p>Pro-Rata Membership : <span class="style3">Result here Please</span> <em>Annually</em> </p> <p>Training <em>6 Weeks</em> : <span class="style3">Result here Please</span> <em>One Off Payment</em> </p> <p>Insurance : <span class="style3">Result here Please</span> <em>Annually</em> </p> <p>Badges : <span class="style3">Result here Please</span> <em>Quarterly</em></p> <p>Subs : <span class="style3">Result here Please</span> <em>Weekly</em></p> <p>Equipment Hire : <span class="style3">Result here Please</span> <em>Weekly</em> </p> <p> </p> <p> </p> </form> </ul> </div> </div> </div> <div id="footer"> <div> <p> Copyright © <a href="index.html">Hull Archery Club</a> </p> <ul> <li> <a href="index.html">Welcome</a> </li> <li> <a href="club.html">The Club</a> </li> <li> <a href="comps.html">Competitions</a> </li> <li> <a href="fees.html">Fees</a> </li> <li> <a href="news.html">News</a> </li> <li> <a href="findus">Find Us</a> </li> <li> <a href="fundraising.html">Fund Raising</a> </li> </ul> <div> <span>stay connected:</span> <a href="https://www.facebook.com/groups/HullArchery/" id="facebook">facebook</a> <a href="https://twitter.com/HullArcheryClub" id="twitter">twitter</a> <a href="https://plus.google.com/u/0/+CarlCooper1971/posts" id="googleplus">googleplus</a> </div> </div> </div> </body> </html> and the css (style.css) CODE @font-face { font-family: 'Arapey'; src: url('../fonts/Arapey/Arapey-Regular.eot'); src: url('../fonts/Arapey/Arapey-Regular.woff') format('woff'), url('../fonts/Arapey/Arapey-Regular.ttf') format('truetype'), url('../fonts/Arapey/Arapey-Regular.svg') format('svg'); } @font-face { font-family: 'OpenSans-Light'; src: url('../fonts/OpenSans-Light/OpenSans-Light.eot'); src: url('../fonts/OpenSans-Light/OpenSans-Light.woff') format('woff'), url('../fonts/OpenSans-Light/OpenSans-Light.ttf') format('truetype'), url('../fonts/OpenSans-Light/OpenSans-Light.svg') format('svg'); } @font-face { font-family: 'OpenSans-Regular'; src: url('../fonts/OpenSans-Regular/OpenSans-Regular.eot'); src: url('../fonts/OpenSans-Regular/OpenSans-Regular.woff') format('woff'), url('../fonts/OpenSans-Regular/OpenSans-Regular.ttf') format('truetype'), url('../fonts/OpenSans-Regular/OpenSans-Regular.svg') format('svg'); } @font-face { font-family: 'OpenSans-Semibold'; src: url('../fonts/OpenSans-Semibold/OpenSans-Semibold.eot'); src: url('../fonts/OpenSans-Semibold/OpenSans-Semibold.woff') format('woff'), url('../fonts/OpenSans-Semibold/OpenSans-Semibold.ttf') format('truetype'), url('../fonts/OpenSans-Semibold/OpenSans-Semibold.svg') format('svg'); } @font-face { font-family: 'OpenSans-Bold'; src: url('../fonts/OpenSans-Bold/OpenSans-Bold.eot'); src: url('../fonts/OpenSans-Bold/OpenSans-Bold.woff') format('woff'), url('../fonts/OpenSans-Bold/OpenSans-Bold.ttf') format('truetype'), url('../fonts/OpenSans-Bold/OpenSans-Bold.svg') format('svg'); } body { background: #f2f2f2; color: #797979; font-family: 'OpenSans-Light'; font-weight: normal; line-height: 1; margin: 0; min-width: 960px; padding: 0; } #header { background: url(../images/bg-header.jpg) no-repeat top center; margin: 0; padding: 0; } #header div { margin: 0 auto; overflow: hidden; padding: 0; width: 960px; } #header div span { color: #fff; font-family: 'Arapey'; font-size: 14px; display: block; float: left; margin: 0; padding: 50px 49px 0 0; text-align: right; width: 331px; } #header div .tagline { padding: 50px 0 0 49px; text-align: left; } #header div a.logo { display: block; float: left; width: 200px; } #header div a.logo img { border: 0; display: block; margin: 0; padding: 0; } #header ul { background: url(../images/bg-navigation.gif) repeat-x bottom left; margin: 0 auto; padding: 28px 0 0; text-align: center; width: 960px; } #header ul li { display: inline-block; list-style: none; margin: 0; padding: 0; } #header ul li a { color: #797979; display: inline-block; font-family: 'Arapey'; font-size: 16px; font-weight: normal; margin: 0; padding: 0 25px 18px; text-decoration: none; text-transform: uppercase; } #header ul li.selected a { background: url(../images/bg-menu.gif) repeat-x bottom left; color: #ef414a; } #header ul li a:hover { color: #ef414a; } #body { margin: 0; padding: 28px 0 46px 0; } #body .header { background: url(../images/border-top.gif) repeat-x bottom left; margin: 0; padding: 0 0 19px; } #body .header div { background: url(../images/shadow.png) no-repeat bottom left; margin: 0 auto; padding: 0 10px 38px; position: relative; width: 940px; } #body .header div img { display: block; } #body .header div ul { background: url(../images/transparent.png) repeat; border-bottom: 1px solid #cecece; border-right: 1px solid #cecece; border-top: 1px solid #cecece; bottom: 38px; left: 0; margin: 0; padding: 0; position: absolute; width: 960px; } #body .header div ul:before, #body .header div ul:after { content: ""; display: table; } #body .header div ul:after { clear: both; } #body .header div ul li { border-left: 1px solid #cecece; float: left; list-style: none; margin: 0; padding: 0; width: 239px; box-shadow: 0 0 5px #c9c9c9; -moz-box-shadow: 0 0 5px #c9c9c9; -webkit-box-shadow: 0 0 5px #c9c9c9; } #body .header div ul li a { color: #33608a; display: block; font-family: 'Arapey'; font-size: 18px; font-weight: normal; height: 78px; line-height: 78px; text-align: center; text-decoration: none; text-transform: capitalize; } #body .header div ul li a:hover { background: url(../images/transparent-hover.png) repeat; color: #fff; } #body .body { background: #fff url(../images/border-bottom.gif) repeat-x bottom left; margin: 0; padding: 0 0 20px; } #body .body .section { background: url(../images/bg-aside.gif) repeat-y right top; margin: 0 auto; padding: 0; overflow: hidden; width: 960px; } #body .body .section .article { float: left; margin: 0 10px; overflow: hidden; padding: 39px 0; width: 620px; } #body .body .section .article h2 { clear: both; color: #ef414a; font-family: 'Arapey'; font-size: 24px; font-weight: normal; margin: 0; padding: 0 0 22px; } #body .body .section .article img { display: block; float: left; margin: 7px 20px 0 0; padding: 0; } #body .body .section .article p { color: #797979; float: left; font-size: 13px; line-height: 24px; margin: 0; padding: 0 17px 0 0; width: 363px; } #body .body .section .article p a { color: #797979; text-decoration: underline; } #body .body .section .article p a:hover { color: #333; } #body .body .section .aside { float: left; margin: 0 10px; overflow: hidden; padding: 43px 0 39px; width: 300px; } #body .body .section .aside > a { color: #797979; display: inline-block; float: right; font-family: 'OpenSans-Bold'; font-size: 13px; font-weight: normal; line-height: 24px; margin: 0; padding: 0; text-decoration: none; text-transform: capitalize; } #body .body .section .aside > a:hover { color: #ef414a; } #body .body .section .aside b { color: #144879; font-family: 'Arapey'; font-size: 18px; font-weight: normal; display: inline-block; margin: 0; padding: 0 0 24px 11px; } #body .body .section .aside p { background: url(../images/icons.png) no-repeat -35px -254px; clear: both; color: #797979; font-size: 13px; line-height: 24px; margin: 0; padding: 0 13px 0 42px; } #body .body .section .aside p a { color: #797979; text-decoration: underline; } #body .body .section .aside p a:hover { color: #333; } #body .footer { margin: 0 auto; padding: 29px 0 0; overflow: hidden; width: 960px; } #body .footer div { background: #fff; border: 1px solid #cdcdcd; border-radius: 6px; float: left; margin: 0 10px; padding: 0; width: 298px; } #body .footer div > a { border-bottom: 1px solid #cdcdcd; display: block; margin: 0; padding: 0; } #body .footer div > a:hover { opacity: 0.8; } #body .footer div > a img { border: 0; display: block; } #body .footer div h3 { background: url(../images/dots.gif) no-repeat bottom center; color: #144879; font-family: 'Arapey'; font-size: 18px; font-weight: normal; margin: 0; padding: 18px 0 21px; text-align: center; text-transform: capitalize; } #body .footer div p { color: #797979; font-size: 13px; line-height: 24px; margin: 0; padding: 13px 20px 19px; text-align: center; } #body .footer div p a { color: #797979; text-decoration: underline; } #body .footer div p a:hover { color: #333; } #body .content { background: #fff url(../images/bg-sidebar.gif) repeat-y top right; border: 1px solid #cdcdcd; border-radius: 6px; margin: 0 auto; overflow: hidden; padding: 0; width: 938px; } #body .content #section, #body .content #blog { float: left; margin: 0; padding: 37px 29px 29px; width: 570px; } #body h2 { color: #ef414a; font-family: 'Arapey'; font-size: 24px; font-weight: normal; margin: 0; padding: 0 0 21px; text-transform: capitalize; } #body .content #section > p { font-size: 17px; line-height: 30px; margin: 0; padding: 0; } #body .content #section > p a { color: #ef414a; text-decoration: none; } #body .content #section > p a:hover { color: #797979; } #body .content #section > p b { display: inline-block; font-size: 13px; margin: 0; padding: 22px 0 0; } #body .content #section > img { display: block; margin: 16px 0 23px; } #body .content #section .article { margin: 0; overflow: hidden; padding: 0; } #body .content #section .article div { float: left; margin: 0; padding: 0; width: 270px; } #body .content #section .article div:first-child { margin: 0 30px 0 0; } #body .content #section .article div h3 { color: #144879; font-family: 'Arapey'; font-size: 18px; font-weight: normal; line-height: 24px; margin: 0; padding: 0; } #body .content #section div p { font-size: 13px; line-height: 24px; margin: 0; padding: 0; } #body .content #section div p a { color: #797979; text-decoration: underline; } #body .content #section div p a:hover { color: #333; } #body .content #section .article div p { padding: 0 0 29px; } #body .content #section > b, #body .content #section div b, #body .content #section form b { color: #144879; display: inline-block; font-family: 'Arapey'; font-size: 18px; font-weight: normal; margin: 0; padding: 0; text-transform: capitalize; } #body .content #section > b a { color: #144879; text-decoration: none; } #body .content #section > b a:hover { color: #ef414a; } #body .content #section > ul { margin: 0; padding: 0; } #body .content #section > ul li { background: url(../images/icons.png) no-repeat -75px -148px; list-style: none; font-size: 13px; line-height: 24px; margin: 0; padding: 0 0 0 30px; } #body .content #section div { margin: 0; padding: 41px 0 0; } #body .content #section form { margin: 0; overflow: hidden; padding: 0; } #body .content #section form span { clear: both; display: block; font-size: 13px; margin: 0; padding: 37px 0 25px; } #body .content #section form span a { color: #797979; text-decoration: underline; } #body .content #section form span a:hover { color: #333; } #body .content #section form input, #body .content #section form select { background: none; border: 1px solid #cdcdcd; color: #797979; display: block; float: left; font-family: 'OpenSans-Light'; font-size: 11px; font-weight: normal; margin: 0 29px 13px 0; padding: 6px 10px; text-transform: capitalize; width: 198px; } #body .content #section form select { clear: both; width: 220px; } #body .content #section form textarea { background: none; border: 1px solid #cdcdcd; color: #797979; display: block; font-family: 'OpenSans-Light'; font-size: 11px; font-weight: normal; height: 108px; margin: 0 0 18px; padding: 5px 10px; overflow: auto; text-transform: capitalize; width: 548px; } #body .content #section form #send { background: url(../images/bg-more.png) no-repeat 0 1px; border: 0; color: #ececec; display: block; float: none; margin: 0; padding: 5px 0; text-align: center; text-transform: uppercase; width: 100px; } #body .content #section form #send:hover { background-position: 0 -29px; cursor: pointer; } #body .content #section div a.download { background: url(../images/bg-more.png) no-repeat 0 0; color: #ececec; display: inline-block; font-size: 11px; height: 25px; line-height: 25px; margin: 7px 0 0; padding: 0; text-align: center; text-decoration: none; text-transform: uppercase; width: 100px; } #body .content #section div a.download:hover { background-position: 0 -30px; } #body .content #blog ul { margin: 0; padding: 0; } #body .content #blog ul li { border-bottom: 1px solid #cdcdcd; list-style: none; margin: 0 0 29px; overflow: hidden; padding: 0 0 23px; } #body .content #blog ul li .article { float: left; margin: 0; padding: 0 30px 0 0; width: 380px; } #body .content #blog ul li .article h3 { color: #144879; font-family: 'Arapey'; font-size: 18px; font-weight: normal; margin: 0; padding: 0; text-transform: capitalize; } #body .content #blog ul li .article p { font-size: 13px; line-height: 24px; margin: 0; padding: 24px 0; } #body .content #blog ul li .article p a { color: #797979; text-decoration: underline; } #body .content #blog ul li .article p a:hover { color: #333; } #body .content #blog ul li .article .more { color: #144879; font-size: 13px; text-decoration: none; text-transform: uppercase; } #body .content #blog ul li .article .more:hover { color: #ef414a; } #body .content #blog ul li .stats { float: left; margin: 0; padding: 0; width: 160px; } #body .content #blog ul li .stats img { border: 1px solid #cdcdcd; display: block; margin: 0 0 9px; padding: 0; } #body .content #blog ul li .stats span { color: #797979; display: block; font-family: 'OpenSans-Semibold'; font-size: 11px; font-weight: normal; line-height: 24px; margin: 0; padding: 0; text-transform: capitalize; } #body .content #blog ul li .stats a { color: #797979; font-family: 'OpenSans-Light'; font-weight: normal; text-decoration: underline; } #body .content #blog ul li .stats a:hover { color: #333; } #body .content #blog ul.paging { margin: 0; overflow: hidden; padding: 16px 0; } #body .content #blog ul.paging li { border: 0; display: block; float: left; height: 18px; margin: 0; padding: 0; } #body .content #blog ul.paging li a { color: #797979; display: block; font-size: 13px; height: 18px; line-height: 18px; margin: 0; padding: 0 7px 0 6px; text-decoration: none; text-transform: capitalize; width: 7px; } #body .content #blog ul.paging li a:hover { color: #144879; } #body .content #blog ul.paging li.selected a { background: url(../images/icons.png) no-repeat -75px -115px; color: #fff; } #body .content #blog ul.paging li.first { padding: 0 18px 0 0; } #body .content #blog ul.paging li.first a { background: url(../images/icons.png) no-repeat -52px -216px; padding: 0 0 0 17px; width: 28px; } #body .content #blog ul.paging li.last { padding: 0 0 0 18px; } #body .content #blog ul.paging li.last a { background: url(../images/icons.png) no-repeat 54px -216px; padding: 0 17px 0 0; width: 50px; } #body .content #blog h3 { color: #144879; font-family: 'Arapey'; font-size: 18px; font-weight: normal; margin: 0; padding: 0; text-transform: capitalize; } #body .content #blog small { display: inline-block; font-family: 'OpenSans-Regular'; font-size: 11px; font-weight: normal; margin: 0; padding: 16px 0 18px; } #body .content #blog small a { color: #797979; text-transform: capitalize; } #body .content #blog small a:hover { color: #333; } #body .content #blog > p { font-size: 13px; line-height: 24px; margin: 0; padding: 13px 0; } #body .content #blog > p a { color: #797979; text-decoration: underline; } #body .content #blog > p a:hover { color: #333; } #body .content #blog .comment { border-bottom: 1px solid #cdcdcd; border-top: 1px solid #cdcdcd; margin: 0; overflow: hidden; padding: 23px 0; } #body .content #blog .comment img { display: block; float: left; } #body .content #blog .comment div { float: left; margin: 0; padding: 0 0 0 20px; text-align: right; width: 471px; } #body .content #blog .comment div small { color: #cdcdcd; display: block; font-family: 'OpenSans-Semibold'; font-size: 11px; font-weight: normal; margin: 0; padding: 0 0 7px; text-align: left; } #body .content #blog .comment div small a { color: #797979; } #body .content #blog .comment div small a:hover { color: #144879; } #body .content #blog .comment div p { font-size: 11px; line-height: 24px; margin: 0; padding: 0; text-align: left; } #body .content #blog .comment div p a, #body .content #blog .comment div > a { color: #797979; font-size: 11px; text-decoration: none; } #body .content #blog .comment div p a:hover, #body .content #blog .comment div > a:hover { color: #333; } #body .content #blog form { margin: 0; overflow: hidden; padding: 23px 0; } #body .content #blog .comment b, #body .content #blog form b { clear: both; color: #144879; font-family: 'Arapey'; font-size: 18px; font-weight: normal; display: block; margin: 0; padding: 0 0 18px; text-transform: capitalize; } #body .content #blog form input { background: none; border: 1px solid #cdcdcd; color: #797979; display: block; float: left; font-family: 'OpenSans-Light'; font-size: 11px; font-weight: normal; margin: 0 29px 13px 0; padding: 6px 10px; text-transform: capitalize; width: 198px; } #body .content #blog form textarea { background: none; border: 1px solid #cdcdcd; color: #797979; display: block; font-family: 'OpenSans-Light'; font-size: 11px; font-weight: normal; height: 108px; margin: 0 0 18px; padding: 5px 10px; overflow: auto; text-transform: capitalize; width: 548px; } #body .content #blog form #comment { background: url(../images/bg-more.png) no-repeat 0 1px; border: 0; color: #ececec; display: block; float: none; margin: 0; padding: 5px 0; text-align: center; text-transform: uppercase; width: 100px; } #body .content #blog form #comment:hover { background-position: 0 -29px; cursor: pointer; } #body > .section { background: #fff; border: 1px solid #cdcdcd; border-radius: 6px; margin |
pandy |
Sep 3 2016, 07:42 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
I see no script at all?
I assume you use/plan to use JavaScript for this so I move the thread to the client side forum. Please correct me if you use/want to use something server side. |
Hull Archery Club |
Sep 3 2016, 07:52 AM
Post
#3
|
Newbie Group: Members Posts: 15 Joined: 3-September 16 Member No.: 24,799 |
thats the page as it stands inc the css
script removed as it never worked anyway its all in a form... i need it to allow a user to change the bits so that its relevant for them, ie under 16, need training etc... then for it to give them a price and a breakdown to how its made up the page itself is based around a free template and all the changes made have been by myself reading pages etc I just can't get my head around this... I have seen something similar with a <script> </script> section in the header, but I couldn't get it to work hence needing help |
Darin McGrew |
Sep 3 2016, 10:30 AM
Post
#4
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
What kind of programming experience do you have?
JavaScript is okay if you're going to check everything manually. It's really for convenience. It isn't secure at all. To process the form options securely, you need a server-side (e.g., CGI, PHP) program. Please see also the FAQ entry How do I use forms? |
pandy |
Sep 3 2016, 10:31 AM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
We can't help you with what's wrong with your script if you don't let us see it.
|
CharlesEF |
Sep 3 2016, 10:32 AM
Post
#6
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
As pandy asked, what language do you plan to use? Do you want the user to make all the selections then click a 'calculate' button? That would be using a server side language (PHP, ASP, etc.). Or do you want the user to make a selection and see the results as they choose? That would be client side code (Javascript).
|
Christian J |
Sep 3 2016, 01:55 PM
Post
#7
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
My impression (from looking at the HTML sample) is that the OP just wants a price calculator as convenience for new club members, so nothing needs to be submitted anywhere. Is that correct? Then javascript is probably the easiest solution, no need for any server-side scripting.
Some of the prose is a bit hard to follow though, such as this part: QUOTE The price is £3.00 per person per night (£2.00 per child) (With own equipment). - If equipment hire is required, this will be at a price of £2.00 per session. An upfront yearly fee of £24.00 per adult is charged in January and £12.00 per child payable in September .. New members joining will pay for this pro-rata based on £2.00 per remaining month of the year (£1.00 per month for children). This money will be used to pay for any equipment and insurances etc. If it's required, 6 week training course £30.00. Training per child will be £24.00 Instead you might use an HTML table, something like this: CODE Age 10-16 Over 16 One night 2 3 Full year* 12 24 Equipment 2 2 Training 24 30 * £2.00 per remaining month of the year Equipment hire is a bit confusing, at the top of the page is says it's per week: QUOTE £2.00 per week for bow and arrow hire, for members not having own equipment but further down it's per session: QUOTE If equipment hire is required, this will be at a price of £2.00 per session. --is the last figure for non-members? If the prose is easy to understand, maybe a calculator isn't even necessary... |
CharlesEF |
Sep 3 2016, 07:42 PM
Post
#8
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
My impression (from looking at the HTML sample) is that the OP just wants a price calculator as convenience for new club members, so nothing needs to be submitted anywhere. Is that correct? Then javascript is probably the easiest solution, no need for any server-side scripting. When dealing with money amounts I would always use the more secure method, server-side code. Yes, javascript can be used but I would still double check with server-side code. And, if payments are taken online then server-side code is a must. This post has been edited by CharlesEF: Sep 3 2016, 07:43 PM |
Hull Archery Club |
Sep 4 2016, 04:42 AM
Post
#9
|
Newbie Group: Members Posts: 15 Joined: 3-September 16 Member No.: 24,799 |
yes... its just a simple calculator .. they just click what is relevant to them and press calculate and it then tells them how much to join, and the breakdown of how that figure is made up, and how much it would be per week afterwards
i dont need it to submit anything anywhere my knowledge of anything is very limited.. my experience is pretty much limited to wysiwyg on an old version of dreamweaver |
Hull Archery Club |
Sep 4 2016, 04:44 AM
Post
#10
|
Newbie Group: Members Posts: 15 Joined: 3-September 16 Member No.: 24,799 |
My impression (from looking at the HTML sample) is that the OP just wants a price calculator as convenience for new club members, so nothing needs to be submitted anywhere. Is that correct? Then javascript is probably the easiest solution, no need for any server-side scripting. When dealing with money amounts I would always use the more secure method, server-side code. Yes, javascript can be used but I would still double check with server-side code. And, if payments are taken online then server-side code is a must. nope its not to take money, its for information only |
pandy |
Sep 4 2016, 06:25 AM
Post
#11
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
I have to agree with Christian. The text is hard to understand and maybe that's the real problem?
|
Christian J |
Sep 4 2016, 06:44 AM
Post
#12
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
i dont need it to submit anything anywhere Then I'd use javascript (a server-side script works fine too, but then result are shown on a new page, which might be inconvenient). I'd avoid dropdown menus for fields with just two values. Instead I might use checkboxes for Yes/No values, and maybe a pair of radio buttons for the age field. But first of all I'd suggest a pricing table. A calculator script can be used in addition (perhaps embedded in the table?), but if the pricing text is difficult to follow a calculator may just complicate things even more. |
Hull Archery Club |
Sep 5 2016, 07:32 AM
Post
#13
|
Newbie Group: Members Posts: 15 Joined: 3-September 16 Member No.: 24,799 |
can anyone help with adding the script though please so that the calculator works
simple... something along the lines of this http://forums.htmlhelp.com/index.php?showtopic=18051 thanks |
CharlesEF |
Sep 5 2016, 09:21 AM
Post
#14
|
Programming Fanatic Group: Members Posts: 1,981 Joined: 27-April 13 From: Edinburg, Texas Member No.: 19,088 |
The link you posted is for a server-side script. I thought you said you didn't want to submit a form! Post whatever code you have so someone can help you debug it. I don't think anyone will write the script for you.
|
Hull Archery Club |
Sep 5 2016, 10:31 AM
Post
#15
|
Newbie Group: Members Posts: 15 Joined: 3-September 16 Member No.: 24,799 |
The link you posted is for a server-side script. I thought you said you didn't want to submit a form! Post whatever code you have so someone can help you debug it. I don't think anyone will write the script for you. what i have is at the top, including the css thanks |
Christian J |
Sep 5 2016, 04:40 PM
Post
#16
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
I started writing something, but I still don't understand all the fee rules:
QUOTE £12.00 per child payable in September Not sure what the bold part above means, or how it's meant to be reflected in the calculator's output. QUOTE Total: Result here Please On first day. Just in case: I assume the above only applies to those paying per night? QUOTE Breakdown: Pro-Rata Membership : Result here Please Annually Including training? QUOTE Insurance : Result here Please Annually Badges : Result here Please Quarterly Subs : Result here Please Weekly We lack fees for the above... QUOTE Equipment Hire : Result here Please Weekly Why weekly, when the fee is £2 per night? How about those only paying for one night? |
Hull Archery Club |
Sep 6 2016, 12:56 PM
Post
#17
|
Newbie Group: Members Posts: 15 Joined: 3-September 16 Member No.: 24,799 |
I started writing something, but I still don't understand all the fee rules: QUOTE £12.00 per child payable in September Not sure what the bold part above means, or how it's meant to be reflected in the calculator's output. QUOTE Total: Result here Please On first day. Just in case: I assume the above only applies to those paying per night? QUOTE Breakdown: Pro-Rata Membership : Result here Please Annually Including training? QUOTE Insurance : Result here Please Annually Badges : Result here Please Quarterly Subs : Result here Please Weekly We lack fees for the above... QUOTE Equipment Hire : Result here Please Weekly Why weekly, when the fee is £2 per night? How about those only paying for one night? This is what I work by: Membership (Annually paid in January, but available as prorata for new members) January - £24 (12) February - £22 (11) March - £20 (10) April - £18 (9) May - £16 (8) June - £14 (7) July - £12 (6) August - £10 (5) September - £8 (4) October - £30 (15) - 15 Months November - £28 (14) - 14 Months December - £26 (13) - 13 Months Training Fees if necessary (one off)- £30 (24) Subs weekly - £3 (2) Equipment weekly if needed- £2 Insurance (payable on joining, annual fee due on joining or in september ready to start on 1st october)- £25 (15) Badges - £2 per quarter All weekly fees are only necessary when attending Thanks for looking This post has been edited by Hull Archery Club: Sep 6 2016, 12:57 PM |
Christian J |
Sep 7 2016, 04:47 PM
Post
#18
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
Here's a crude script that might work (but I think the whole script is unnecessary if you use a table like the one below). Not sure if I understood how the "On first day" section is supposed to work, I just display the session price there.
CODE <script type="text/javascript"> function calculate_fee() { var total=0; 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=2; price.subs_adult=3; price.subs_child=2; price.equipment=2; // children if(document.getElementById('child').checked) { // children, per year if(document.getElementById('year').checked) { // subtract passed months from full year var remaining_months=12-new Date().getMonth(); if(new Date().getMonth()<9) // Months are counted from zero in javascript, so October is 9. { total=price.year_child/12*remaining_months+' ('+remaining_months+' months)'; } // from October, the next full year is added else { total=price.year_child+remaining_months+' ('+(remaining_months+12)+' months)'; } document.getElementById('year_output').innerHTML=total; document.getElementById('session_output').innerHTML=0; } // children, per session else { total=price.session_child; document.getElementById('year_output').innerHTML=0; document.getElementById('session_output').innerHTML=total; } if(document.getElementById('training').checked) { document.getElementById('training_output').innerHTML=price.training_child; } if(document.getElementById('insurance').checked) { document.getElementById('insurance_output').innerHTML=price.insurance_child; } if(document.getElementById('badges').checked) { document.getElementById('badges_output').innerHTML=price.badges; } if(document.getElementById('subs').checked) { document.getElementById('subs_output').innerHTML=price.subs_child; } if(document.getElementById('equipment').checked) { document.getElementById('equipment_output').innerHTML=price.equipment; } } // adults else { // adults, per year if(document.getElementById('year').checked) { // subtract passed months from full year var remaining_months=12-new Date().getMonth(); total=remaining_months*2; if(new Date().getMonth()<9) // Months are counted from zero in javascript, so October is 9. { total=price.year_adult/12*remaining_months+' ('+remaining_months+' months)'; } // from October the next full year is added else { total=price.year_adult+remaining_months+' ('+(remaining_months+12)+' months)'; } document.getElementById('year_output').innerHTML=total; document.getElementById('session_output').innerHTML=0; } // adults, per session else { total=price.session_adult; document.getElementById('year_output').innerHTML=0; document.getElementById('session_output').innerHTML=total; } if(document.getElementById('training').checked) { document.getElementById('training_output').innerHTML=price.training_adult; } if(document.getElementById('insurance').checked) { document.getElementById('insurance_output').innerHTML=price.insurance_adult; } if(document.getElementById('badges').checked) { document.getElementById('badges_output').innerHTML=price.badges; } if(document.getElementById('subs').checked) { document.getElementById('subs_output').innerHTML=price.subs_adult; } if(document.getElementById('equipment').checked) { document.getElementById('equipment_output').innerHTML=price.equipment; } } } </script> <table> <tr> <td></td> <td>Age 10-15<input type="radio" name="age" id="child" value="child"></td> <td>Age 16+<input type="radio" name="age" value="adult" id="adult" checked></td> </tr> <tr> <td>Per session<input type="radio" name="duration" id="session" value="session" checked></td> <td>£2</td> <td>£3</td> </tr> <tr> <td>Per year*<input type="radio" name="duration" id="year" value="year"></td> <td>£12</td> <td>£24</td> </tr> <tr> <td>Training, 6 weeks<input type="checkbox" id="training"></td> <td>£24</td> <td>£30</td> </tr> <tr> <td>Insurance, yearly<input type="checkbox" id="insurance"></td> <td>£15</td> <td>£25</td> </tr> <tr> <td>Badges, quarterly<input type="checkbox" id="badges"></td> <td>£2</td> <td>£2</td> </tr> <tr> <td>Subs, weekly<input type="checkbox" id="subs"></td> <td>£2</td> <td>£3</td> </tr> <tr> <td>Equipment, weekly<input type="checkbox" id="equipment"></td> <td>£2</td> <td>£2</td> </tr> </table> <p>* From January to September you only pay for the remaining months of the year, from October to December you also pay for the next full year.</p> <p><input type="button" value="Calculate Fee" onclick="calculate_fee();"></p> <h2>Total</h2> <p>On first day: £<span id="session_output">3</span>.</p> <h3>Breakdown</h3> <ul> <li>Pro Rata Membership: £<span id="year_output">0</span>.</li> <li>Training 6 Weeks: £<span id="training_output">0</span> One Off Payment.</li> <li>Insurance: £<span id="insurance_output">0</span> Annually.</li> <li>Badges: £<span id="badges_output">0</span> Quarterly.</li> <li>Subs: £<span id="subs_output">0</span> Weekly.</li> <li>Equipment Hire: £<span id="equipment_output">0</span> Weekly.</li> </ul> |
Hull Archery Club |
Sep 8 2016, 07:25 AM
Post
#19
|
Newbie Group: Members Posts: 15 Joined: 3-September 16 Member No.: 24,799 |
Hi, Thanks for looking..
This is it uploaded... http://hullarcheryclub.co.uk/fees.html For some reason its not working yet.. What I'm sort of aiming for is this... http://hullarcheryclub.co.uk/breakdown.jpg Thanks again |
Christian J |
Sep 8 2016, 07:50 AM
Post
#20
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
It seems to work, but note that I used my own radio buttons and checkboxes in the table (I did not use the existing dropdown menus). Also note that the result is printed below the table, at the bottom of the page. QUOTE What I'm sort of aiming for is this... http://hullarcheryclub.co.uk/breakdown.jpg I'm not sure how "Total: ......... On first day" is calculated. In my current version it just displays the £3(2) fee for a single session. Do you want something else included there as well? |
Lo-Fi Version | Time is now: 18th April 2024 - 08:20 PM |