Passing a parameter to a url using javascript or html5

Question

Newbie here.... I have an html5 and javascript webpage where a user can select an image by pausing a video. I display a thumbnail of the image displaying at the pause time, and the image either side of it in case the timings are tricky. This works well. Now I have three variables that hold the name of the .jpg files selected (there are 217 of them). I want to open a new web page and pass it the .jpg filename of the image the user has clicked to order a print. I have looked at many ways to pass variables to urls: query strings, sessionStorage, form with link method and others. All of them tell me how to pass a text string, which works fine. How do I pass a variable?

For example, the statements below works fine, but the sessionStorage returns null.

var nextImg = "VideoImages/sniperImg" + i + ".jpg";
document.getElementById("threeOfThree").src = nextImg; //this works 
sessionStorage.name=nextImg; //this does not

Another example:

<a href="OrderPrint.html?imgSel=preImg"
  img id="oneOfThree" src="" width="226" height="300" >
</a>

This works OK if I specify a text string like "?image.jpg", but not if I specify the variable name.

I am sure the answer is obvious to others, but I would really value some help here.

How are you serving the images? I presume from a database? or folder scrape? or hard coded? — StudioTime
– StudioTime, Commented Apr 19, 2015 at 18:49

plafer · Accepted Answer · 2015-04-19 19:01:35Z

1

If you want to send a parameter to another page, then you need to set the url and query string in the href tag of an a tag.

For example:

<a id="myatag" href="">
    <!-- Whatever you want the user to click-->
</a>

and the js:

document.getElementById("myatag").href = "OrderPrint.html?image=" + "sniperImg" + i;

Then, you can retrieve the name of the image on the server side script, and append ".jpg" or whatever extension you are using. For example, in PHP:

$image = "VideoImages/" + $_GET["image"] + ".jpg";

answered Apr 19, 2015 at 19:01

plafer

18512 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Passing a parameter to a url using javascript or html5

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related