IS1500: Introduction to Web Development JavaScript: Client-Side Forms Martin Schedlbauer, Ph.D. m.schedlbauer@neu.edu
JavaScript: Client-Side Forms Client-Side Scripting with JavaScript Client-Side FORMs IS1500 JavaScript: Client-Side Forms
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
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
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
<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
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
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
A JavaScript Calculator For a more elaborate example, study the interactive HTML calculator at: http://www.anaesthetist.com/mnm/javascript/calc.htm IS1500 JavaScript: Client-Side Forms
Client-Side Scripting with JavaScript Image Rollovers & Form Focus with JavaScript Form Focus IS1500 Client-Side Scripting with JavaScript
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
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
JavaScript: Client-Side Forms Client-Side Scripting with JavaScript Getting Form Input IS1500 JavaScript: Client-Side Forms
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
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
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
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
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
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
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
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
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
JavaScript: Client-Side Forms Client-Side Scripting with JavaScript Type conversion IS1500 JavaScript: Client-Side Forms
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
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
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
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
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
Summary, Review, & Questions… IS1500 JavaScript: Client-Side Forms