Registration Form

1
Registration Form

• A form allows user to enter information so that
  this information can be collected and processed
  online.

2
Form Validation

• From validation is a process by which the server
  or the browser checks form entries and, where
  possible, errors are removed.
• There are 2 types of checks Server-side and
  Client-side.

3
Object-based Language

• The client-side checks can be carried using
  JavaScript.
• JavaScript is an Object-based Language, which can
  manipulate the elements (known as Objects) on our
  Web pages by either modifying their properties or
  applying methods to them.
• Each object has properties that describe its
  appearance, purpose, or behaviour.
• An object can have methods, which are actions
  that can be performed with it or to it.

4
JavaScript Objects and Object Names

• An object in a Web page has a name. For example,
  the registration form has a name (REG) given to
  it. That is ltFORM NAMEREGgt
• JavaScript has reserved names for its objects
  which is shown above.

5
JavaScript Object Hierarchy

• In the registration form name REG, when referring
  to an object in it, say the FIRSTNAME input box,
  we need to specify the hierarchy of this object,
  which is
• window.document.REG.FIRSTNAME

6
JavaScript Object Properties

• Each object in JavaScript has properties
  associated with it. Some are shown above.

7
Modifying a Propertys Value

• The syntax for changing the value of a property
  is,
• object.property expression
• where object is the object name, property is the
  property name and expression is the value of this
  property.

8
Read-only Properties

• Some properties are read-only which cannot be
  changed.
• These include browser code name, browser name,
  and version.
• These properties are useful to identify the
  browser used.

9
Assigning a Property to a Variable

• The read-only properties can be saved to a
  variable.
• To save an objects property value in a variable,
  we use,
• variableobject.property
• where variable is the variable name.
• Properties can be used in a conditional statement.

10
Object Methods

• Object methods can be used to control the Web
  page. To apply a method to an object, we use,
• object.method(parameters)
• where parameters are any values that are used in
  applying the method to the object. For example,
  Thank you

11
JavaScript Events

• An event is a specific action that triggers the
  browser to run a block of JavaScript commands.
• Many events can take place one after another at a
  quick speed.

12
Events Data Entry

• The diagram above shows a user presses the Tab
  key to enter text into an input field, changes
  the fields value, and leaves the field by
  pressing the Tab key.

13
Event Handlers

• An Event Handler is code added to an HTML tag
  that is run whenever a particular event occurs
  within that tag. The syntax is,
• lttag event_handlerJavaScript commandsgt

14
onClick Event Handler

• The onClick event handler is used with radio
  button to change the pages background colour to
  red, blue, or green in response to the user
  clicking one of the three options.

15
onLoad Event Handler

• The onLoad event handler runs JavaScript commands
  when a Web page is loaded. The syntax is,
• ltBODY onLoadJavaScript commandsgt
• For example, to automatically insert the current
  date into the FORMDATE input box when the REG
  form is loaded, the onLoad event handler is used
  to execute the StartForm function.

16
Properties and Methods of Input Boxes
17
Emulating Events

• JavaScript can be used to emulate an event. That
  is, the Web page perform an action for the user,
  such as having the cursor move to the next field.
• Some examples are shown below.

18
Emulating an Event with Event Methods

• To have the cursor move to a different field on
  our Web page form, we use,
• document.FORM.FIELD.focus()
• To have the cursor move out of a field, we use,
• document.FORM.FIELD.blur()

19
Selecting Object

• There are times when we want to control how the
  user make a selection from a selection list
  presented in a form. The selection list is in
  ltSELECTgt tag.
• The onBlur() event handler will handle what
  action need to be carried out. In the above
  case, a JavaScript function (CheckOther())is used
  to handle the selection made by the user.

20
Values in a Selection List

• To refer to the value of an option in a selection
  list, we use, document.FORM.FIELD.optionsindex.v
  alue
• To refer to the text of an option, we use,
• document.FORM.FIELD.optionsindex.text
• To determine the index number of the currently
  selected option
• indexVariabledocument.FORM.FIELD.selectedIndex

21
Handling the Selection Example

• In this example, if the user selects one of the 7
  physicians in the list, the cursor should
  immediately go to the field for the APGAR
  Activity score, skipping over the If other field.
• On the other hand, if the user selects Other
  from the list, the form should prompt the user to
  enter the name of the physician before continuing.

22
The prompt() Method

• The prompt() method creates a dialog box for the
  user to enter a value or text string. The syntax
  is,
• prompt (message, Default_text)
• where message is the message that will appear in
  the dialog box, and Default_text is the default
  text that will initially appear in the dialog box.

23
Using the Entered Data

• The prompt() method also returns a result that
  can be
• - stored in a variable, for example,
• UserNameprompt(Enter your name, Type name
  here)
• - or placed in an object, for example,
• document.REG.OTHERNAME.valueprompt (Enter name
  of physician,Name)

24
The Result

• The input data (Dr. Carol White) was
  automatically placed into the OTHERNAME field.
• The cursor was then automatically move to the
  next field (ACT) using the focus() method.

25
Creating Calculated Fields

• There are times when we want to get a total value
  from the data entered into a number of text
  fields.
• Also each time we want make changes to the
  entered data in the text field, the total value
  automatically updated as shown in an example
  above.
• To do these, we use the onBlur() method in each
  of the text fields to handle what action(s) need
  to be carried out.

26
Doing the calculations

• To change a text value (from the text field) into
  a numeric value, we use,
• NumberVariableeval(TextValue)
• where NumberVariable is a variable that will
  contain the number value, and TextValue is a text
  string or a text variable.
• For example, Ageeval(55) produces the numeric
  value 55 and stores it in a variable named Age.

27
Calculation Function

• The APGAR() function takes the values from each
  of the 5 text fields, stores them in numeric
  variables, and then add the variables together.
  The result is placed into the TOTAL field.

28
Validating User Input

• Validating user input is a process of checking to
  see if the input is valid or not. If not, it
  forces the user to re-enter the input. In this
  case, the input must be either 0, 1, or 2.

29
The this Keyword

• The this keyword is JavaScript reserved word to
  refer to the currently selected object, what ever
  it might be.
• For example, if the PULSE field is the current
  field, the following 2 commands produce the same
  action (changing the value of the PULSE field to
  2)
• document.REG.PULSE.value2
• this.value2
• Another example, this.html

30
The alert() Method

• The alert() methods produce a dialog box, telling
  the user what is happening. It is similar to the
  prompt() method except it does not have an input
  box. The syntax is,
• alert(message)
• where message is the message that will appear in
  the dialog box.

31
The confirm() Method

• The confirm() method is similar to the alert()
  method except it also displays both an OK button
  and a Cancel button. The syntax is,
• confirm(message)
• If the user clicks OK, the confirm() method
  returns the value true.
• If the user clicks Cancel, the value false is
  returned.

32
Processing Invalid Entry Example

• The codes.
• The result!

33
Controlling Form Submission

• When a user completes a form and then click the
  SUBMIT button, a submit event is started which
  runs the onSubmit event handler. This event
  handler can call a function to perform another
  validity check. The syntax is,
• ltFORM onSubmitreturn Function_Name()gt
• where Function_name is the name of the function
  used to validate the form.

34
Check Boxes

• Check boxes have properties and methods as shown
  above.
• Check boxes can have a Boolean value. If a check
  box is checked (with a tick) it is true and
  vice versa.
• For example, the onSubmit event handler can run a
  function (say Check_Data() function) to look at
  the state of the check box and then make a
  decision base on it.

35
Form Submission ValidationExample

• The code which checks the status of the CONSENT
  Field check box.
• Here is the result when the check box has not
  been checked

36
Reloading a Web page with the Location Object

• There are occasions when a user wants to clear
  the form by clicking the RELOAD button. To avoid
  loosing the current date that had been
  automatically entered into the form when it was
  loaded, the form actually need to be reloaded and
  not reset. The syntax is, locationlocation.reloa
  d()
• In contrast, to load a Web page in our browser,
  we use, location URL
• where URL is the address of the Web page to be
  loaded.