使用javascript或html5将参数传递给url

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.

Answer 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";