Download presentation
Presentation is loading. Please wait.
1
IS1500: Introduction to Web Development
JavaScript: Client-Side Forms Martin Schedlbauer, Ph.D.
2
JavaScript: Client-Side Forms
Client-Side Scripting with JavaScript Client-Side FORMs IS1500 JavaScript: Client-Side Forms
3
JavaScript: Client-Side Forms
Client-side forms can add an element of interactivity and form validation without requiring a server-side forms processor. Client-side forms are also faster as they don’t require a round-trip request to a server program. However, client-side forms cannot access data in databases. IS1500 JavaScript: Client-Side Forms
4
JavaScript: Client-Side Forms
An Example Daily Rate: <input type="text" id="rate"><br/> Number of Days: <input type="text" id="days"> <p> <button onClick="calculate()">Calculate Fee</button> The charter fee is <div id="fee">XXXX</div> <script> function calculate() { var fee = document.getElementById("rate").value; var days = document.getElementById("days").value; document.getElementById("fee").innerHTML = "$" + (fee * days); } </script> IS1500 JavaScript: Client-Side Forms
5
JavaScript: Client-Side Forms
Same Example… Here’s the code more “broken up”: … <script> function calculate() { var fee = document.getElementById("rate").value; var days = document.getElementById("days").value; var feeOutput = document.getElementById("fee"); var result = 0; result = fee * days; feeOutput.innerHTML = "$" + result; } </script> These refer to the HTML field element’s ID, NOT the JavaScript variable, even if it has the same name! IS1500 JavaScript: Client-Side Forms
6
<div> versus <span>
Both <div> and <span> allow you to create a referenceable HTML element that you can manipulate from JavaScript or style independently. The difference is that <div> adds a line break before the text while <span> does not. IS1500 JavaScript: Client-Side Forms
7
Example: <div> vs <span>
<p>This is a paragraph of text with a <span style="color:red" id="spanArea">span section</span></p> <p>This is a paragraph of text with a <div style="color:blue" id="divArea">div section</div></p> IS1500 JavaScript: Client-Side Forms
8
Lack of <form> Section
When building a purely client-side form that will not be passed to the server does not require that the form elements be in a <form> section. The <form> tag normally contains the action="" attribute to point to the server-side forms processing program, but this does not apply with client-side forms. It’s nevertheless good coding practice to place the form into a <form> section. IS1500 JavaScript: Client-Side Forms
9
A JavaScript Calculator
For a more elaborate example, study the interactive HTML calculator at: IS1500 JavaScript: Client-Side Forms
10
Client-Side Scripting with JavaScript
Image Rollovers & Form Focus with JavaScript Form Focus IS1500 Client-Side Scripting with JavaScript
11
Client-Side Scripting with JavaScript
Setting Field Focus Focus puts the "keyboard focus" towards a particular field, e.g., after an error or to the first field in a form. When a text field is active it is said to be focused. Setting the focus means making the field active so the cursor is blinking and ready to accept text input. IS1500 Client-Side Scripting with JavaScript
12
Setting Focus on Page Load
<!DOCTYPE html> <html> <head> <script> function setFocus() { document.getElementById("fname").focus(); } </script> </head> <body onload="setFocus()"> <form> Name: <input type="text" id="fname" size="30"><br> Age: <input type="text" id="age" size="30"> </form> </body> </html> This example uses the onLoad event of the <body> tab. The event is triggered when the body of the HTML page has loaded. It ensures that the first text field has focus and is ready to accept input without having to “click” on it. IS1500 Client-Side Scripting with JavaScript
13
JavaScript: Client-Side Forms
Client-Side Scripting with JavaScript Getting Form Input IS1500 JavaScript: Client-Side Forms
14
JavaScript: Client-Side Forms
Text Input Text or free-form number input is accomplished via: <input type="text" id="textField" /> Retrieve the value via: var field = document.getElementById("textField"); var val = field.value; IS1500 JavaScript: Client-Side Forms
15
JavaScript: Client-Side Forms
Number Input Number input is accomplished via: <input type="number" id="numField" /> Retrieve the value via: var field = document.getElementById("numField"); var val = field.value; <input type="number" id="numGuests" /> <button type="button" onclick="procClick()">Submit</button> <script> function procClick() { var field = document.getElementById("numGuests"); var ng = field.value; alert("Number of guests = " + ng); } </script> IS1500 JavaScript: Client-Side Forms
16
JavaScript: Client-Side Forms
Checkbox A on/off (true/false) input is accomplished via: <input type="checkbox" id="checkField" /> Retrieve the value via: var field = document.getElementById("checkField"); var val = field.checked; <input type="checkbox" id="isFishing" /> <button type="button" onclick="procClick()">Submit</button> <script> function procClick() { var field = document.getElementById("isFishing"); var fishing = field.checked; if (fishing == true) { alert("fishing"); } else { alert("no fishing"); } </script> IS1500 JavaScript: Client-Side Forms
17
Option Menus (Dropdowns)
A choice from multiple is accomplished via: <option id="dropDown"> Retrieve the value via: var menu = document.getElementById("dropDown"); var val = menu.value; <select id="dropDown" onChange="proc()"> <option>Option 1</option> <option>Option 2</option> </select> <script> function proc() { var menu = document.getElementById("dropDown"); var val = menu.value; alert("selected item = " + val); } </script> IS1500 JavaScript: Client-Side Forms
18
Triggering with onChange
A JavaScript function can be called whenever a value is selected from an option menu rather than waiting for an explicit button press. <select id="dropDown" onChange="proc()"> <option>Option 1</option> <option>Option 2</option> </select> <script> function proc() { var menu = document.getElementById("dropDown"); var val = menu.value; alert("selected item = " + val); } </script> IS1500 JavaScript: Client-Side Forms
19
Setting Default Values
Use the selected attribute to define the default value for a selection menu. <select id="dropDown" onChange="proc()"> <option>Option 1</option> <option selected>Option 2</option> </select> <script> function proc() { // get distance from dropdown (through id value) var menu = document.getElementById("dropDown"); var val = menu.value; alert("selected item = " + val); } </script> IS1500 JavaScript: Client-Side Forms
20
Retrieving Attributes
You can also retrieve the id attribute of the selected item, not just its value. This requires knowing which option item was selected. access this through the selectedIndex property IS1500 JavaScript: Client-Side Forms
21
JavaScript: Client-Side Forms
<select id="dropDown" onChange="proc()"> <option id="one">Option 1</option> <option id="two" selected>Option 2</option> </select> <script> function proc() { var menu = document.getElementById("dropDown"); // get the value of the selected item var val = menu.value; // get the id of the selected item var id = menu.options[menu.selectedIndex].id; alert("selected item = " + val + " | " + id); } </script> IS1500 JavaScript: Client-Side Forms
22
Placing Values into a Text Field
The value property of an input field can also be set. <select id="dropDown" onChange="proc()"> <option id="one">Option 1</option> <option id="two" selected>Option 2</option> </select> <input type="text" id="txtField" /> <script> function proc() { var menu = document.getElementById("dropDown"); // get the value of the selected item var val = menu.value; // get the id of the selected item var id = menu.options[menu.selectedIndex].id; // retrieve the input field object var field = document.getElementById("txtField"); // place output into the input field's value field.value = val + " | " + id; } </script> IS1500 JavaScript: Client-Side Forms
23
JavaScript: Client-Side Forms
Client-Side Scripting with JavaScript Type conversion IS1500 JavaScript: Client-Side Forms
24
JavaScript: Client-Side Forms
Types JavaScript is dynamically typed and the type of a variable is based on what it holds. However, sometimes you need to force a particular data type. IS1500 JavaScript: Client-Side Forms
25
Converting Text to Number
To convert text to a number: parseInt() parseFloat() <input type="number" id="numDays" /> <button type="button" onclick="procClick()">Submit</button> <script> function procClick() { var field = document.getElementById("numDays"); var days= field.value; // force conversion to a number days = parseInt(days); } </script> IS1500 JavaScript: Client-Side Forms
26
JavaScript: Client-Side Forms
What if I don’t Convert? Generally, if a user types a number into an input field, JavaScript recognizes it as a number. However, if you get $NaN when you print out a number you know that JavaScript interpreted the “number” as text and you are required to do a conversion. IS1500 JavaScript: Client-Side Forms
27
JavaScript: Client-Side Forms
Formatting Numbers To format a number to a fixed number of decimals use the toFixed() method: The argument to toFixed(numDigits) is the number of digits after the decimal point. <input type="number" id="numGuests" /> <button type="button" onclick="procClick()">Submit</button> <script> function procClick() { var field = document.getElementById("numGuests"); var ng = field.value; alert("Number of guests = " + ng.toFixed(2)); } </script> IS1500 JavaScript: Client-Side Forms
28
Converting from Number to Text
To force conversion of a number to text is necessary if you need to concatenate a number to text for output. Simply “adding” the number to an empty string forces conversion to text. <input type="number" id="numDays" /> <button type="button" onclick="procClick()">Submit</button> <script> function procClick() { var field = document.getElementById("numDays"); var days= field.value; // force conversion to a number days = parseInt(days); // force conversion to text var text = "" + days; } </script> IS1500 JavaScript: Client-Side Forms
29
Summary, Review, & Questions…
IS1500 JavaScript: Client-Side Forms
Similar presentations
