change content of webpage depending on value of combo box

dazza12345 · Feb 9, 2006

Hi all, just a quick question.

Does any1 know how I could alter the content of my web page depending on the value entered into a combo box? I have been told that there is asimple javascript solution to this problem.

Here is my combo box, what i want to happen is alter the rest of the html form below this combo box straight away once the value has been clicked in the combo box.

<select class=g4 NAME="bonustype" style='width:180'>
<option VALUE="Any">
<option VALUE="signon">Sign-on bonus
<option VALUE="refer">Refer a friend bonus bonus
</select>

i have been told to try to use javascript 'this.value' and 'document.innerHTML'.

any clues on how this could be achieved?

MrGrey · Feb 9, 2006

On an abstract level this is the kind of thing you would do if you were to use innerHTML.

<script language="JavaScript" type="text/javascript">
function displayContent() {
form = document.bonusForm;
body = document.getElementById("bodyText");
if (form.bonustype[form.bonustype.selectedIndex].value=="Any") body.innerHTML = "Any Text";
if (form.bonustype[form.bonustype.selectedIndex].value=="signon") body.innerHTML = "Sign on Text";
if (form.bonustype[form.bonustype.selectedIndex].value=="refer") body.innerHTML = "Refer Text";
}
</script>

<form name="bonusForm">
<select name="bonustype" onchange="displayContent()">
<option value="Any">Any</option>
<option value="signon">Sign-on bonus</option>
<option value="refer">Refer a friend bonus bonus</option>
</select>
</form>

<div id="bodyText">
Any Text
</div>

theniteowl · Feb 9, 2006

innerHTML actually replaces the code in the specified object. You have to have all of the code you want to display set within the javascript to replace the old code.
Another alternative is to create all of the menu options in HTML and set their display attribute to none. Then your javascript just toggles the display attribute when a change is needed. It is a bit easier to work with as a complex menu is much more cumbersome to create through javascript than through HTML so it easier to code initially.
Example:

Code:

<html>
<head>
<title>Select a menu</title>
<script type="text/JavaScript">
<!-- 
var whichOpt='select';
function showOption(which) 
{
  //First hide the currently displaying menu.
  document.getElementById(whichOpt).style.display = "none";
  //Determine what the new selection is.
  whichOpt = document.getElementById(which).options[document.getElementById(which).selectedIndex].value;
  //Show the newly selection menu.
  document.getElementById(whichOpt).style.display = "inline";
}
-->
</script>

</head>

<body>
<form id="selMenu" method="post" action="">
  <select class="g4"  NAME="bonustype" id="bonustype" style="width:180" onchange="showOption(this.id)">
    <option VALUE="select">Select an option</option>
    <option VALUE="signon">Sign-on bonus</option>
    <option VALUE="refer">Refer a friend bonus</option>
  </select>
</form>
<br><br>
<div id="select"><table border="1"><tr><td>This is the default option</td></tr></table></div>
<div id="signon" style="display:none;"><table border="1"><tr><td>This is the signon bonus option</td></tr></table></div>
<div id="refer" style="display:none;"><table border="1"><tr><td>This is the refer a friend bonus option</td></tr></table></div>
</body>
</html>

I have used both methods at different times and both work well as long as Javascript is not disabled on the browser.

If there is a chance that clients might have javascript disabled then your best bet is to use server-side code to determine which menu option displays. Otherwise some clients might not be able to make selections from your page.

Stamp out, eliminate and abolish redundancy!

MrGrey · Feb 9, 2006

Yes agreed. If you just want to update some text then innerHTML is ok otherwise go with the above method.

dazza12345 · Feb 9, 2006

Cheers guys, i went for theniteowl's way as I wanted to alter more than just text and it works perfectly.

Just wondering, you mentioned 'server-side code to determine which menu option displays'. Could you please expand on this because this will be a very important option if clients computers do not support javascript

Cheers

theniteowl · Feb 9, 2006

For server side code you would do this.
The client would make their selection on one page and then submit. The form submits to a server-side script like PHP or ASP which retrieves the value of the selected field from the posted form and uses that to dictate which page it displays as the page executes.

Server-side code runs only at the server when you request it and delivers the HTML to the browser. It cannot react to anything on the page like Javascript (client-side code) can so it is a matter of passing the option TO the server-side code another way.

A popular approach is to have the page submit to itself and at the top of the page have server-side code to check and see if an option value was passed and if it was then display that option by default. This way a client sees only the single page but they still have to make a selection then click a button to get the change to occur whereas with Javascript you can trigger the change as soon as the option is altered.

Stamp out, eliminate and abolish redundancy!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

change content of webpage depending on value of combo box

dazza12345

Programmer

MrGrey

Programmer

theniteowl

Programmer

MrGrey

Programmer

dazza12345

Programmer

theniteowl

Programmer

Similar threads

Part and Inventory Search

Sponsor