HTML Forms/Events (Instructor Lesson)

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

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

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 by var myForm = document.myForm; var myForm = document.forms[0];

9. 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;

10. Example (using DOM) • <form id="myform" name = "myForm"></form> • Can access the form by var myForm = document.getElementById('myform');

11. Accessing an Element in the Form <form name = "myForm"> <input type="text" id="firstname"> </form> var myFirstname = document.getElementById('firstname'); var myFirstnameValue = myFirstname.value;

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

13. Changing innerHTML <div id='mydiv'> <p>Hi There</p> </div> varmyDiv= 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>

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

15. 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); }

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

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

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?

20. Example <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();">

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

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

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

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

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

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

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

28. 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!

29. onload( ) function • Events for window objects are captured in the <body> tag • <body language=JavaScript onload="myOnLoadFunction( )" onunload="myOnUnLoadFunction( )">

30. 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) { … } }

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

32. 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) { … } }

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

34. 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; }

35. TextArea • The <textarea> tag handles mulitline text • Example… <textarea id='mytarea' rows='11' cols='60'> This is line 1 This is line 2 </textarea> var myTarea = document.getElementById('mytarea');

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

37. Getting data from a Textarea <textarea id='mytarea' rowa='11' cols='60'> This is line 1 This is line 2 </textarea> var myTarea = document.getElementById('mytarea'); alert(myTarea.value);

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

39. 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!

40. End • End