John Doe wrote:
I have a PHP page that generates a list box with several options in it.
I would like to have a "view" link next to the list box. When the user
changes the contents of the list box, I would like the view link to
update to point to the image representing that selection. So for
example, if the list box held names of images I would want the view link
to always point at the correct image.
You just need to change the href of the link behind the 'view'
button/link.
To further complicate this matter, the selections of the listbox are in
PHP variables.
Browsers do not understand PHP. You must write HTML so that the
JavaScript can use the values. You could put the link values
into the document in a meta tag, or as an array in a script
element, but I think using the value attribute of an option is
better.
I basically have little to no experience with javascript and could use
some guidance in figuring this out.
Here is a script that offers two solutions - the first I think
is better. If the user has JavaScript enabled, they click the
'View' button and are taken to the new location (image,
whatever). If not, the selected URL is passed to the server,
where you can return the new link and send them to the new link
anyway.
The second is more what you have asked for, but if JS is not
enabled, then the link should by default go somewhere that
explains why the link doesn't work.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Select</title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
function gotoLink(s){
var newLink = s[s.selectedIndex].value;
// If no selection made
if (newLink == '') {
alert("Please select a destination");
return false;
}
// If a selection has been made, go there
document.location = newLink;
}
function updateLink(s,p) {
var a;
if (document.getElementById){
a = document.getElementById(p);
} else if (document.all){
a = document.all[p];
}
// Update the link based on selection
a.href = s[s.selectedIndex].value;
a.innerHTML = s[s.selectedIndex].text;
}
</script>
</head>
<body>
<!-- uses a form. If JS enabled, takes user to link
when 'view' button clicked. If JS not enabled,
form submitted to server, can handle new link there.
-->
<form action="" onsubmit="
gotoLink(this.linkSelect);
return false; // If JS enabled, stops form submission;
">
<table>
<tr><td>
<select name="linkSelect">
<option value="" selected>Pick a destination</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
</select>
</td><td>
<input type="submit" value="View">
</td></tr>
</table>
</form>
<!-- Changes the href of 'view' link onchange. Does not use
a form
-->
<table><tr><td>
<select onchange="updateLink(this,'picLink');">
<option value="" selected>Pick a destination</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
</select>
</td><td>
<a id="picLink"
href="enableJS.html">Select a destination</a><br>
</td></tr>
</table>
</body>
</html>
--
Rob
