Javascript Code sample using Switch Case to Create Pricelist and compute Total Amount Due
<!DOCTYPE html>
<html>
<head>
<title>Form Elements and Conditional Statements </title>
<style> //format and styles
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 200px;
}
fieldset {
background: #e1eff2;
}
legend {
padding: 20px 0;
font-size: 20px;
}
p{
display: inline-block;
width: 1000px;
}
</style>
</head>
<body>
<h1>Determine Scholarship Grants </h1>
<p>Enter your details : </p>
<fieldset>
<label>Enter your name </label>
<input type="text" onfocus="this.value=''" name="fname" id="fname" value="" /> <br> <!-- create input text box for name -->
<label>Enter your order code [a apple Tea ] b[banana tea ] c [cherry tea ] </label>
<input type="text" onfocus="this.value=''" name="code" id="code" value="" /> <br> <!-- create input text box for code -->
<label>Enter quantity </label>
<input type="number" onfocus="this.value=''" name="qty" id="qty" value="" /> <br> <!-- create input text box for code -->
<input type=button onclick="display()" name="display" id="display" value="display"> </button> <!--button will call display function in javascript -->
</fieldset>
<p id="demo"></p> <!--paragraph where name and code will display -->
<p id="demo2"></p> <!--paragraph where remarks will display -->
<script> //the script can be placed at the head or body
function display()
{
fname=document.getElementById("fname").value; //get the input name in the textbox fname
code=document.getElementById("code").value; //get the input grade in the textbox code
qty=document.getElementById("qty").value; //get the input grade in the textbox qty
switch(code)
{
case 'a':
case 'A' :
price=100;
remarks = " Apple TEa =" +price +"*" +qty;
break;
case 'b':
case 'B' :
price=80;
remarks = " Banana Tea =" +price +"*" +qty;
break;
case 'C':
case 'c' :
price=150;
remarks = " Cherry Tea =" +price +"*" +qty;
break;
default :
remarks = " <font color=red> <i> Sorry Invalid Order Code" ;
}
total=qty*price; //compute the total amount due
document.write("Name" + fname +"<br>" + " Orders: " +remarks + "<br> Total Amount Due : " +total);
}
</script>
</body>
</html>
=====================================================
Comments
Post a Comment