html forms/events (instructor lesson) the event model html forms custom events 1
TRANSCRIPT
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