Forum Moderators: open
When the user selects Item2 in the drop down box, the text box needs to change to text that says "Item2". I need to use a JavaScript function upon change of the first drop down. This JavaScript function needs to change the code in the div tag to make it just text. and by using innerHTML.
When the user selects Item3 in the drop down box, the div tag contents need to change to show a checkbox.
When the user selects Item1 again, the div tag needs to go back to the text box.
Here is html I have, but can't get get innerhtml and div tags to change this how I need it to work.
<html>
<head>
<title>Web Page</title>
<link rel="stylesheet" type="text/css" href="test.css" />
<script language="javascript">
function changeHTML()
{
var optionValue = document.TestForm.MySelectBox.value;
if (optionValue == "Option1"[smilestopper])
{
ChangeStuff.innerHTML = "Start with Option 1";
}
else if (optionValue == "Option2"[smilestopper])
{
ChangeStuff.innerHTML = "<b>This is Option 2</b>";
}
else
{
ChangeStuff.innerHTML = "<i>This is option 3</i>";
}
}
</script>
</head>
<body>
<form name="TestForm">
<table border="0" cellspacing="1" cellpadding="1" wdith="100%">
tr>
<td> </td>
<td>Drop Down box:</td>
<td> </td>
<td>
<select name="MySelectBox" onchange="changeHTML()">
<option value="Option1">Option 1</option>
<option value="Option2">Option 2</option>
<option value="Option3">Option3</option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td>Good stuff:</td>
<td> </td>
<td>
<div id="ChangeStuff">
Start with option 1
<div>
</td>
</tr>
</table>
</form>
</body>
</html>
document.getElementById["ChangeStuff"].innerHTML = "stuff";
Also, where did come from? I think you need to lose that part too.
Birdman
Thanks for the response. I am not sure what you meant by: Also, where did come from? I think you need to lose that part too.
I can change my code to be what you suggested, but not sure that will do what I need.
change text box to text only and then to check box using function, innerhtml and div tags. How do I get it to do that?
Frogger
As for your problem, I prefer not to use innerHTML to do what you want. I like to use the style object to show/hide the proper content.
Example:
/////this part goes in the <head></head>//////
<style type="text/css">
#Option1,#Option2,#Option3{display: none;}
</style>
<script type="text/javascript">
function showHide(element){
arr = new Array("Option1","Option2","Option3");
for(i=0; i<arr.length; i++){
if(arr[i] == element){
document.getElementsById[arr[i]].style.display = "block";
} else {
document.getElementsById[arr[i]].style.display = "none";
}
}
return false;
}
</script>
/////then in the body///////
<select name="MySelectBox" onchange="showHide(this.value)">
<option value="Option">Option 1</option>
<option value="Option">Option 2</option>
<option value="Option">Option3</option>
</select>
<div id="Option1">textbox code here</div>
<div id="Option2">straight text here</div>
<div id="Option3">checkbox code here</div>
I may be stuck with innerhtml and I don't know why. That tag was deprecated, correct? I may have no choice.
Debbie
By the way, I would second Birdman's endorsement of the use of visibility:hidden; and visibility:visible;
