Name:__Tan Wan Sean __________________________________
Date: ________________
Tutorial C10 – JavaScript Data Manipulation (1.5 hours)
Aim: To perform calculations using JavaScript event handlers and arrays. Learn how to collect
data from a form element and process it using JavaScript.
HTML allows event handler attributes, with JavaScript code, to be added to HTML
elements. Functions will be used for calculations.
Arrays - JavaScript arrays are used to store multiple values in a single variable.
Event Handlers - JavaScript lets you execute code when events are detected.
1. First create your html form page using Notepad. Check to see the page is working fine.
<!DOCTYPE html>
<html>
<head>
<title>Cake Form</title>
<script>
<!--
// JavaScript code will come here.
//-->
</script>
</head>
<body >
<div id="wrap">
<form action="/action_page.php" id="cakeform" onsubmit="return false;">
<div>
<div class="cont_order">
<fieldset>
<legend>Make your cake!</legend>
<label >Size Of the Cake</label>
<label class='radiolabel'><input type="radio" name="selectedcake"
value="Round6" onclick="calculateTotal()" />Round cake 6" - serves 8 people
($20)</label><br/>
<label class='radiolabel'><input type="radio" name="selectedcake"
value="Round8" onclick="calculateTotal()" />Round cake 8" - serves 12 people
($25)</label><br/>
<label class='radiolabel'><input type="radio" name="selectedcake"
value="Round10" onclick="calculateTotal()" />Round cake 10" - serves 16
people($35)</label><br/>
<label class='radiolabel'><input type="radio" name="selectedcake"
value="Round12" onclick="calculateTotal()" />Round cake 12" - serves 30
Name:__Tan Wan Sean __________________________________
Date: ________________
people($75)</label><br/>
<br/>
<label >Filling</label>
<select id="filling" name='filling' onchange="calculateTotal()">
<option value="None">Select Filling</option>
<option value="Lemon">Lemon($5)</option>
<option value="Custard">Custard($5)</option>
<option value="Fudge">Fudge($7)</option>
<option value="Mocha">Mocha($8)</option>
<option value="Raspberry">Raspberry($10)</option>
<option value="Pineapple">Pineapple($5)</option>
<option value="Dobash">Dobash($9)</option>
<option value="Mint">Mint($5)</option>
<option value="Cherry">Cherry($5)</option>
<option value="Apricot">Apricot($8)</option>
<option value="Buttercream">Buttercream($7)</option>
<option value="Chocolate Mousse">Chocolate Mousse($12)</option>
</select>
<br/>
<p>
<label for='includecandles' class="inlinelabel">Include Candles($5)</label>
<input type="checkbox" id="includecandles" name='includecandles'
onclick="calculateTotal()" />
</p>
<p>
<label class="inlinelabel" for='includeinscription'>Include
Inscription($20)</label>
<input type="checkbox" id="includeinscription" name="includeinscription"
onclick="calculateTotal()" />
<input type="text" id="theinscription" name="theinscription" value="Enter
Inscription" />
</p>
<div id="totalPrice"></div>
</fieldset>
</div>
<div class="cont_details">
<fieldset>
<legend>Contact Details</legend>
<label for='name'>Name</label>
<input type="text" id="name" name='name' />
<br/>
<label for='address'>Address</label>
<input type="text" id="address" name='address' />
<br/>
Name:__Tan Wan Sean __________________________________
Date: ________________
<label for='phonenumber'>Phone Number</label>
<input type="text" id="phonenumber" name='phonenumber'/>
<br/>
</fieldset>
</div>
<input type='submit' id='submit' value='Submit' />
<input type='reset' id='reset' value='Reset' />
</div>
</form>
</div><!--End of wrap-->
</body>
</html>
2. Click on the buttons. Describe the outcome:
It won’t work because there’s no javascript.
3. Write down which is the code to determine cake size and what type of form buttons were
used:
<label >Size Of the Cake</label>
Name:__Tan Wan Sean __________________________________
Date: ________________
4. Write down which is the code to determine fillings and what type of form buttons were used:
The above is just basic HTML code for a form.
We will next add some JavaScript functions using the “onclick” and “onchange” events of the
form elements. These functions will do the calculations and update the price.
Before we can do any calculations in the form, we must first have a reference to the form in our
JavaScript code. To get the form object, we will use the form id attribute. Note that our form id
is “cakeform”.
//In the html code
<form action="/action_page.php " id="cakeform">
//Set various form elements
</form>
5. Now start your JavaScript code to create an array for cake price as follows (inside section for
JavaScript code):
6. Next create an array for filling as follows (inside section for JavaScript code):
Name:__Tan Wan Sean __________________________________
Date: ________________
7. Next we create a function to determine the price based on size of cake by checking user’s radio
button selection using a loop function:
8. Next, we use a function to find the filling price from the user’s drop down selection box:
Name:__Tan Wan Sean __________________________________
Date: ________________
9. Next, we create a function to add the candle price using the user’s check box selection:
10. Next, a similar function to add the price for the Inscription using another check box:
Name:__Tan Wan Sean __________________________________
Date: ________________
11. Finally, calculate the total price:
//add a function to hide the result on page loading at the start
12. Now add/edit the following code to your html code to run the event functions. Run the
webpage and troubleshoot if necessary.
//edit <body> tag to run hideTotal() function on page loading
<body onload='hideTotal()'>
//edit Submit button to run calculateTotal() function on clicking the Submit button
<input type='submit' id='submit' value='Submit' onclick="calculateTotal()" />
//edit Reset button to run hideTotal() function on clicking the Reset button
<input type='reset' id='reset' value='Reset' onclick="hideTotal()" />
Name:__Tan Wan Sean __________________________________
Date: ________________
13. Change or modify the above program to cater for another usage e.g. fees payment for your
college’s program. Show your code and validation:
14. Draw the flowchart/algorithm to show how the total price is calculated:
References:
1. http://www.w3schools.com/js/
2. http://www.w3schools.com/js/default.asp
3. https://www.w3schools.com/jsref/prop_style_display.asp
4. http://www.javascript-coder.com/javascript-form/javascript-calculator-script.phtml
5. http://creately.com/blog/diagrams/flowchart-guide-flowchart-tutorial/
