Exercise 6: Web form design and processing: A basis for e-commerce interaction

1. Design the form
“Retrofit” the form data string above:
Name=Evan+Burke&card=Visa&number=8443261344895544&order=French+perfume
For buying some French perfume into the
HTML form fields and submit button on the Web page form.



2. Write the script
Script archives exist for PERL, Python and JavaScript. Search the Web for a script that processes the HTML forms data. Read the code and list the steps involved in processing the form.

The following JavaScript is called a function called SubmitForm which would be executed when the submit button is clicked in the process.html.




3. Can you modify the script to process the form?
With JavaScript at the client side we can process simple forms without invoking server. JavaScript can only take care all the preliminary requirements, such as validating input to ensure that the user has entered everything and trigger JavaScript events by manipulating form controls. To actually process the form, CGI is required which is a mechanism for safely transporting data from a client HTML form to server.


4. Improve the user experience by add a JavaScript feature.

The following script checks for any input box in the form which is not filled in and prompt to alert the user to fill in the specific input box.

function checkscript() {
for (i=0;i<4;i++) {
box = document.example.elements[i];
if (!box.value) {
alert('You haven\'t filled in ' + box.name + '!');
box.focus()
return false;
}
}
return true;
}


Reference
Gordon, M. (1996). Using JavaScript and forms. Retrieved at 2 Apr, 2010 from http://www.javaworld.com/jw-06-1996/jw-06-javascript.html

Dutch politics primer and blog (2010). Example Form. Retrieved at 2 Apr,2010 from http://www.quirksmode.org/js/formex.html