Forum Moderators: open
When the user selects Item2 in the drop down box, the text box needs to change to text ONLY 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.
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 with dropdown box and where it just states text. I haven't gotten anything to work where it changes the type of output within the div tag to post.
<html>
<head>
<title>Workshop 2 Form</title>
<link rel="stylesheet" type="text/css" href="test.css" />
<script language="javascript">
function changeHTML()
{
var optionValue = document.TestForm.MySelectBox.value;
if (optionValue == "Option1")
{
ChangeStuff.innerHTML = "Start with Option 1";
}
else if (optionValue == "Option2")
{
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>
How about this? The function changeHTML uses the display style property to show/hide spans containing the form objects and text based on option selected in the select object.
<script type="text/javascript">
<!--
function changeHTML()
{
//set up object references
var oSelect = document.getElementById('MySelectBox')
var oInput = document.getElementById('MyTextBoxSpan')
var oCheck = document.getElementById('MyCheckSpan')
var oText = document.getElementById('MyTextSpan')
var cSelectVal=oSelect.options[oSelect.selectedIndex].value
//switch statement shows/hides various divs
switch (cSelectVal){
case 'Option1':
oInput.style.display='inline'
oCheck.style.display='none'
oText.style.display='none'
break;
case 'Option2':
oInput.style.display='none'
oCheck.style.display='none'
oText.style.display='inline'
break;
case 'Option3':
oInput.style.display='none'
oCheck.style.display='inline'
oText.style.display='none'
break;
}
}
//-->
</script>
<style type="text/css">
</style>
</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">Option 3</option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td>Good stuff:</td>
<td> </td>
<td>
<div id="ChangeStuff">
<span id="MyTextBoxSpan" style="display:inline;" ><input id="myTextBox" name="myTextBox" value="" /></span><span id="MyCheckSpan" style="display:none;">Check Box Title<input type="checkbox" name="myCheckBox" value="myvaluehere" /></span><span id="MyTextSpan" style="display:none;">Item2</span>
<div>
</td>
</tr>
</table>
</form>
</body>
Hope this helps,
ajkimoto
