An Unorthodox Javascript Form Submission
I was recently working on an HTML webpage project where I wanted to pre-process data using Javascript, log the results to server-side file using PHP, and then return processing to the original HTML page. Along the way I found I had to code in three "tricks" that seemed worthy of a notebook entry. All three were workarounds of the submit process - apparently my goals didn't fit the model of what webpages are "supposed" to do!
First, I had to workaround the HTML form behavior so that my page would process the Javascript before submitting the data to the server. Second, I had to alter the behavior of the PHP running on the server so that it would return to the original page. Third, I (quite unexpectedly) had to restart some animated GIF graphics that would freeze each time the submit process ran.
Highjacking The Form Submit
When a user initiates a submit event, typically by clicking on a submit button or pressing the enter key, the normal behavior of the webpage is to perform the action and method as defined in the form tag. I wasn't using a submit button, just an enter key. To get my Javascript code to run prior to submitting data to the server I had to intercept the keypress using the onKeyPress event handler. The event handler is coded right into the form tag:
This technique is well documented across the Internet, often in pages giving instruction for using Javascript to validate form data prior to submission. The handler captures every keystroke and tests to see if the user hit the enter key which it recognizes as event.keycode == 13. If the user did hit the enter key, rather than behave as if the submit event had been triggered, the event handler executes the function processdata. The return false statement which follows the function call, nullifies the submit event.
Now that control has been wrested from the form and turned over to the processdata function, the remaining functionality for the routine can be executed in the function:
The simple function first calls another function named mainroutine which contains the code I wanted executed, and then handles the document submission with the document.mainscreen.submit method - mainscreen being the name of the form.
Stopping The Page Refresh
The next situation I encountered was that the web browser assumed that since I was submitting form data I would want to provide a destination page in my PHP code and redirect to that page - or at the very least refresh my current page. What I wanted to do was return to my original page without forcing a page refresh. To accomplish this I had to enter a new line in my PHP script:
I placed this line at the very end of the script. It sends the 204 response code back to the client which indicates that no page is available to return.
Reloading The Animated Gifs
At this point I actually thought I was done, but then I noticed that gif animations on my page had frozen. The stopping of the animations was apparently an artifact of the form submission. The trick to restarting the animations was to use the innerHTML method to reload them into the current document. First, within the body of the page, I enclosed the graphics with span tags and gave them the ID of gif1 and gif2 so that I could refer to them later:
Then I added code to my processedata function described above to refresh the areas defined within the span tags, so that the full function now looked like this:
Note that I had to escape out the quotation marks using the \. The actual reading of this code seems silly, because I'm just reloading the values into gif1.innerHTML and gif2.innerHTML that were already there. It does, however, setup the possibility of expanding the technique to replace animated gifs on the fly without refreshing the page.
In closing, I'd point out that none of these techniques were difficult. The onkeypress event handler and the innerHTML method are both very well documented. Returning the 204 code in the HTTP header was a little trickier but still easy once I figured it out. The trick was putting all the techniques together to accomplish something that seemed very straightforward to me, but nonetheless violated several normal HTML behaviors.
See more from Web Design
Other Pages You Might Enjoy...
From Boole to Bits - Claude Shannon's Digital Revolution
Claude Shannon propelled computer engineering into the modern age in 1937 when he published a paper demonstrating that Boolean algebra can be applied to the design of electronic circuits to express any mathematical or logical function.
George Stibitz and the Bell Laboratories Relay Computers
In the 1940s, driven by the innovations of George Stibitz and a heritage in switching technology, Bell Telephone Laboratories produced a series of increasingly capable computers using electromagnetic relay logic circuits.
The Meissen Porcelain Manufactory
For more than 300 years the Meissen Porcelain Manufactory has been a central figure in European porcelain. It was at Meissen that the first true hard-paste porcelain was manufactured outside of China, and the story of that accomplishment has the high drama of fiction - all the more intriguing because it is true.
Pirated Glassware that Collectors Want to Own
The 1996 discovery of what is believed to be the wreckage of Blackbeard’s ship Queen Anne’s Revenge, is providing historians and collectors new information about the fragile and transparent objects that came onto the North American Continent before arrival of the first piece of cut glass.
Collecting Antique Furniture
Of all the collectible antiques, the broad category of furniture is perhaps the most widely held and most satisfying. Frequently handed down through generations, the various chairs, tables, cabinets and other pieces are often in use, adding character and constancy to our daily lives. This guide includes an overview of the significant styles and historical periods, and other important information for collectors.
Collecting Antique Clocks and Watches
Information for collectors of antique clocks and watches. Includes a history of clock and watchmaking, an overview of styles, and important terminology.
Collecting Antique Jewelry
Embodying the wealth and treasure of bygone days, the antique jewelry pieces available today include some of the world's most valuable artifacts. Includes a history of jewelry making, an overview of the major historical periods, and a glossary of antique jewelry terminology.
Javascript Chatterbot Workshop
Home of the Do It Yourself Chatterbot Project. Has a ready to go chatterbot shell and full instructions on how to program it.
Update Your Navigation and Other Content Automatically with JavaScript
Learn to use this simple JavaScript technique to change content and make instant updates across your entire site. Whether you update five pages or thousands, this handy web tip is a must read!
Tips for Improving Website Navigation
A business often has more than one target audience it wants to reach with its website. Different customers mean different sales appeals and a homepage needs to be able to direct visitor traffic to go to the right places to get information or make a sale.
Choosing the Right Color for Your Web Site
When people build a web site for their business (or hire a web design company to make it for them), not much thought is put into deciding what color their web site will be as most would rather focus on more important tasks like creating content, web site optimization and promotion. Most simply choose the most web-friendly colors, others use their company’s logo as base while some decide to just use their favorite color.
A Longest Common Substring Function for Javascript
Here is a down and dirty Javascript function that returns the longest substring shared by two string variables.
Beginning at the Beginning - File Systems and Plain Text Files
Getting up and running with HTML, Javascript, and a host of other technologies requires an understanding of file systems and text editing tools. This page is for people who need to come up-to-speed on the basics before moving on to introductory markup and coding.
HTML For the Absolute Beginner
The intent of this tutorial is to provide a basic introduction to making web pages for the person who has never studied HTML before. Once one has worked through this material they should be able to create a bare bones HTML file and be ready to move on to learning to build web pages.