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 2 of 2 FirstFirst 12
Results 16 to 24 of 24
  1. #16
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type"content="text/html;charset=utf-8">
    <title>Guide</title>
    <script>
    function calculateTime(objForm){
    	var A = 1, 
    		B = 1, 
    		C = 1,
    		i;
    
    	for(i = 1; i <= objForm.elements['systems'].length; i++){
    		if(document.getElementById('ws' + i).checked == true){
    			A = document.getElementById('ws' + i).value;
    		}
    	}
    	
    	if(document.getElementById('lp1').checked){
    		B = document.getElementById('lp1').value;
    	}
    
    	for(i = 1; i <= objForm.elements['soiltype'].length; i++){
    		if(document.getElementById('st' + i).checked){
    			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><label for="lp1">Click here if your plants are large:</label>
    <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(this.form);">
    <input type="Reset" />
    </form>
    </body>
    </html>
    For the label + input combo, you can avoid having to specify the <label for=""> attribute by putting the checkbox/radio button inside the label.

    Code:
    <label><input type="radio" id="ws1" name="systems" value="6" />Jet spray</label>
    That will also make the label clickable.
    Glenn
    ____________________________________

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

  2. #17
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,710
    Thanks
    25
    Thanked 660 Times in 659 Posts
    This hangs the entire JS section up
    Code:
    	for(i=1; i=1;i++){
    		if(document.getElementById('lp'+i ).checked == true){
    			var B = document.getElementById('lp'+i ).value;
    		}
    	}
    A loop is not necessary fot one checkbox! and this: for(i=1; i=1;i++){ don't look like the other for statements now does it?

    And use an 'else' section to the ws and st loops for code for No Box Checked.
    Evolution - The non-random survival of random variants.

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

  3. #18
    New Coder
    Join Date
    Sep 2013
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That is amazing! thank you! How would I implement alert boxes in the code to display if the user does not tick the system or the soil type? And how would i use math.round to round the answer?

  4. #19
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,710
    Thanks
    25
    Thanked 660 Times in 659 Posts
    Evolution - The non-random survival of random variants.

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

  5. #20
    New Coder
    Join Date
    Sep 2013
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I understand the concept of a math.round and alerts as shown in the links you have provided however I don't understand how to implement the math.round and alert boxes for unchecked radio buttons into the code.

  6. #21
    New Coder
    Join Date
    Sep 2013
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    this is the code

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type"content="text/html;charset=utf-8">
    <title>Guide</title>
    <script>
    function calculateTime(objForm){
    var A = 1,
    B = 1,
    C = 1,
    i;

    for(i = 1; i <= objForm.elements['systems'].length; i++){
    if(document.getElementById('ws' + i).checked == true){
    A = document.getElementById('ws' + i).value;
    }
    }

    if(document.getElementById('lp1').checked){
    B = document.getElementById('lp1').value;

    }

    for(i = 1; i <= objForm.elements['soiltype'].length; i++){
    if(document.getElementById('st' + i).checked){
    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><label for="lp1">Click here if your plants are large:</label>
    <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(this.form);">
    <input type="Reset" />
    </form>
    </body>
    </html>

  7. #22
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,710
    Thanks
    25
    Thanked 660 Times in 659 Posts
    Quote Originally Posted by newbie2 View Post
    I understand the concept of a math.round and alerts as shown in the links you have provided however I don't understand how to implement the math.round and alert boxes for unchecked radio buttons into the code.
    If you are using whole numbers, you don't need math.round. You have one decimal "1.5" for large plants, using math.round would be the same as multiplying by "2".

    Using alert is just for testing purposes. No one uses it for finished code anymore. The code I gave you earlier did use an alert, you should have learned from that.

    You need to get an editor that indents and lets you find matching tags. Try notepad++ or PSPad, both free.

    I believe I told you to ....use an 'else' section to the ws and st loops for code for No Box Checked. You didn't

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type"content="text/html;charset=utf-8">
    <title>Guide</title>
    <script>
    function calculateTime(objForm){
    
    for(i = 1; i <= objForm.elements['systems'].length; i++){
    	if(document.getElementById('ws' + i).checked == true){
    		A = document.getElementById('ws' + i).value;
    	}else{
    		alert("You must select a watering system");
    		return;
    	}
    }
    
    for(i = 1; i <= objForm.elements['soiltype'].length; i++){
    	if(document.getElementById('st' + i).checked){
    		B = document.getElementById('st' + i).value;
    	}else{
    		alert("You must select a soil type");
    		return;
    	}
    }
    //Display the total time of selected system by the checkbox and the soil
    if(document.getElementById('lp1').checked){
    	alert("The recommended watering time is " + (A * B * 1.5) + " minutes");
    }else{
    	alert("The recommended watering time is " + (A * B) + " 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><label for="lp1">Click here if your plants are large:</label>
    <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(this.form);">
    <input type="Reset" />
    </form>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

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

  8. #23
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by sunfighter View Post
    Code:
    for(i = 1; i <= objForm.elements['systems'].length; i++){
    	if(document.getElementById('ws' + i).checked == true){
    		A = document.getElementById('ws' + i).value;
    	}else{
    		alert("You must select a watering system");
    		return;
    	}
    }
    
    for(i = 1; i <= objForm.elements['soiltype'].length; i++){
    	if(document.getElementById('st' + i).checked){
    		B = document.getElementById('st' + i).value;
    	}else{
    		alert("You must select a soil type");
    		return;
    	}
    }
    That will not work. If you check the 2nd, 3rd, or the last item in the radio button group, it will alert "You must select....".

    I would validate outside the for-loop like this:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type"content="text/html;charset=utf-8">
    <title>Guide</title>
    <script>
    function calculateTime(objForm){
    	var A, B = 1, C, i;
    
    	for(i = 1; i <= objForm.elements['systems'].length; i++){
    		if(document.getElementById('ws' + i).checked){
    			A = document.getElementById('ws' + i).value;
    		}
    	}
    
    	if (!A) {
    		alert("You must select a watering system.");
    		return false;
    	}
    	
    	if(document.getElementById('lp1').checked){
    		B = document.getElementById('lp1').value;
    	}
    
    	for(i = 1; i <= objForm.elements['soiltype'].length; i++){
    		if(document.getElementById('st' + i).checked){
    			C = document.getElementById('st' + i).value;
    		}
    	}
    
    	if (!C) {
    		alert("You must select a soil type.");
    		return false;
    	}
    
    	//Display the total time of selected system by the checkbox and the soil
    	alert("The recommended watering time is " + Math.round(A * B * C) + " minutes");
    
    	return false;
    }
    </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><label for="lp1">Click here if your plants are large:</label>
    <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="submit" value="Calculate" onclick="return calculateTime(this.form);">
    <input type="Reset" />
    </form>
    </body>
    </html>
    Last edited by glenngv; 09-26-2013 at 07:19 PM.
    Glenn
    ____________________________________

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

  9. #24
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,710
    Thanks
    25
    Thanked 660 Times in 659 Posts
    My bad glenngv. Thanks - yours works.
    Evolution - The non-random survival of random variants.

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


 
Page 2 of 2 FirstFirst 12

Posting Permissions

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