HTML Forms/Events (Instructor Lesson) The Event model HTML Forms Custom Events 1

Events How do we connect our code with user events on a web page? – e.g. user clicks a button JavaScript doesn't have events BOM objects do 2

3 HTML forms HTML Forms allow us to interact with the user – Instead of prompting we can collect information from the user – The information can be processing on the client- side (on the PC) or sent to server for processing (and storage)

4 GUI Interface By using a computer you've become used to some standard elements – Buttons – Drop down list boxes – Radio buttons and checkboxes – Edit boxes where you can key information Most GUI elements can be easily coded to appear on an HTML form

5 Elements and Events We can tie elements (like Buttons) to JavaScript code We will be using simple elements for now – not ActiveX, Java Applets, or plug-ins

6 Inside the Form All of these GUI elements must be placed inside the HTML form Form tag – – Groups the elements There can be multiple forms on a single HTML page, but only one form is submitted to a server at a time

7 Form Object The creates a form object on the BOM – Has attributes like ACTION - determines where the form is submitted METHOD - determines how the information is submitted – Only needed if we are going to send information to a server

8 Example (using BOM) Can access the form by var myForm = document.myForm; var myForm = document.forms[0];

Accessing an Element in the Form var myForm = document.myForm; Var myFirstname = myForm.firstname; Var myFirstnameValue = myFirstname.value; 9

10 Example (using DOM) Can access the form by var myForm = document.getElementById('myform');

Accessing an Element in the Form var myFirstname = document.getElementById('firstname'); var myFirstnameValue = myFirstname.value; 11

Changing HTML for an Element innerHTML property – Represents everything that is between a beginning tag and an ending tag – E.g. Hi There var myPara = document. getElementById('mypara'); var myHTML = myPara.innerHTML; myHTML has a value of: Hi There 12

Changing innerHTML Hi There var myDiv= document. getElementById('mydiv'); myDiv.innerHTML = " How are you? "; The div would now be set to the following HTML… How are you? 13

Other Form Elements Button Submit Button Radiobutton Checkbox Select-Option List 14

Button ……………………………………………………………….. function someFunction() { var myFirst = document.getElementById("firstname").value; alert(myFirst); } 15

onClick Event The onClick() listener was attached to the Button element object The startIt() function (the handler) was called when the button was clicked by the user 16

Exercise 4.1 Create an HTML Form that has text fields for a user's first name and age Add a button that calls a function The function should… – Retrieve the user entered values – Display the following on the Web page depending on age entered If age is less then 40: You're young. Stay awake! If age is 40 or more: Time to wear a black armband :-( – Note: Use the innerHTML property to display the message 17

18 Submit Button The Submit button allows us to submit the information to the server (we'll discuss in a moment) – onSubmit( ) event handler

19 Using Return Values Remember that a link action ( tag) would be cancelled if a JavaScript function returned false (with the onclick event) Likewise with the Submit button; the onSubmit event and thus the submit( ) method would be cancelled This is a good place to do form validation – is the data valid?

Example 20 function someFuction() { //some code return false; //prevent submit from triggering } <input type="submit" value="ClickMe" onclick="return someFunction();">

Submitting From A Function You can submit a form directly from a JavaScript function Example Form: 21

Example 22 function submitIt() { var myName = document.getElementById("myfirst").value; var myForm = document.getElementById("myform"); myForm.submit(); }

Exercise 4.2 Change the button on the program you wrote in the last exercise to be a submit-button. Change the form tag to …. Make sure that when the user clicks the button the function is called and they don't see the CNN website. 23

Event Handler We may want to make a menu pop-up when the user click on our page We need an event handler – intercepts the event – executes code – format: on e.g onclick, onload 24

Event Handlers as Attributes A 'onclick' event is implicitly recognized in a link Click Me 25

Specifying Events <a href="somepage.htm" name="linkSomePage" onclick="alert('You Clicked?');" > Click Me 26

Calling a Function function linkPage( ) { alert ('You clicked'); return true; } <a href="somepage.htm" name="linkSomePage" onclick="return linkPage( );" > Click Me 27

Return Values in Events If a function returns true the code happens – e.g. the link takes you to another page If the function returns false – e.g. the link does NOT do anything There are exceptions, so test your code! 28

onload( ) function Events for window objects are captured in the tag – 29

RadionButtons Yes No ……………………………………………………………….. function someFunction() { var myRByes = document.getElementById("rbyes"); if (myRByes.checked) { … } } 30

Exercise 4.3 Make a form that looks like this After user select a radio button and clicks the button place a message to the right of the button that says what they clicked. 31

CheckBoxes Option 1 Option 2 ……………………………………………………………….. function someFunction() { var myCB1 = document.getElementById("cb1").value; if (myCB1.checked) { … } } 32

Exercise 4.4 Make a form that looks like this Here are the possible results after clicking… 33

Select-Option List Red White Blue ……………………………………………………………….. function() { var mySelect = document.getElementById("myselect").value; } 34

TextArea The tag handles mulitline text Example… This is line 1 This is line 2 var myTarea = document.getElementById('mytarea'); 35

Textarea - continued The textarea does NOT process HTML code The text in a textarea behaves live it would in a plain text editor (i.e. Notepad) – newlines instead of – no font styles on individual words within textarea You can apply a style to the entire 36

Getting data from a Textarea This is line 1 This is line 2 var myTarea = document.getElementById('mytarea'); alert(myTarea.value); 37

Example Events clicking a link – onClick, onDblClick moving a mouse pointer over some text – onMouseMove, onMouseDown, onMouseUp, onMouseOver Starting or Exiting the page – onLoad, onUnload 38

More Events Changing Focus – onBlur, onFocus Entering Text – onKeyPress, onKeyDown, onKeyUp Choosing an item from a Select-Option list – onChange, onSelect, onBlur, onFocus These will be covered in the Next Lesson! 39

End 40