Make code DOM-compliant

[jrthor2]

How can I make this code DOM-compliant? I have a page that has a select box, that also displays a link to whatever the person chose in the select box. The link text also changes. I have this working with this code, but was informed it is not DOM-compliant (using innerHTML).


<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>


My Select Box:

<select name="committee" size="1" id="committee" onChange="Process(this[this.selectedIndex]);">
</select>

Text that changes on what you select from above box:
<div id="addedForm"></div>

[jrthor2]

Ok, i have it working like this, but it still uses the innerHTML:

<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].innerHTML='Click here for '+this.options[this.options.selectedIndex].value+' Committee information'
} } }">

When I change innerHTML to text (which I assume would be DOM<-compliant), it does not change the actual text for the link, as it does with innerHTML. anyone have any ideas?

[Fang]

var oHookup=document.getElementById("addedForm");
var oA=document.createElement("a");
oA.setAttribute("href", "/committees/?committee="+sel_link+"");
oHookup.appendChild(oA);
oA.appendChild(document.createTextNode("Click here for " + sel + " Committee information"));

[jrthor2]

our server doesn't use php, we use asp. Anyhelp there??

[Khalid Ali]

in DOM text is not just text,its actually
another node just like an anchor, so the proper code for this line

document.links[i].innerHTML='Click here for '+this.options[this.options.selectedIndex].value+' Committee information'

will be as below

document.links[i].appendChild(document.createTextNode('Click here for '+this.options[this.options.selectedIndex].value+' Committee information'));

[Fang]

It's not PHP, that is just the formatting.

[jrthor2]

Khalid Ali,

I tried your code, and each time I select an option, it is adding the link text to the previous link text, so I get "Click here for AMAZE Committee information.Click here for Activities Committeeinformation.", etc.

Here is my code:

<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].appendChild(document.createTextNode('Click here for '+this.options[this.options.selectedIndex].value+' Committee information'));
} } }">

[Khalid Ali]

if thats so,it simply means that your condition inside of the for loop is not working as intended..make sure you have a valid logical code there

[jrthor2]

I don't know javascript too well, can you tell me if it is logical or not? You can view the page if you need to at
http://www.zluth.org/committees/join_committee2.asp

thanks for your help

[Khalid Ali]

Oh ok I get it,I thought you said it was not working properly,it seems to me it works properly only its appending all the links in one straight line?????

if that is so then you will need to add another element
<br/> after every link is aded

[jrthor2]

But that will give me all the links you select, like this

Activities Committee
AMAZE Committee
Long Range Planning Committee
etc....

I don't want to list the link for each selection they may choose, I want to change the text each time they select a different committee.

[Khalid Ali]

Yea I see what you mean..below is proper working code


<td nowrap>
<select name="committee" size="1" id="committee" onChange="addLink(this.options[this.selectedIndex].value,this.selectedIndex);">
<option value="">Select Committee --></option>

<option value="A.M.A.Z.E.">A.M.A.Z.E.</option>

<option value="Activities">Activities</option>

<option value="Capital Campaign">Capital Campaign</option>

<option value="Christian Education">Christian Education</option>


<option value="Electronics">Electronics</option>

<option value="Evangelism">Evangelism</option>

<option value="Finance">Finance</option>

<option value="Library">Library</option>

<option value="Long Range Planning">Long Range Planning</option>

<option value="Mutual Ministry">Mutual Ministry</option>


<option value="Property">Property</option>

<option value="Social Ministry">Social Ministry</option>

<option value="Steering">Steering</option>

<option value="Stewardship">Stewardship</option>

<option value="Worship & Music">Worship & Music</option>

<option value="Zion Cares">Zion Cares</option>


</select><br>
<div id="addedForm"></div>
<script type="text/javascript">
function addLink(value,index){
var obj = document.getElementById("addedForm");
if(value!="-1"){
var nlink = obj.getElementsByTagName("a")[0];
var br = obj.getElementsByTagName("br")[0];
if(nlink!=null){
if(document.all){
nlink.removeNode(true);
br.removeNode(true);
}else{
obj.removeChild(nlink);
obj.removeChild(br);
}
}
nlink = document.createElement("A");
nlink.setAttribute("href",("/committees/?committee="+value));
nlink.appendChild(document.createTextNode("Click here for "+value+" Committee information."));
obj.appendChild(nlink);
obj.appendChild(document.createElement("br"));
}

}
</script>
</td>

[jrthor2]

Ok, that works, but there is still the issue of having the "&" sign in the committee title. If you use the same link, you'll see that when you select Worship & Music from the dropdown, and clidk on the link, it doesn't show this committees information, because of the "&" sign in the title. Is there a way to replace the & sign with %26??

Thanks a lot!!!

[Khalid Ali]

&amp;amp;
will work

[jrthor2]

Ok, but where do I put that in your script??? I am populating the dropdown from an Access database.

[Khalid Ali]

you will need to replace any & character when you are creating the drop down list box.

[jrthor2]

Actually, i used the replace command in javascript to do it, like this:

<script type="text/javascript">
function addLink(value,index){
var sel_value = value.replace(/&/g,"%26");
var obj = document.getElementById("addedForm");
if(value!="-1"){
var nlink = obj.getElementsByTagName("a")[0];
var br = obj.getElementsByTagName("br")[0];
if(nlink!=null){
if(document.all){
nlink.removeNode(true);
br.removeNode(true);
}else{
obj.removeChild(nlink);
obj.removeChild(br);
}
}
nlink = document.createElement("A");
nlink.setAttribute("href",("/committees/?committee="+sel_value));
nlink.appendChild(document.createTextNode("Click here for "+value+" Committee information."));
obj.appendChild(nlink);
obj.appendChild(document.createElement("br"));
}

}
</script>

[Khalid Ali]

And........????

[jrthor2]

And it works!!

Thanks

[Khalid Ali]

great...
glad to be of help

:D