JavaScript

(1)query.html

Create a webpage named query.html and make it valid. (body head etc)

HTML errors can confuse your browser confusing JavaScript! Validate your HTML.

(2) form

Create a form on this page with First Name and Last Name text fields with a submit button for the form.

HTML errors can confuse your browser confusing JavaScript! Validate your HTML.

(3) action

The form method must be GET and the action will be a local file named: result.html

HTML errors can confuse your browser confusing JavaScript! Validate your HTML.

(4) result.html

Create a webpage named result.html and make it valid. (body head etc) You should now be able to fill in and submit a form from query.html and the browser will then go to the blank result.html page.

When you submit a form using method="GET" it encodes the form into the URL and that is how it sends the information. If you fill out the form and submit it the URL will show what you typed into the form encoded into a URL.

Experiment with form data and submitting the form to the result page and READ the URL to see what happens in the URL when the form submits using GET.

(5) form again

result.html : Create a similar form on this page with First Name and Last Name text fields. This form will have NO submit button. The First Name and Last Name text fields shall be made READONLY and must be blank.

Research the tags you are trying to do something new with-- look up the INPUT tag to see how to make it read only.

Put ID attributes on tags you want to get objects for... like you had to do on the DOM assignment.

If you use spaces in the form and it comes out with + in the URL and in your form instead of a space or a %20 like we expect-- do not worry about it.

(6) javascript

Use javascript on the result.html page (external or internal) shall READ the URL and extract and decode the first and last names then place them into the form as they appeared when typed into the form on the query.html page.

You may need a javascript reference for the String Object (a DOM reference may skip or place Javascript in another section - Strings are not DOM they are JS.)

Smart IT people do not repeat themselves often, instead of constantly repeating a slow process, why not hard code in strings...URLs... and process them instead? When they work then move them to slower sources of input.

Refer to your DOM assignment because it has most the techniques used to do this.

Simple steps and experiments at a time. Do not do too much at a time.

LOCATION object. research it; it lets you read the URL. Lecture covered everything needed.

If you use spaces in the form and it comes out with + in the URL and in your form instead of a space or a %20 like we expect-- do not worry about it.

Put ID attributes on tags you want to get objects for... like you had to do on the DOM assignment.

(6test) test case

You must correctly send the name john & margaret smith 2. The lack of symbols means you are properly encoding and decoding invalid characters. Note: You will have to manually replace the + characters if they show up, this is a legacy thing we still have to deal with decades later.