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 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 tag defined in the form’s 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 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