Drop-Down Area

[petra036]

I had a code for this along time ago, but seraching through, I have noticed I deleted it. I need it again for my website's Contact page. I need a code where there is a drop down menu, and if you select, something like "Report a bug" then a area will show up below it with text inside. Then you select "Cancel Account" and a new different area shows up. Anyone have any ideas? I have a picture attached of what I mean.

[Costin Trifan]

You can use XMLHttpRequest to do it.

**friendly thought
But what I don't like about the ^^ is that you have to wait untill all the content loads (I presume you know what XMLHttpRequest is).
So, if you have a lot of options in the DropDownList then you should reconsider using this technique.
At least I would.

hth.

[StupidScript]

Also consider using the innerHTML attribute:

<script type='text/javascript'>
var reportbug="Reporting a bug ... fill out this form: [bug form]";
var cancelacct="Cancelling account ... fill out this form: [cancel form]";
var pickit=new Array('',reportbug,cancelacct);
var doing=new Array(0,'reportbug','cancelacct');
function setArea(choice) {
 area=document.getElementById('mainArea');
 doit=document.getElementById('do');
 if (choice!=0) {
  doit.value=doing[choice];
  area.innerHTML=pickit[choice];
  area.style.display='block';
 }
 else {
  doit.value='';
  area.style.display='none';
 }
}
</script>
<form>
<input type='hidden' id='do' name='do' value='' />
<select id='choices' name='choices'
  onchange='setArea(this.options[this.selectedIndex].value)'>
<option value=0 />Select...
<option value=1 />Report a Bug
<option value=2 />Cancel Account
</select><br />
<div id='mainArea' style='width:400;height:300;display:none'></div>
</form>

[petra036]

Originally Posted by StupidScript

Also consider using the innerHTML attribute:

<script type='text/javascript'>
var reportbug="Reporting a bug ... fill out this form: [bug form]";
var cancelacct="Cancelling account ... fill out this form: [cancel form]";
var pickit=new Array('',reportbug,cancelacct);
var doing=new Array(0,'reportbug','cancelacct');
function setArea(choice) {
 area=document.getElementById('mainArea');
 doit=document.getElementById('do');
 if (choice!=0) {
  doit.value=doing[choice];
  area.innerHTML=pickit[choice];
  area.style.display='block';
 }
 else {
  doit.value='';
  area.style.display='none';
 }
}
</script>
<form>
<input type='hidden' id='do' name='do' value='' />
<select id='choices' name='choices'
  onchange='setArea(this.options[this.selectedIndex].value)'>
<option value=0 />Select...
<option value=1 />Report a Bug
<option value=2 />Cancel Account
</select><br />
<div id='mainArea' style='width:400;height:300;display:none'></div>
</form>

Thankyou for this wonderful code. It works fine and I am sure it will be a hit on my Contact Page. Thankyou so much!

[StupidScript]

Welcome to the forums, petra036!

(I forgot the measurement value for the DIV stylesheet)

width:400px;height:300px;

[Costin Trifan]

Well done, James!

[petra036]

Originally Posted by StupidScript

Welcome to the forums, petra036

Why thankyou! it's always an honour to be part of the Internet's Scripting Team. It's really easy once you know how to script things!