change link from dropdown box

[jrthor2]

I have a form with a dropdown box that lists all of our committees from an Access database. I would like to be able to put a link beside the dropdown box (without reloading the page) that says "Click here for more information" and it links to the page for what they selected in the dropdown box (www.zluth.org/committees/index.asp?committee=UserSelection).

I do not know javascript too well, can someone please help me here? The asp code for my dropdown box is below:


<select name="committee" size="1" id="committee">
<%
db = "/db/ziondb.mdb"
%>
<!--#include virtual="/inc/dbconn.asp"-->
<%

SQLstmt = "SELECT * from Committees order by Committee asc"

Set rs = conn.execute(SQLstmt)

Do while NOT rs.EOF
id = rs("ID")
committee = rs("COMMITTEE")
%>
<option value="<%= committee%>"><%= committee%></option>
<%
rs.MoveNext
Loop
rs.Close
Set conn = nothing
Set rs = Nothing
Set SQLstmt = nothing
%>
</select>


Thanks!!

[jrthor2]

Ok, I almost got it figured out. I got my link to update, but if the committee name has a space in it, it is only giving me the first work in the committe name that I selected. How do I get the entire name, with spaces? Here is the Javascript code I came up with:

<script type="text/javascript">
<!--
var str = "";
function Process(committee){
sel=committee.value;
str="<a href=/committees/?committee=" + sel + ">Click here for more information</a>";

document.getElementById("addedForm").innerHTML=str;
}
//-->
</script>

[Jona]

If each option have its own page on the server, and each page is named after the value of each option (with the extension of .html, of course), you could use something like this:


<select size="1" name="cSel" onChange="if(this.options[this.options.selectedIndex] != ''){document.links['link_id'].href='comittee/?'+this.options[this.options.selectedIndex].value;">
<option value="">--Select One--</option>
<option value="ComitteeName1">Comittee Name 1</option>
<option value="ComitteeName2">Comittee Name 2</option>
</select>


[J]ona

[jrthor2]

No, each option does not have it's own page. The link is going to the committees/index.asp page and I am setting the variable committee by what the value is in my select list. The link looks like this (for the Activities committee):

http://www.zluth.org/committees/index.asp?committee=Activities

[Jona]

I've edited my post...

[J]ona

[jrthor2]

but that is not going to give me a text link below the box to link to this page, is it? I don't want the form to link to the page, I have the form submitting this info to a database.

[Jona]

Set the ID of your link to whatever you want and change link_id to the ID you chose. It will set the HREF attribute of the link to comittee/?comittee=[whatever was selected] and will go to that page when clicked.

[J]ona

[jrthor2]

Ok, maybe I am missing something, here is what I have for my select box


<select name="committee" size="1" id="committee" onChange="if(this.options[this.options.selectedIndex] != ''){document.links['addedForm'].href='comittee/?'+this.options[this.options.selectedIndex].value;">


and here is my link:

<a href="" id="addedForm">Click Here for more information</a>


This is not updating the link.

[Jona]

Try replacing document.links['addedForm'] with document.getElementById('addedForm')

[J]ona

[jrthor2]

Nope, still is not updating the link. Here is my entire code:


<select name="committee" size="1" id="committee" onChange="if(this.options[this.options.selectedIndex] != ''){document.getElementById['addedForm'].href='committee/?'+this.options[this.options.selectedIndex].value;">
<option value="">Select Committee --></option>
<%
db = "/db/ziondb.mdb"
%>
<!--#include virtual="/inc/dbconn.asp"-->
<%

SQLstmt = "SELECT * from Committees order by Committee asc"

Set rs = conn.execute(SQLstmt)

Do while NOT rs.EOF
id = rs("ID")
committee = rs("COMMITTEE")
%>
<option value="<%= committee%>"><%= committee%></option>
<%
rs.MoveNext
Loop
rs.Close
Set conn = nothing
Set rs = Nothing
Set SQLstmt = nothing
%>
</select>
<a href="/" id="addedForm">Click Here for more information</a>

[Jona]

Hmm, then I'd try this...


<select size="1" name="cSel" onChange="if(this.options[this.options.selectedIndex] != ''){
for(i=0; i<document.links.length; i++){
if(document.links[i].id=='addedForm'){document.links[i].href='comittee/?'+this.options[this.options.selectedIndex].value;} } }">
<option value="">--Select One--</option>
<option value="ComitteeName1">Comittee Name 1</option>
<option value="ComitteeName2">Comittee Name 2</option>
</select>


[J]ona

[jrthor2]

Nope, not updateing the link???

[Jona]

Originally posted by jrthor2
Nope, not updateing the link???

I've updated my post. The reason it didn't work was because I forgot a very important ending brace (}) at the end. There should be three, not two.

[J]ona

[jrthor2]

Thanks, it is updating the link now.

1 more question, is it possible for the link text to change to something like "Click for Committee information", where Committee is what they selected from the dropdown box? Also, is it possible for the link to not show up until they select something from the dropdown box?

thanks for all your help!!

[jrthor2]

Well, I actually got this to work using my original javascript code. Here is how I did ti:

<script type="text/javascript">
<!--
var str = "";
function Process(committee){
sel=committee.value;
sel_link=committee.value
sel_link = sel_link.replace(/[\s]/g, "%20");
sel_link = sel_link.replace(/&/g, "%26");
str="<a href=/committees/?committee=" + sel_link + ">Click here for " + sel + " Committee information</a>";


document.getElementById("addedForm").innerHTML=str;
}
//-->
</script>

Thanks for all the help though.

[Jona]

The innerHTML property is not valid, but I suppose you do not care...

[J]ona

[jrthor2]

What's not valid about it?? Is there a different way??

[Jona]

Originally posted by jrthor2
What's not valid about it?? Is there a different way??

Yes, there is. The W3C recommends use of the DOM elements, and the below code should work. If it doesn't, perhaps it is because the A element is not a block-level element...


<select size="1" name="cSel" onChange="if(this.options[this.options.selectedIndex] != ''){
for(i=0; i<document.links.length; i++){
if(document.links[i].id=='addedForm'){document.links[i].href='comittee/?'+this.options[this.options.selectedIndex].value;
document.links[i].nodeValue='Click here for '+this.options[this.options.selectedIndex].value+' Comittee information'
} } }">
<option value="">--Select One--</option>
<option value="ComitteeName1">Comittee Name 1</option>
<option value="ComitteeName2">Comittee Name 2</option>
</select><br><br>
<p><a href="#" id="addedForm">Click here for Comittee information</a></p>


[J]ona

[jrthor2]

Well, I tried using your code, as below, but it is not updating the link text with the committee name, and I need to somehow replace the "&" character in committees that use this in their name??

<select name="committee" size="1" id="committee" onChange="if(this.options[this.options.selectedIndex] != ''){
for(i=0; i<document.links.length; i++){
if(document.links[i].id=='addedForm'){document.links[i].href='/committees/?committee='+this.options[this.options.selectedIndex].value;
document.links[i].nodeValue='Click here for '+this.options[this.options.selectedIndex].value+' Committee information'
} } }">
<a href="" id="addedForm">Click here for Committee information</a>

Also, I don't want the Click here for Committee information to show up if they have not selected a committee yet.

[Jona]

Unfortunately, I cannot recall the property that sets the value to the A element... There is an equivalent to innerHTML (nodeValue) that should be used instead, but on some elements they do not work, for specific reasons.

I am currently restrained on time and money, and having computer problems. Good luck with it all, you can use your own script if you like, or post a new message asking how to make your code DOM-compliant...

[J]ona