...

View Full Version : dynamically change text based on dropdown selection



chelvis
01-05-2004, 05:21 PM
I have a drop down menu with some values.

<select name="searchin">
<option value="1">Keyword</option>
<option value="2">Author</option>
<option value="3">ISBN</option>
<option value="4">Publisher</option>
<option value="5">Title</option>
</select>

Base on the users selection, I want to display some text next to the dropdown. For example if a user selects Author, then I want to display text like "author names will only return this kind of books". Then if a user selects publisher I will have a different message. By default, it displays keyword and there will be a message next regarding keyword.

How can I do this? Is it possible to do this with document.write? rather than layers?

Vladdy
01-05-2004, 05:43 PM
Why would you want to do it with document.write???

Try this:

<select name="searchin" onchange="document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].extrainfo">
<option value="1" extrainfo="Search by keyword">Keyword</option>
<option value="2" extrainfo="Search by author">Author</option>
<option value="3" extrainfo="Search by ISBN">ISBN</option>
<option value="4" extrainfo="Search by publisher">Publisher</option>
<option value="5" extrainfo="Search by title">Title</option>
</select>

<div id="ExtraInfo">Select search option</div>

requestcode
01-05-2004, 05:45 PM
Another example:
<html>
<head>
<title>Set Message</title>
<script language="JavaScript">
myarr=new Array()
myarr[1]="Keyword message"
myarr[2]="Author message"
myarr[3]="ISBN message"
myarr[4]="Publisher message"
myarr[5]="Title message"
function doIt(objval)
{
document.getElementById("msg").innerHTML=myarr[objval]
}
</script>
</head
<body>
<form name="myform">
<select name="searchin" onChange="doIt(this.options[this.selectedIndex].value)">
<option value="1">Keyword</option>
<option value="2">Author</option>
<option value="3">ISBN</option>
<option value="4">Publisher</option>
<option value="5">Title</option>
</select>
<span id="msg">Keyword</span>
</form>
</body>
</html>

Vladdy
01-05-2004, 06:05 PM
language="Javascript" has been depreciated in the last century and there is no such thing as element.innerHTML in the DOM spec. :rolleyes:

chelvis
01-05-2004, 06:24 PM
I tried vladdy's code and it works fine in IE. But not in NN 6.2.

But requestcode's is working fine in IE and NN. Is the .innerHTML is invalid?

requestcode
01-05-2004, 06:50 PM
No it is not invalid, but if you want to code to DOM specs then you can change the function to this:
function doIt(objval)
{
document.getElementById('msg').firstChild.nodeValue=myarr[objval]
}

Also as noted by Vladdy you should change the javascript tag to this:
<script type="text/javascript">

I believe that is correct. I am sure Vladdy will correct me if I am wrong.

Vladdy
01-05-2004, 07:18 PM
Originally posted by chelvis
I tried vladdy's code and it works fine in IE. But not in NN 6.2.

But requestcode's is working fine in IE and NN. Is the .innerHTML is invalid?

My bad, did not really try it before posting. Change the onchange event as follows:
<select name="searchin" onchange="document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].getAttribute('extrainfo')">



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum