Top Banner
Lesson 4 Advanced Forms Handling
5

Lesson 4 Advanced Forms Handling. Aggravations Long forms that make you scroll out of the normal viewing area Lets create a scrollable form that is a.

Dec 18, 2015

Download

Documents

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Lesson 4 Advanced Forms Handling. Aggravations Long forms that make you scroll out of the normal viewing area Lets create a scrollable form that is a.

Lesson 4

Advanced Forms Handling

Page 2: Lesson 4 Advanced Forms Handling. Aggravations Long forms that make you scroll out of the normal viewing area Lets create a scrollable form that is a.

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.

Page 3: Lesson 4 Advanced Forms Handling. Aggravations Long forms that make you scroll out of the normal viewing area Lets create a scrollable form that is a.

My Scrolling Data Form

Page 4: Lesson 4 Advanced Forms Handling. Aggravations Long forms that make you scroll out of the normal viewing area Lets create a scrollable form that is a.

Database simulation

• Since we don’t have a database at our disposal we’ll 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 <SCRIPT> tag defined in the form’s <head> 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

Page 5: Lesson 4 Advanced Forms Handling. Aggravations Long forms that make you scroll out of the normal viewing area Lets create a scrollable form that is a.

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

• Don’t 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 can’t 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