1 / 70

More JavaScript

More JavaScript. 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

burke-osborne
Download Presentation

More JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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: <p> What is your name? <input type=‘text’ name=‘name’ id=‘name’ > </p> • 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 representinginput 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 <html> <head> <style>form { background-color:yellow; width:300; padding:0.1in }</style> <script> function respond() { var hairColour=document.getElementById('hairColour'); var eyeColour=document.getElementById('eyeColour'); if (hairColour.value=='red') {eyeColour.value='blue';} } </script> </head> <body> <form method="post" action="someProgramURL"> <fieldset><legend>Colour of your hair?</legend> <input type="text" name="hairColour" id="hairColour“ onchange="respond()" > </fieldset> <fieldset><legend>Colour of your eyes?</legend> <input type="text" name="eyeColour" id="eyeColour"> </fieldset> <button type="Submit">Submit details</button> </form> </body> </html>

  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

  20. 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 <html> <head> <style> form { background-color:yellow; width:600; padding:0.1in } </style> <script> function respond() {var country=document.getElementById('country'); var name=document.getElementById('name'); if (country.value=='Spain') { name.size=80; } } </script> </head> <body> <form method="post" action="someProgramURL"> <fieldset><legend>What country are you from?</legend> <input type="text" name="country" id="country“ onchange="respond()" > </fieldset> <fieldset><legend>What is your name?</legend> <input type="text" name="name" id="name"> </fieldset> <button type="Submit">Submit details</button> </form> </body> </html>

  27. Sometimes, people from other countries have long nameWe 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 <html> <head> <style> form { background-color:yellow; width:600; padding:0.1in } </style> <script> function respond() {var longName=document.getElementById('longName'); var name=document.getElementById('name'); if (longName.checked) { name.size=80; } } </script> </head> <body> <form method="post" action="someProgramURL"> <fieldset><legend>What country are you from?</legend> <input type="text" name="country" id="country"> </fieldset> <fieldset><legend>Your name?</legend> Long name? <input type="checkbox" name="longName" id="longName“ onchange="respond()" > <br> <input type="text" name="name" id="name"> </fieldset> <button type="Submit">Submit details</button> </form> </body> </html>

  33. On this form, the company is trying to push sales of Superman’s Cloakso 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 thenwhen he clicks on the box for entering his name, an alert box pops us

  38. Specification of previous form <html> <head> <style>form { background-color:yellow; width:600; padding:0.1in } li { list-style-type : none } </style> <script> 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?"); } } </script> </head> <body> <form method="post" action="someProgramURL"> <fieldset><legend>Your T-shirt selection?</legend> <ul> <li>Batman's cloak <input type="checkbox" name="products" id="products1" value='batman' onchange="respond('products1')" > </li> <li>Superman's cloak <input type="checkbox" name="products" id="products2" value='superman' onchange="respond('products2')“checked='checked‘ >(our most popular item) </li> <li>Dr. Who's coat <input type="checkbox" name="products" id="products3" value='drWho' onchange="respond('products3')" > </li> </ul> </fieldset> <fieldset><legend>What is your name?</legend> <input type="text" name=“name" id=“name"> </fieldset> <button type="Submit">Submit order</button> </form> </body> </html>

  39. We can generalize the previous approach <html> <head> <style>form { background-color:yellow; width:600; padding:0.1in } li { list-style-type : none } </style> <script> function respond(someString) {var clickedItem=document.getElementById(someString); if (clickedItem.defaultChecked && !clickedItem.checked) { alert("Are you really sure you do not want "+clickedItem.value+"?"); } } </script> </head> <body> <form method="post" action="someProgramURL"> <fieldset> <legend>Your T-shirt selection?</legend> <ul> <li> Batman's cloak <input type="checkbox" name="products" id="products1" value="Batman's cloak" onchange="respond('products1')" > </li> <li> Superman's cloak <input type="checkbox" name="products" id="products2" value="Superman's cloak" onchange="respond('products2')" checked='checked' >(our most popular item)</li> <li> Dr. Who's coat <input type="checkbox" name="products" id="products3" value="Dr. Who's coat" onchange="respond('products3')“ checked='checked‘ >(another very popular item)</li> </ul> </fieldset> <fieldset><legend>What is your name?</legend><input type="text" name="country" id="country"></fieldset> <button type="Submit">Submit order</button> </form> </body> </html>

  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 andgets a warning

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

  49. User specifies both country and nameand …

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

More Related