This assignment is to get you familiar with forms and form validation. Design, a

ID: 3572856 • Letter: T

Question

This assignment is to get you familiar with forms and form validation. Design, a very basic HTML web page with both form tags and a JavaScript code that will allow the user to calculate the Volume fix a cylinder, sphere cone and output the results in either English or SI units. The web page should Allow the user to select either English or SI units with the use of a radio button selection. Allow the user to select the shape with a pull down menu Allow the user to enter the radius and height values in separate text box Once the data is collected have a button tag that will activate a javascript that will read the form data and return the input data. The Units and shape selection should be displayed as shown below. The Shape, radius and height data must be displayed in a table. The script should calculate the Volume based on the input data and display these results in the table.

Explanation / Answer

<!DOCTYPE html>
<html>
<head>
<title>HTML form Tag</title>
</head>
<body>
<script type="text/javascript">
function calculate() {
   'use strict';

   // For storing the volume:
   var volume;
var seleced;

// Get a reference to the form value:
var radius = document.getElementById('radius').value;
   var height = document.getElementById('height').value;
   var unit = document.getElementById('unit');
   var shape = document.getElementById('shape');

for (Count = 0; Count < 2; Count++) {
if (theForm.unit[Count].checked)
   selected = theForm.unit[Count];
break;
}
document.getElementById('unit').innerHTML = selected.text;
document.getElementById('shape').innerHTML = shape.options[shape.selectedIndex].text;

   // Make sure radius & height is positive:
   radius = Math.abs(radius);
   height = Math.abs(height);

   // Perform the calculation:
if(shape[shape.selectedIndex].value=="Sphere"){
volume = (4/3) * Math.PI * Math.pow(radius, 3);
}

else if(shape[shape.selectedIndex].value=="Cylinder"){
volume = Math.PI * Math.pow(radius, 2) * height;
}

else if(shape[shape.selectedIndex].value=="Cone"){
volume = Math.PI * Math.pow(radius, 2) * (height/3);
}

   // Format the volume:
   volume = volume.toFixed(4);

   // Return false to prevent submission:
   return false;

}
</script>
<form action="" method="get" id="theForm">
<h1>
This web site will find the volume for a Cylinder, Sphere or Cone
<h1/>
<h4>

Select the units (English or SI)
<input type="radio" name="unit" value="English" checked> English
<input type="radio" name="unit" value="SI" > SI <br><br>

Select the shape
<select name="shape">
<option value="cone">Cone</option>
<option value="cylinder">Cylinder</option>
<option value="sphere">Sphere</option>
</select> <br><br>

Enter the radius :
<input type="text" name="radius" maxlength="10" /> <br><br>
For a cylinder and cone enter the height :
<input type="text" name="height" maxlength="10" /> <br><br>

<input type="reset" value="Reset the Form">
<button>Click to calculate Result</button>

</h4>

<h1>
Results
</h1>
<h4>
<label id="unit">You selected to use English units</label> <br><br>
<label id="shape">You selected to find the value of a Cone shape</label>
</h4>

<table border=1>
<tr>
<th>Shape</th>
<th>Radius</th>
<th>Height</th>
<th>Volume</th>
</tr>
<tr>
<td></td>
<td>(ft)</td>
<td>(ft)</td>
<td>(ft)</td>
</tr>
<tr>
<td>Cone</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>

Navigate

This assignment is to exercise and validate the theoretical cost of the sorting

This assignment is to give you practice using enums, string variables, and strin

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

This assignment is to get you familiar with forms and form validation. Design, a

Question

Explanation / Answer

Related Questions

Navigate