Using The HTTP Get Method To Pass Values
Between HTML Pages!
Hi. This is just a short article to help you to learn how to pass variables between HTML pages using the HTTP Get method, a valuable skill!
The technology I am using is HTML5/Canvas, JavaScript, and CSS3, important tools for anyone working on the Web.
In traditional, non-web programming, c/c++, unix, or visual basic, windows, or cobol, mvs, etc, one of the first things you find out is how to pass variables between modules. Without this facility, contemporary, well designed code, would be impossilbe! Yet when I first ran into the need for this functionality, building a web site, the methodology was not that apparent. I didn't find it in any of the references I had purchased or any of the online courses I took, with one exception, and that was a php/mysql class. However I did not want to use php, I wanted to stay with JavaScript!
What I was able to do, by just looking around the web and other resources, was to grab bits and pieces of ideas and put them together to solve the problem! As a programmer, this was very satisfying! What fun would it be if everything were so easy and already done!
To create a project that is meanningful, I have used a real life situation that I have run across in building this very site. What you see above is a piece of my art main screen (you can access from the link, Art, above), that has rows of digital art works on display. I wanted to let the user click on any image and be taken to a page with a larger image. I didn't just want an unformatted large image to display. I wanted a page I could format, and add items to if desired. I just needed at the very least, to pass in the image path, and to be complete, I also wanted to pass in a name for the alt and title attributes of the img tag.
Of course this could also be very useful in other situations. So in solving my specific problem, I could acquire a tool that I am sure will come in handy many times over!
Just to summarize, we want to click on an image, link to another html page, and pass that other html page some data which we can use to help format the new html page. And we are going to use the HTTP Get method in our HTML.
Above find a snippet of code in the calling HTML page. If you look at the image above, this snippet refers to the image in the top left corner, Talk Radio Hostess.
There is a div wrapper which holds the formatting and the image. Then we have the href, the page we want to link to, and the img, within that link tag. This is just the standard way to tie a click on an image to a link.
href="artfullsize.htm?image=artpix/Talk Radio Hostess Signed.png&name=Talk Radio Hostess" target="_blank"
So basically to use the GET method, you place a ? after your html link, then you add variable_name=value pairs, seperated by an &. I believe you can build the html link to a size of 2K.
There are caveats when using the GET method which you can easily find on the Internet. But for straightforward cases like this, these caveats typically would not apply.
Of course now we have to figure out what to do with this information on our linked web page! Above I have placed the actual code and I will go through it carefully.
First note the article tag, that begins this snippet. This is where the image will appear, and when the page is loaded, it serves as a place holder, with the values set to null, "". This prevents any extraneous material from appearing on the screen before we actually load the image we want. Note the id value, which will be used to access this image tag and its attributes.
Next we have the script tags, where our javascript will run and populate the necessary src, alt, and title attributes. This must come after the article tag, preferably right after, in my opinion. The script contains the basic logic to accomplish our task.
Our very first line executes a location.search.substring(1) command. The location.search command returns the information we are passing in our htm location string, all the information starting with the ?, in our case the following:
?image=artpix/Talk Radio Hostess Signed.png&name=Talk Radio Hostess
By using substring(1), we start at the i, so our variable, parm_string will not include the ?. Now we have everything we need, a string with both variables, image and name, and their values. All we need to do is split the parm_string at the right spot.
The javascript split command is just what we need! The split command loads both variable/value pairs into a new array, parm_array, with the image value in parm_array[0], and the name value in parm_array[1]. All we need to do is use the substring command to get the value, and leave out the variable name. We could use other techniques, setting a pointer after the "=", but I don't see the value in this. Typically we will know as programmers, what variables are being passed.
We have come a long way! We have all the information we need to build this image and show our new web page! The three document.getElementById statements access our image with the id of "oldImage" given previously, and they set the src, alt, and title attributes, thereby completing our page!
I hope this short article will help you with your web coding and design. Passing parameters is a very powerful tool, and this method seems to be very straightforward, and useful.
**********
Comments and suggestions are always welcome.
Best regards,
Phil Gennuso
BTW: If you want to contact me for any reason, including using any material on this site, please email: philgennuso@gmail.com