'Retrofit' the form data string below:
name=Evan+Burke&card=Visa&number=8443261344895544&order=French+perfume
for buying some French perfume into the HTML form fields and submit button on te Web page form.
I am using the HTML coding below to create the form. I am use the GET rather than the POST function as I can see the submit data is correct.
The created form showed in the Internet Explorer is like this:
By hitting the Submit button, the entered data is submit into the server. The form's fields will clear up and the transfered data will show on the address bar.
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.
After searching the Web, I found a JavaScript archive in the Javaworld.com which can processes the HTML forms data. This Java Script is very simply, it reads the data from "myform" and then display the result on the browser screen. The JavaScript coding and the execution process and result are show as follow:
Execution process
Result
3. Can you modify the script to process the form?
Yes, of course. First of all, I need to update the JavaScript form structure in order to fit the data string. Afterward, I will add more lines in the JavaScript in order to display the submit data on the browser by the user.
The modified coding is as below:
The execution process is:
The final result is:
4. Improve the user experience by add a Javascript feature.
In order to imporve the user experience, I have add a Javascript feature which prodvide a drop down selection list for the Card option and moreover a pop up window to show the card selection from the drop down menu.
The modified coding is as below:
The pop up window will show the user has selected the Master card.
After press the Submit button, the browser will show all the inputed details.
No comments:
Post a Comment