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
    10,966
    Thanks
    0
    Thanked 236 Times in 233 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.

  2. #17
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,765
    Thanks
    23
    Thanked 548 Times in 547 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.

  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
    3,765
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Evolution - The non-random survival of random variants.

  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
    3,765
    Thanks
    23
    Thanked 548 Times in 547 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.

  8. #23
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 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>

  9. #24
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,765
    Thanks
    23
    Thanked 548 Times in 547 Posts
    My bad glenngv. Thanks - yours works.
    Evolution - The non-random survival of random variants.


 
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
  •