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 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&#
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Hull Archery Club
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post 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).
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post 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? unsure.gif

If the prose is easy to understand, maybe a calculator isn't even necessary...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post 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
QUOTE(Christian J @ Sep 3 2016, 01:55 PM) *
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
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Hull Archery Club
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Hull Archery Club
post Sep 4 2016, 04:44 AM
Post #10


Newbie
*

Group: Members
Posts: 15
Joined: 3-September 16
Member No.: 24,799
QUOTE(CharlesEF @ Sep 4 2016, 01:42 AM) *

QUOTE(Christian J @ Sep 3 2016, 01:55 PM) *
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 4 2016, 06:44 AM
Post #12


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
QUOTE(Hull Archery Club @ Sep 4 2016, 11:42 AM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Hull Archery Club
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post 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.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Hull Archery Club
post Sep 5 2016, 10:31 AM
Post #15


Newbie
*

Group: Members
Posts: 15
Joined: 3-September 16
Member No.: 24,799
QUOTE(CharlesEF @ Sep 5 2016, 03:21 PM) *

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post 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. unsure.gif

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


Newbie
*

Group: Members
Posts: 15
Joined: 3-September 16
Member No.: 24,799
QUOTE(Christian J @ Sep 5 2016, 10:40 PM) *

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. unsure.gif

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Hull Archery Club
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 8 2016, 07:50 AM
Post #20


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
QUOTE(Hull Archery Club @ Sep 8 2016, 02:25 PM) *

This is it uploaded... http://hullarcheryclub.co.uk/fees.html
For some reason its not working yet..

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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

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:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 18th April 2024 - 06:39 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC