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 – <form> </form>– 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 <form> 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)

• <form name = "myForm"></form>

• Can access the form byvar myForm = document.myForm;var myForm = document.forms[0];

Accessing an Element in the Form

<form name = "myForm"><input type="text" name="firstname">

</form>

var myForm = document.myForm;Var myFirstname = myForm.firstname;Var myFirstnameValue = myFirstname.value;

9

10

Example (using DOM)

• <form id="myform" name = "myForm"></form>

• Can access the form byvar myForm = document.getElementById('myform');

Accessing an Element in the Form

<form name = "myForm"><input type="text" id="firstname">

</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.

<p id='mypara'>Hi There</p>var myPara = document. getElementById('mypara');var myHTML = myPara.innerHTML;

myHTML has a value of: Hi There

12

Changing innerHTML<div id='mydiv'> <p>Hi There</p></div>

var myDiv= document. getElementById('mydiv');myDiv.innerHTML = "<h1>How are you?</h1>";

The div would now be set to the following HTML…

<div id='mydiv'> <h1>How are you?</h1></div>

13

Other Form Elements

• Button• Submit Button• Radiobutton• Checkbox• Select-Option List

14

Button

<form name = "myForm"><input type="text" id="firstname"><input type="button" onClick="someFunction();">

</form>………………………………………………………………..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 (<a> 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

<script>function someFuction(){ //some code return false; //prevent submit from triggering}</script><form method='post' action="http://cnn.com"><input type="submit" value="ClickMe"

onclick="return someFunction();">

Submitting From A Function

• You can submit a form directly from a JavaScript function

• Example Form:<form id='myform' method='post'

action='myProgram.php'><input type='text' id='myfirst'><input type='button' onclick='submitIt();'>

</form>

21

Example

22

<script>function submitIt(){ var myName = document.getElementById("myfirst").value; var myForm = document.getElementById("myform"); myForm.submit();}

</script>

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 ….<form method="post" action="http://cnn.com">

• 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<Event Name>• e.g onclick, onload

24

Event Handlers as Attributes

• A 'onclick' event is implicitly recognized in a link

• <html><body>

<a href='somepage.htm' name='linkSomePage'>Click Me</a>

</body></html>

25

Specifying Events• <html>

<body>

<a href="somepage.htm" name="linkSomePage"

onclick="alert('You Clicked?');">Click Me</a>

</body></html>

26

Calling a Function<html><body><script>

function linkPage( ){

alert ('You clicked');return true;

}

<a href="somepage.htm" name="linkSomePage" onclick="return linkPage( );"

>Click Me

</a>

</body></html>

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 <body> tag– <body language=JavaScript

onload="myOnLoadFunction( )"

onunload="myOnUnLoadFunction( )">

29

RadionButtons<form name = "myForm">

<input type="radio" name= "answer" id="rbyes" value="Y">Yes<input type="radio" name= "answer" id="rbno" value="N">No<input type="button" onClick="someFunction();">

</form>

………………………………………………………………..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<form name = "myForm">

<input type="checkbox" name="answer" id="cb1" value='1'>Option 1<input type="checkbox" name="answer" id="cb2" value='2'>Option 2<input type="button" value='Click Me' onClick="someFunction();">

</form>

………………………………………………………………..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<form name = "myForm">

<select name="myselect" id="myselect" size="1"><option value="red">Red</option><option value="white">White</option><option value="blue">Blue</option>

</select><input type="button" onClick="someFunction();">

</form>………………………………………………………………..function() {

var mySelect = document.getElementById("myselect").value;}

34

TextArea

• The <textarea> tag handles mulitline text• Example…

<textarea id='mytarea' rows='11' cols='60'>This is line 1This is line 2</textarea>

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 <br>– no font styles on individual words within textarea• You can apply a style to the entire <textarea>

36

Getting data from a Textarea

<textarea id='mytarea' rowa='11' cols='60'>This is line 1This is line 2</textarea>

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

• End

40