Here we come to the end of our brief four part introduction to simple Web forms. In the first two sections we talked a bit about what forms are and how they are used on the Web—and we also covered the process of planning your HTML form and choosing how to process it. In the third section we finally built a simply sample HTML form. It is for collecting the name, address, and sex of the user. We can now talk about adding code to the page that will verify that the form was filled out completely, and add an alert telling the user. If the form is complete is will submit to our imaginary application
As we discussed before the form, when submitted, will send data to a script or application on the server for processing. This is called server-side processing. On the client-side, within the user’s browser, the form collects the data, and can run scripts for various functions also. For our purposes here we will use JavaScript to do some simple processing on the client-side with their browser doing the work. Dynamic pages like ASP or PHP pages run on the server-side, but much of the syntax for the script code is similar and is object-oriented-programming like JavaScript (JS), so becoming familiar with JS first will give you a head start on more complicated code.
JavaScript is an extensive scripting language and explaining it all in this brief article would be impossible. For a more extensive look, W3 Schools again has an excellent section on JavaScript at http://www.w3schools.com/js/. The book JavaScript for Dummies, as insulting as the title is, is also a quick and accurate reference for writing JavaScript. It is published by IDG Books and can be found at most larger bookstores. The main thing to remember is that JS is object-oriented so accessing any part of a Web page or element of a form is a simple as lining the object names up and separating them with a dot. Take a look at the following example, the data placed into the first Name textbox in our form would be retrieved by accessing:
document.frmExampmle1.inFirst.value
From here you can assign the value to a variable, manipulate it with a function, or take direct action on it. These commands and actions are performed by your browser. The JavaScript can be included in the code of your Web page between the <script> tags, or written on a separate file and accessed when the page loads. Organizationally, and for security reasons a separate file is best, especially if there will be functions used by numerous pages. To do this you create a file that resides with your HTML file on the server and give it a (.js) extension. To automatically access the file place the following line within the <head> tags.
<script language=”JavaScript” src=”scrSample.js”></script>
Once that is done, any time you call a function or refer to the script anywhere in your form it will have automatically been accessible to the page from the “scrSample” script.
To add some processing to our initial practice script we can do the following things. First we will create a function that will verify that the user answered all the questions, and let them know with an alert which question they left blank. Before the form will successfully submit, it will need to be completed. This function will be called when the submit button is pressed by adding the following attribute to the form tag:
onSubmit=”return checkFormValues()”
The JavaScript code that would be placed in your [scrSample.js] file would contain the function [checkFormValues()] that would be written in the following manner. If you follow through closely you can see how it access and checks the form elements to see if they have an entry. If the field is empty, an alert is sent to the user and their cursor is placed back in the blank field—plus the form would not have submitted. If the fields all check out, then the function lets the form submit by “returning true.” To save space we have only included the code for the First Name field below, each other field would have its own “if” statement.
function checkFormValues(){
if(document.frmUser.inFirst.value==””){
alert(“Please Enter a First Name”);
document.frmUser.inFirst.focus();
return false;
}
return true;
}
To take a look at a working copy of the entire practice form, visit a sample page on the web at: http://www.afinalword.com/dirSAMPLES/form-sample1.htm. If you bring the page up in your browser and select View Source from your browser’s tools you can follow the code. The practice form submits back to itself so that you can see the URL string submitted in the address bar of your browser.
We have now come to the end of the four part Functional Forms Series. It should have given you a taste of what forms can do on the Web. Remember that the basics are the key. Take a good look at the sites and books mentioned and start slow. Each time you learn something new you can add it to your practice form and script. Taking advantage of the numerous ways to collect information from your site visitors will help boost traffic to your site, or improve your skills as a developer.
John Adams Jr
John is a free-lance author and journalist born and raised in upstate New York. He is currently living and writing in Saint Augustine, Florida where the temperature is a bit warmer and the lifestyle more relaxed. The move has allowed John to broaden his range as a writer and he now lends his unique voice to everything from news and review articles in print and on the Web, to a broad range of eBooks and creative pieces. His expertise in Web Development and Design comes from a Masters Degree in Production Design from NYU and almost 10 years designing and programming sites and applications for various organizations. John’s writing work is beginning to attract attention from a wide variety of readers, in many countries, and he is exited to reach more people. See John’s Google+ Profile
