Advanced Forms Handling

1
Lesson 4

• Advanced Forms Handling

2
Aggravations

• Long forms that make you scroll out of the normal
  viewing area
• Lets create a scrollable form that is a viewport
  for the data and scroll the data through the
  viewport.

3
My Scrolling Data Form
4
Database simulation

• Since we dont have a database at our disposal
  well simulate that we have a CGI program that
  will run on the server and query our data out of
  a database.
• The CGI program will then create some dynamic
  Javascript that will load the data into a set of
  Javascript arrays
• The way the form asks the server to run the CGI
  program is by placing the URL of the CGI program
  in the SRC attribute of a ltSCRIPTgt tag defined in
  the forms ltheadgt section
• The CGI program could be a server-side PERL
  Script, ASP page, PHP page, Cold Fusion or even a
  Java servlet or JSP
• For this exercise the file mydata.js will
  represent the dynamic Javascript created by the
  CGI program

5
What to do

• Start out with the files myForm.htm and
  mydata.js
• Add event handlers for the Scroll up and
  Scroll down buttons
• Define functions to accomplish the scrolling
• Dont let the user scroll the viewport out of the
  data (up or down)
• Ring a bell or display an alert to notify users
  that they cant scroll any further
• Add event handler for the Add button
• New data should always be added at the end of the
  arrays and shown to the user by scrolling the
  last 5 rows of the arrays into the viewport
• This action would normally send the Add data to
  a CGI program on the server to update a database
• Add an event handler for the Delete radio
  buttons
• Delete the elements indicated by the radio button
  and refresh the viewport
• This action would normally send a Delete
  request to a CGI program running on the server to
  update a database