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.

The design of the form is implemented as

which displays the results as

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 steps involved in processing the HTML form from javascript are :
Steps
1. Create an HTML form with all the elements we need.
2. Put the elements with appropriate name, which will be used for form processing.
3. Add an "onClick" function to the button or "onSubmit" function to form element to call the javascript function that processes the form.
4. Create an javascript function that process the form and submits it to target page.


3. Can you modify the script to process the form?

Yes, we can modify the script as per the user requirement. We can change the script to validate the form fields before submitting the form. This can be done to make the data more accurate and error free.


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

The user experience is enhanced by adding form validation for numbers with help of javascript function. The code is show as below:



After validating, with help of the javascript again we can separate the parameters in the header of the page passed from the form and display in it orderly manner. The code of the target page is like:



and the result is displayed in the page in form of table as below:



Reference :

Anderson, J. 2002. Javascript isNumeric Function. Retrieved on April 12, 2010 from http://www.codetoad.com/javascript/isnumeric.asp