Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 24
  1. #1
    New Coder
    Join Date
    Sep 2013
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Multiplying radio buttons and checkboxes

    Hi everyone. I am a uni student doing web design at the moment and we have started working on programming which I am struggling with. I have created a html code using javascript below. I have managed to get the appearance of the page correct but I am having a lot of trouble with understanding how to multiply my several radio button's and multiply by the checkbox value and how to implement a math.round code for the alert for the script so that the end result is a rounded number. This is what I have managed so far. Can anyone help?

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type"content="text/html;charset=utf-8">
    <title>Home Garden Watering Guide</title
    }
    //Display the total time of selected system by the soiltype
    alert("The recommended watering time is "+minutes);}
    </script><p>Complete the form below to calculate the recommeded watering time for your home garden.</p></head><body><p>Watering System:</p><form>
    <p><input type="radio" id="ws1" name="systems" value="6"><label for="ws1">Jet spray</label><br>
    <input type="radio" id="ws2" name="systems" value="11"><label for="ws2">Sprinkler</label><br>
    <input type="radio" id="ws3" name="systems" value="17"><label for="ws3">Mini Sprinkler</label><br>
    <input type="radio" id="ws4" name="systems" value="50"><label for="ws4">Dripper</label>
    </p>
    <p>Click here if your plants are large:<input type="checkbox" id="lp1" value="1.5">
    <p>Soil type:</p>
    <p><input type="radio" id="st1" name="soiltype" value="1"><label for="st1">Sand</label>
    <br><input type="radio" id="st2" name="soiltype" value="2">
    <label for="st2">Loam</label><br>
    <input type="radio" id="st3" name="soiltype" value="3.5">
    <label for="st3">Clay</label><br>
    </p>
    <p><input type="Submit" value="Calculate" onClick= calculateTime();">
    <input type="Reset"></p></form></body></html>

  • #2
    New Coder
    Join Date
    Sep 2013
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I have to multiply a watering system value by a soil type value and also if the user chooses the checkbox it has to multiply the other values by the checkbox value.

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,043
    Thanks
    15
    Thanked 240 Times in 240 Posts
    Generally you would add elements by the createElement method. It's pretty straight forward, only requiring a few steps.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • Users who have thanked DrDOS for this post:

    newbie2 (09-24-2013)

  • #4
    New Coder
    Join Date
    Sep 2013
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for replying. Could you please explain the createElement method?

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,316
    Thanks
    23
    Thanked 613 Times in 612 Posts
    @newbie2, I wouldn't use the alert, but I redid your code to give you the answer:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type"content="text/html;charset=utf-8">
    <title>Home Garden Watering Guide</title>
    </head>
    
    <body>
    <p>Complete the form below to calculate the recommeded watering time for your home garden.</p>
    <p>Watering System:</p>
    <form>
    	<p>
    	<input type="radio" id="ws1" name="systems" value="6"><label for="ws1">Jet spray</label><br>
    	<input type="radio" id="ws2" name="systems" value="11"><label for="ws2">Sprinkler</label><br>
    	<input type="radio" id="ws3" name="systems" value="17"><label for="ws3">Mini Sprinkler</label><br>
    	<input type="radio" id="ws4" name="systems" value="50"><label for="ws4">Dripper</label>
    	</p>
    	<p>Click here if your plants are large:<input type="checkbox" id="lp1" value="1.5">
    	<p>Soil type:</p>
    	<p>
    	<input type="radio" id="st1" name="soiltype" value="1"><label for="st1">Sand</label><br>
    	<input type="radio" id="st2" name="soiltype" value="2"><label for="st2">Loam</label><br>
    	<input type="radio" id="st3" name="soiltype" value="3.5"><label for="st3">Clay</label><br>
    	</p>
    
    	<p>
    	<input type="button" value="Calculate" onclick="calculateTime();">
    	<input type="Reset">
    	</p>
    </form>
    
    <script>
    function calculateTime(){
    	for(i=1; i<5;i++){
    		if(document.getElementById('ws'+i ).checked == true){
    			var A = document.getElementById('ws'+i ).value;
    		}
    	}
    	for(i=1; i<4;i++){
    		if(document.getElementById('st'+i ).checked == true){
    			var B = document.getElementById('st'+i ).value;
    		}
    	}
    //Display the total time of selected system by the soiltype
    alert("The recommended watering time is "+(A * B)+" minutes");
    }
    </script>
    
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    newbie2 (09-25-2013)

  • #6
    New Coder
    Join Date
    Sep 2013
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thumbs up

    Thank you so much sunfighter! How would I get the checkbox to also multiply by the value of 1.5 if checked? I also need to add a math.round to round the recommended watering time, how is this done?

  • #7
    New Coder
    Join Date
    Sep 2013
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Just also wondering if someone could explain how to add an alert so that if the radio buttons or checkbox isnt checked by the user then it displays an alert saying please select a radiobutton checkbox first. Thanks

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Have you at least tried something aside from the html you posted?
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #9
    New Coder
    Join Date
    Sep 2013
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I've tried writing the script a dozen times and I just continually have errors

  • #10
    New Coder
    Join Date
    Sep 2013
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    The code sunfighter posted earlier has been a great help but I just can firgure out how to add the math.round, the alert boxes for no checked button and how to multiply that checkbox button with the other answer if a user has selected it also.

  • #11
    New Coder
    Join Date
    Sep 2013
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    can't*

  • #12
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by newbie2 View Post
    I've tried writing the script a dozen times and I just continually have errors
    Then post the script you have written and I'm sure members here are willing to help you fix the errors. That's how you learn and how to get more people interested in helping.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #13
    New Coder
    Join Date
    Sep 2013
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type"content="text/html;charset=utf-8">
    <title>Guide</title>
    <script>
    function calculateTime(){
    for(i=1; i<5;i++){
    if(document.getElementById('ws'+i ).checked == true){
    var A = document.getElementById('ws'+i ).value;
    }
    }
    for(i=1; i=1;i++){
    if(document.getElementById('lp'+i ).checked == true){
    var B = document.getElementById('lp'+i ).value;
    }
    }
    for(i=1;i<4;i++){
    if(document.getElementById('st'+i).checked==true){
    var C = document.getElementById('st'+i).value;
    }
    }
    //Display the total time of selected system by the checkbox and the soil
    alert("The recommended watering time is "+(A * B * C)+" minutes");
    }
    </script>
    <p>Complete the form below to calculate watering time for your home garden.</p>
    <p>Watering System:</p>
    <form>
    <input type="radio" id="ws1" name="systems" value="6"><label for="ws1">Jet spray</label><br>
    <input type="radio" id="ws2" name="systems" value="11"><label for="ws2">Sprinkler</label><br>
    <input type="radio" id="ws3" name="systems" value="17"><label for="ws3">Mini Sprinkler</label><br>
    <input type="radio" id="ws4" name="systems" value="50"><label for="ws4">Dripper</label>
    </p>
    <p>Click here if your plants are large:
    <input type="checkbox" id="lp1" name="largeplants"value="1.5">
    <p>Soil type:</p>
    <input type="radio" id="st1" name="soiltype" value="1"><label for="st1">Sand</label><br>
    <input type="radio" id="st2" name="soiltype" value="2"><label for="st2">Loam</label><br>
    <input name="soiltype" type="radio" id="st3" value="3.5"><label for="st3">Clay</label><br>
    </p>
    <input type="button" value="Calculate" onclick="calculateTime();">
    <input type="Reset">
    </form>
    </body>
    </html>

  • #14
    New Coder
    Join Date
    Sep 2013
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I have tried making var B relate to the checkbox so that if it is selected it will also multiply by the other radio options. This however doesn't seem to be working.

  • #15
    New Coder
    Join Date
    Sep 2013
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    Then post the script you have written and I'm sure members here are willing to help you fix the errors. That's how you learn and how to get more people interested in helping.
    You are right. thank you


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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