1. More JavaScript

2. JavaScript and HTML forms One of the most common usages of JavaScript is to respond to user actions when completing HTML forms JavaScript enables us to process HTML forms by providing –a large library of object classes with associated methods and attributes This library is part of a much bigger library, the DOM (Document Object Model) library that will be introduced in CS 4408 Now, however, we will consider just a small part of it, connected with HTML form elements

3. Processing input elements We have seen that we can access any HTML element on a page if it has an id attribute Remember the form which contained this: What is your name? We could check if its value is the empty string with this JavaScript statement if ( document.getElementById( ‘ name ’ ).value =='') { alert("Name is empty"); }

4. The JavaScript object class for representing input elements We have already seen that the this object class contains an attribute called value We have just read the value of this attribute But we can also change its value Consider the form on the next slide –which asks for the colour of the user’s hair and eyes

5. Initial state of form

6. The user gives his hair colour as ‘brown’ and hits the tab key on his keyboard

7. The cursor flashes in the eye-colour input box, which is still empty, waiting for him to type something

8. The user can now declare his eye colour

9. But, let’s refresh the form

10. Suppose the user declares his hair colour is ‘red’. Before he hits the tab key, the cursor is still in the hair-colour box and the eye-colour box is empty

11. But, immediately after he hits the tab key, the value ‘blue’ appears in the eye-colour box

12. Although, if he wants, the user can replace the eye-colour ‘blue’ with some other colour

13. Specification for the form we have just seen form { background-color:yellow; width:300; padding:0.1in } function respond() { var hairColour=document.getElementById('hairColour'); var eyeColour=document.getElementById('eyeColour'); if (hairColour.value=='red') { eyeColour.value='blue'; } } Colour of your hair? Colour of your eyes? Submit details

14. Attributes and methods of the HTMLInputElement class Attributes DOMString defaultValue; boolean defaultChecked; readonly HTMLFormElement form; DOMString accept; DOMString accessKey; DOMString align; DOMString alt; boolean checked; boolean disabled; long maxLength; DOMString name; boolean readOnly; DOMString size; DOMString src; long tabIndex; readonly DOMString type; DOMString useMap; DOMString value; Methods void blur() ; void focus() ; void select() ; void click() ;

15. Notice that some attributes are readonly Attributes DOMString defaultValue; boolean defaultChecked; readonly HTMLFormElement form; DOMString accept; DOMString accessKey; DOMString align; /*deprecated from HTML 4.0 onwards*/ DOMString alt; boolean checked; boolean disabled; long maxLength; DOMString name; boolean readOnly; DOMString size; DOMString src; long tabIndex; readonly DOMString type; DOMString useMap; DOMString value; The form attribute of a HTMLInputElement object lets us access the object which represents the entire form of which the input element forms a part The type attribute of a HTMLInputElement object gives us the type of the input element We cannot change either of these

16. Using the size attribute Remember that Spanish names are often very long We might want to cater for that on a form which asks where the user comes from and what his name is

17. Initial state of the form

18. Suppose the user has stated he is from ‘Ireland’ but has not yet hit the tab key

19. After he has hit the tab key, the size of the input element for entering his name is unchanged

21. And the user just enters his name as usual

22. But, let’s refresh the form

23. Suppose the user declares she is from Spain, but has not yet hit the tab key

24. After she has hit the tab key, the box in which she can enter her name gets much bigger

25. So she can type in a long Spanish name and still see it all

26. Specification of previous form form { background-color:yellow; width:600; padding:0.1in } function respond() {var country=document.getElementById('country'); var name=document.getElementById('name'); if (country.value=='Spain') { name.size=80; } } What country are you from? What is your name? Submit details

27. Sometimes, people from other countries have long name We could let the user declare she has a long name, by clicking on a checkbox

28. When the user has declared her country and hit the tab key, focus moves to the checkbox

29. The user has clicked the checkbox but has not yet hit the tab key

30. The user has just hit the tab key and the name box has become bigger

31. So she can now type in her long name and still see it all

32. Specification of previous form form { background-color:yellow; width:600; padding:0.1in } function respond() {var longName=document.getElementById('longName'); var name=document.getElementById('name'); if (longName.checked) { name.size=80; } } What country are you from? Your name? Long name? <input type="checkbox" name="longName" id="longName“ onchange="respond()" > Submit details

33. On this form, the company is trying to push sales of Superman’s Cloak so it is pre-checked on the form

34. Suppose the user wants only Batman’s Cloak, …

35. Suppose the user wants only Batman’s Cloak, so he clicks on the first checkbox, and then …

36. … he unchecks the box for Superman’s Cloak, and then …

37. and then when he clicks on the box for entering his name, an alert box pops us

38. Specification of previous form form { background-color:yellow; width:600; padding:0.1in } li { list-style-type : none } function respond(someString) { var clickedItem=document.getElementById(someString); if (clickedItem.defaultChecked && !clickedItem.checked) { alert("Are you really sure you do not want Superman's cloak?"); } } Your T-shirt selection? Batman's cloak <input type="checkbox" name="products" id="products1" value='batman' onchange="respond('products1')" > Superman's cloak <input type="checkbox" name="products" id="products2" value='superman' onchange="respond('products2')“ checked='checked‘ >(our most popular item) Dr. Who's coat <input type="checkbox" name="products" id="products3" value='drWho' onchange="respond('products3')" > What is your name? Submit order

39. We can generalize the previous approach form { background-color:yellow; width:600; padding:0.1in } li { list-style-type : none } function respond(someString) {var clickedItem=document.getElementById(someString); if (clickedItem.defaultChecked && !clickedItem.checked) { alert("Are you really sure you do not want "+clickedItem.value+"?"); } } Your T-shirt selection? Batman's cloak Superman's cloak (our most popular item) Dr. Who's coat (another very popular item) What is your name? Submit order

40. A reminder: checking forms again

41. Suppose the user clicks on the ‘Check form’ button

42. He is warned that he has not declared his country and …

43. … that he has not declared his name

44. A better way to do this

45. It would be better if we did not have a special button for checking that the form is completed correctly It would be better if the form-checking task could be performed by the button that we use to submit the data on the form This button should –Check whether the form is completed correctly If it is, the data should be submitted If it is not, a warning message should be produced

46. Form has just one button

47. User clicks on this button and gets a warning

48. User specifies country and clicks on button … Now get a different warning

49. User specifies both country and name and …

50. User specifies both country and name and clicks on the button and …

51. User specifies both country and name and clicks on the button and … the data are sent to the server, which replies

52. Text of previous PHP program form { background-color:yellow; width:600; padding:0.1in } function maybeSubmit() {if ( !errorFoundIn('country') && !errorFoundIn('name') ) { var form1=document.getElementById('form1'); form1.submit(); } } function errorFoundIn(someString) {var someItem=document.getElementById(someString); if (someItem.value=='') { alert('You have not specified your '+someString); return true; } else { return false; } } <?php $country=$_POST['country']; $name=$_POST['name']; if ($country && $name) { echo " Hello $name from $country "; } else {?> " id="form1“ > What is your country? What is your name? Submit details <?php } ?>

53. We have just used the submit() method from the HTMLFormElement object class Attributes readonly HTMLCollection elements; readonly long length; DOMString name; DOMString acceptCharset; DOMString action; DOMString enctype; DOMString method; DOMString target; Methods void submit() ; void reset() ;

54. Now, that we know about the submit() method We can use it instead of having to use the input of type=‘image’ If we want to use a picture as a submit button, we can just –Put the picture on the form using an img element –Give the img element an onclick attribute Which uses the submit() method of the form object

55. Using an image with the submit() method form { width : 400; background-color:gray; padding:0.1in legend { color : white }.myImage { height:25; width:25 } function mySubmit() {var form1=document.getElementById('form1'); form1.submit(); } <?php $surname=$_POST['surname']; if ($surname) {echo "Your surname is $surname";} else {?> " id="form1“ > What is your surname? Submit data <?php } ?> Example program

56. Fresh form

57. User enters data and …

58. User enters data and clicks on image and …

59. User enters data and clicks on image and the server replies

60. Now, back to the HTMLInputElement object class

61. In the HTMLInputElement class, the attribute defaultValue can be used to access any value which is specified on the original form Attributes DOMString defaultValue; boolean defaultChecked; readonly HTMLFormElement form; DOMString accept; DOMString accessKey; DOMString align; DOMString alt; boolean checked; boolean disabled; long maxLength; DOMString name; boolean readOnly; DOMString size; DOMString src; long tabIndex; readonly DOMString type; DOMString useMap; DOMString value; Methods void blur() ; void focus() ; void select() ; void click() ;

62. This form has no fieldset legends

63. The user is told what must be entered because the input elements contain some default text " id="form1"> Submit details

64. But, now, when we are checking if the form has been completed correctly, we cannot just check for the empty string –because the inputs always contain a non- empty string Instead, a correctly completed form does not have the default value in any of its input elements

65. Text of appropriate PHP program form { background-color:yellow; width:600; padding:0.1in } function maybeSubmit() {if ( !errorFoundIn('country') && !errorFoundIn('name') ) { var form1=document.getElementById('form1'); form1.submit(); } } function errorFoundIn(someString) {var someItem=document.getElementById(someString); if ( someItem.value==someItem.defaultValue ) { alert('You have not specified your '+someString); return true; } else { return false; } } <?php $country=$_POST['country']; $name=$_POST['name']; if ($country && $name) { echo " Hello $name from $country "; } else {?> " id="form1"> Submit details <?php } ?>

66. Fresh form

67. Error alert is produced when user clicks button on an incomplete form

68. When user clicks button on a complete form, …

69. When user clicks button on a complete form, the data are sent to the server, which replies

70. For more information about the HTMLInputElement object class Go to this web-page http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-html.html and search for the text “Interface HTMLInputElement”