www.webdeveloper.com
Results 1 to 2 of 2

Thread: help with javascript Calculations radio box

  1. #1
    Join Date
    Sep 2013
    Posts
    1

    help with javascript Calculations radio box

    Can anyone help me
    I trying to do a piece of coding which has two groups of radio button in them one that selects the water system and the time it take and the other one selects which soil type and how many time to water the soil for. I al so have a checked box if there are large plants to be watered which added and extra 1.5 time on
    I need to validate also if the radio button have been checked or not.
    I am have problems working on the calculation being a newbie at all this JavaScript thing



    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Home Gardening Watering guide</title>
    <script>

    //Check the users responses and calculate the fare
    function fareCalc() {
    var radioButton1; // A radio button
    var radioButton2; // A radio button
    var checkbox; // A checkbox
    var watersystem = 0; //The number of the fare selected
    var soilType = 0; //The number of the seat
    var wateringTime = 0; //Total cost of the fare

    //Find the valueof the waater system button
    for (var i = 1; i <=4; i++) {
    radioButton1 = document.getElementById("water" + i);
    if (radioButton1.checked == false ) {
    watersystem = radioButton1.value;
    }
    else
    alert ("please select your watering system")
    }


    //Check if there are large plant involed
    for (var i = 1; i <=1; i++) {
    checkbox = document.getElementById("trees");
    if (checkbox.checked == true) {
    trees = "1.5";
    }
    if (checkbox.checked == false) {
    trees = "0";
    }
    }
    // Get the selected soil type
    for (var i = 1; i <=3; i++) {
    radioButton2 = document.getElementById("soil" + i);
    if (radioButton2.checked == true) {
    soilType = radioButton2.value;
    }
    }
    // alert if no seating class selected
    if (soilType == 0) {
    alert ("Please select a seating class");
    }

    //Display total cost of selected fare
    wateringTime = watersystem * trees * soilType ;
    //Round to the nearest number
    wateringTime = Math.round(wateringTime);
    //Turn string into Integer
    wateringTime = parseInt(wateringTime);

    //Display total cost of flight
    alert ("The cost of the flight is $ " + wateringTime);
    }
    </script>
    </head>

    <body>
    <h1>Gotham Airlines Fare Calculator</h1>
    <p>Complete the form below to calculate the cost of your flight.</p>
    <form>
    <p>Route:<br>
    <input type="radio" id="water1" name="water" value="6"> <label for="water1">Jet Spray </label><br>
    <input type="radio" id="water2" name="water" value="10"><label for="water2">Sprinkler </label><br>
    <input type="radio" id="water3" name="water" value="17"><label for="water3">Mini Sprinkler</label><br>
    <input type="radio" id="water4" name="water" value="50"><label for="water4">Dripper </label><br>

    </p>
    <p>Click here if you will be purchasing a return fare:<input type="checkbox" id="treeses" name="trees"><label for="trees" > </label><br></p>
    <p>Seating:<br>
    <input type="radio" id="soil1" name="soil" value="2"><label for="seat1">Sand</label><br>
    <input type="radio" id="soil2" name="soil" value="1.5"><label for="seat2">Loam</label><br>
    <input type="radio" id="soil3" name="soil" value="1"><label for="seat3">Clay</label></p>
    <p><input type="submit" value="Calculate" onClick="fareCalc();"> <input type="reset" ></p>

    </form>
    </body>
    </html>

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,675
    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Home Gardening Watering guide</title>
    <script>
    
    //Check the users responses and calculate the fare
    function fareCalc(frm) {
     var rads=frm['water'],w,s,t,z0=0,mess=[];
     for (;z0<rads.length;z0++){
      if (rads[z0].checked){
       w=rads[z0].value;
       break;
      }
     }
     if (!w){
      mess.push('Click Water');
     }
     rads=frm['soil'],z0=0;
     for (;z0<rads.length;z0++){
      if (rads[z0].checked){
       s=rads[z0].value;
       break;
      }
     }
     if (!s){
      mess.push('Click Soil');
     }
     if (s&&w){
      t=s*w;
      rad=frm['large']
      if (rad.checked){
       t*=rad.value;
      }
      alert(t.toFixed(2));
      return false; // change to true to submit the form
     }
     alert(mess.join('\n'));
     return false;
    }
    </script>
    </head>
    
    <body>
    <form onsubmit="return fareCalc(this);">
    <p>Water Type:<br>
    <input type="radio" name="water" value="6"> <label for="water1">Jet Spray </label><br>
    <input type="radio" name="water" value="10"><label for="water2">Sprinkler </label><br>
    <input type="radio" name="water" value="17"><label for="water3">Mini Sprinkler</label><br>
    <input type="radio" name="water" value="50"><label for="water4">Dripper </label><br>
    
    </p>
    <p>Soil Type:<br>
    <input type="radio" name="soil" value="2"><label for="seat1">Sand</label><br>
    <input type="radio" name="soil" value="1.5"><label for="seat2">Loam</label><br>
    <input type="radio" name="soil" value="1"><label for="seat3">Clay</label></p>
    <input type="checkbox" name="large" value="1.5" /> Large Plants
    <p><input type="submit" value="Calculate"  <input type="reset" ></p>
    
    </form>
    </body>
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles