473,372 Members | 989 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,372 software developers and data experts.

onChange of listbox to update link?

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.

To further complicate this matter, the selections of the listbox are in
PHP variables.

I basically have little to no experience with javascript and could use
some guidance in figuring this out.

Thanks.

Jason
jl*****@NoSpamAustin.rr.com
Jul 23 '05 #1
1 9647
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
Jul 23 '05 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Lee Mundie | last post by:
Hi there, Simple problem here but can't seem to fix it! Okay, I have a select list from which people choose avatars... the list is option values ie. <option>Worm</option> ...
3
by: NewmanBT | last post by:
As you can see from the code below, several textboxes will be dynamically created and each will be tied to an org. The ChangeComment function should allow for an update to the database whenever...
2
by: Alpha | last post by:
How do I change the selected item in a listbox according to a Combox's selected item on the same form? The Combox is from a different table in the same dataset as the Listbox uses. Combox's...
3
by: James Radke | last post by:
Hello, I was curious, is it possible to create drag and drop interface from listbox to listbox on a webform application (i.e. vb.net)? Basically the application would need to load multiple...
6
by: Mark | last post by:
Hello. I have a listbox whose rowsource is set to a saved query (call it "qry_customer_list.") When I add customers to my database, I call the listbox Requery method so that the listbox will...
3
by: Kevin Walzer | last post by:
I'm trying to set the active item in a Tkinter listbox to my application's currently-defined default font. Here's how I get the fonts loaded into the listbox: ...
1
by: sklett | last post by:
I've setup the simplest of tests; A form with a ListBox and a Button. The ListBox is bound to a List<string>. When you click the Button, a new string is added to the list. I can't for the life...
3
by: deejayquai | last post by:
Hello Simple one this I guess, but I'm quite stuck at the moment. I would like to update the records displayed in my listbox (lstStudents) using criteria selected from my combo (cboForm) in a...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.