asked on

Turn getElementByID click into a passable parameter

I have a series of images that each have a unique ID. When a user clicks on an image thumbnail, it loads a preview window by using onClick="document.getElementById('0029a').checked=true;" to tell which image was selected.

Once they select an image, I need to take the same ID number and pass it to the next page if they click next. I am not sure how to get that ID and turn it into a variable that I can pass along. I would like it to work where their click is what determines the variable and when they click next, I can send that variable along.

The input tag you see will not be used in this case. I have an if then statement that determines if the user is submitting the form now or going to the next page. The submit form functionality works fine. It is passing the variable on to the next page that I need help with.

Here is the link and thumbnail image with a hardcoded ID, other images have other hardcoded IDs.
 
<a href="images/instant_sites/preview/0029a.jpg" rel="enlargeimage::click" rev="loadarea" title="Click to Preview" class="style45">
			<img class="designiframeselectimage" onClick="document.getElementById('0029a').checked=true;" src="images/instant_sites/thumbnail/0029a.jpg" border="0"></a>
<input id="0029a" style="visibility:hidden" <% if (ResponseBean.getDynamicPagesTemplateReference(0).equalsIgnoreCase("0029a")){%> checked <%}%> type="radio" 
			name="<%= com.ideaorbit.servlets.DynamicPagesEditExecuteServlet.HTTP_REQUEST_FIELD_KEY_TEMPLATE_REFERENCE %>" value="0029a" />
 
 
Here is the preview div
 
 <div class="designiframepreview">
<div id="loadarea" align="left" class="designiframepreviewimage"><div align="center" class="blank_instructions">
Click a thumbnail<br>to preview site.<br><font size="+6">&larr;</font>
</div></div>
 
Here is the link, the parameter tempref is where I need to send along the value (in this case 0029a) depending on what image they selected above.
 
<a href="m1_dynamic_add.jsp?version=<%=versiontemp%>&tempref=">Next</a>

Open in new window

CEHJ

Why not just do something like the following then pass the value on submit?

onClick="document.getElementById('0029a').checked=true;globalVariable='0029'"

Open in new window

Shaye Larsen

ASKER

How would I reference that in the link?

<a href="m1_dynamic_add.jsp?version=<%=versiontemp%>&tempref=globalVariable">Next</a>

CEHJ

A better way would be to set a hidden field's value

onClick="document.getElementById('0029a').checked=true;document.forms[0].chosenImage='0029'"

Open in new window

Shaye Larsen

ASKER

Thank you. Still am not sure how to reference it in the link.
<a href="m1_dynamic_add.jsp?version=<%=versiontemp%>&tempref=???">Next</a>

CEHJ

You don't need to. The click would set the value of the hidden field

Shaye Larsen

ASKER

But this does not submit a form. It is just a link.

Are you suggesting I set up a form to have it submit so it sends along a hidden field value?

Something like
<input type="hidden" name="chosenImage">

If it just sets the variable, then I have tried grabbing it on the receiving page and can't get it.

Sorry, new concept for me, need some direct advice.

This is what I am trying to receive it with on the receiving page
<% String tempref = request.getParameter("chosenImage");
%>

CEHJ

>>But this does not submit a form. It is just a link.

Can you elaborate on that - what are you doing?

Shaye Larsen

ASKER

The link simply goes to the next page. I need that variable passed with the link. The form is in reference to something else that happens on the same page.

So I need, when they click the image, to set a variable without refreshing the page. The variable can be hardcoded in each case and then it needs to send that variable on to the next page through a text link.

<a href="m1_dynamic_add.jsp?version=<%=versiontemp%>&tempref=???">Next</a>

Thank you.

CEHJ

>>The variable can be hardcoded in each case

Yes. So in that case, since the target is a jsp, what's the problem with getting the parameter after having done something like the following?

<a href="m1_dynamic_add.jsp?imageId=xxx ..........

Shaye Larsen

ASKER

Because the link is one place and the images are in another.

See code

There are several images, but only one link. I can't forward to the next page from the links that are around the image as they generate the preview.
 
<a href="images/instant_sites/preview/0029a.jpg" rel="enlargeimage::click" rev="loadarea" title="Click to Preview" class="style45"><img class="designiframeselectimage" onClick="document.getElementById('0029a').checked=true;imageID='0029a'" src="images/instant_sites/thumbnail/0029a.jpg" border="0"></a>
 
<a href="images/instant_sites/preview/0029a.jpg" rel="enlargeimage::click" rev="loadarea" title="Click to Preview" class="style45"><img class="designiframeselectimage" onClick="document.getElementById('0029b').checked=true;imageID='0029b'" src="images/instant_sites/thumbnail/0029b.jpg" border="0"></a>
 
Then there is one link that, based on their choice above will forward to the next page.
 
<a href="m1_dynamic_add.jsp?version=<%=versiontemp%>&tempref=???">Next</a>
 
Thanks for your help.

Open in new window

ASKER CERTIFIED SOLUTION

CEHJ

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Shaye Larsen

ASKER

That did it. Thank you so much.

CEHJ

:-)