onchange event with ASP and Javascript

[jrayjr]

Im work on a form that will dynamicly display objects. The form is completed and working but am adding some features that will appear based on the user selection. I am unable to get the onchange event to work. When I make the selection in the drop down nothing happens. Any help would be great thanks.

	
<script language="JavaScript">

function showHideContent( id, show )
{
var elem = document.getElementById( id );
if ( elem ) 
{
if ( show ) 
{
elem.style.display = 'block';
elem.style.visibility = 'visible';
} 
else
{
elem.style.display = 'none';
elem.style.visibility = 'hidden';
}
}
}

Once the user selects the choice I want it to check if it matchs. If it does then to make an object visible.

function ModSelection( selection )

{
if ( selection == "Split Case Pick" )
{
showHideContent( 'SCP1', true);
}
else
showHideContent( 'SCP1', false);
}
}


</script>

The selection the user will make there choice.

<div id="Form1">
<table width="80%" align="center">
<tr>
<td width="18%" align="center">
<font face="Arial" size="2">

<label>From Department: </label>

<% Response.Write( "<select name=""FDepartment1"" onchange=""ModSelection(this.options[this.selectedIndex].value)"" tabindex=""3"">" )

For a = 0 To UBound( mySQLDepList, 2 )
    For b = 0 To UBound( mySQLDepList, 1 )
        Response.Write("<option value='" & mySQLDepList(b, a) & "'>" & mySQLDepList(b, a) & "</option>" & vbCr)
        Next
Next
			
Response.Write("</select>" ) %>
</font>
</td>
</tr>
</table>
</div>

The choice that will become visible.

<div style="display:none" id="SCP1">
<td><select name="SCPSelection">
<option value="M Mod">M Mod</option>
<option value="L Mod">L Mod</option>
</select></td>
</div>

-John

[shweta123]

Hi,

Please check that ,if any of your functions are getting called on onchange event?

Im work on a form that will dynamicly display objects. The form is completed and working but am adding some features that will appear based on the user selection. I am unable to get the onchange event to work. When I make the selection in the drop down nothing happens. Any help would be great thanks.

	
<script language="JavaScript">

function showHideContent( id, show )
{
var elem = document.getElementById( id );
if ( elem ) 
{
if ( show ) 
{
elem.style.display = 'block';
elem.style.visibility = 'visible';
} 
else
{
elem.style.display = 'none';
elem.style.visibility = 'hidden';
}
}
}

Once the user selects the choice I want it to check if it matchs. If it does then to make an object visible.

function ModSelection( selection )

{
if ( selection == "Split Case Pick" )
{
showHideContent( 'SCP1', true);
}
else
showHideContent( 'SCP1', false);
}
}


</script>

The selection the user will make there choice.

<div id="Form1">
<table width="80%" align="center">
<tr>
<td width="18%" align="center">
<font face="Arial" size="2">

<label>From Department: </label>

<% Response.Write( "<select name=""FDepartment1"" onchange=""ModSelection(this.options[this.selectedIndex].value)"" tabindex=""3"">" )

For a = 0 To UBound( mySQLDepList, 2 )
    For b = 0 To UBound( mySQLDepList, 1 )
        Response.Write("<option value='" & mySQLDepList(b, a) & "'>" & mySQLDepList(b, a) & "</option>" & vbCr)
        Next
Next
			
Response.Write("</select>" ) %>
</font>
</td>
</tr>
</table>
</div>

The choice that will become visible.

<div style="display:none" id="SCP1">
<td><select name="SCPSelection">
<option value="M Mod">M Mod</option>
<option value="L Mod">L Mod</option>
</select></td>
</div>

-John

[jrayjr]

No theres not. The only onchange event I have is the one I am trying to add.

[jrayjr]

I was able to get it working but not the way I would like to. I made the change in the ModSelection function but I would like it to compare the text instead of the index number.

function ModSelection(  )
 
{
if ( document.MainForm.FDepartment1.selectedIndex == 19 )
{
showHideContent( 'SCP1', true);
}
else
{
showHideContent( 'SCP1', false);
}
}

</script>

Thanks,
-John

[shweta123]

Hi,

Please refer this link for how to call onChange event of dropdown box.

I was able to get it working but not the way I would like to. I made the change in the ModSelection function but I would like it to compare the text instead of the index number.

function ModSelection(  )
 
{
if ( document.MainForm.FDepartment1.selectedIndex == 19 )
{
showHideContent( 'SCP1', true);
}
else
{
showHideContent( 'SCP1', false);
}
}

</script>

Thanks,
-John

[jrayjr]

Thanks shweta123 for the help. I was able to figure it out. The link that you referenced was pretty much the same thing I already had except it was using a variable but it still call the index number of the drop down. I needed to compare the text in the drop down not the index value due to the index number would change frequently with the database constently being updated.

function ModSelection( )
{
     if ( document.MainForm.FDepartment1.options.value == "Split Case Pick" )
     {
          showHideContent( 'SCP1', true);
     }
     else
     {
          showHideContent( 'SCP1', false);
     }
}

Plus made one change in the SELECT on the form.

<% Response.Write( "<select name=""FDepartment1"" onchange=""ModSelection(this.options[this.selectedIndex].text)"" tabindex=""3"">" )

Thanks again,
John

[jrayjr]

I was also wondering if you could have more then one onchange event on the form? Say I have 2 Drop Downs and I would like to have both of them to have an onchange event to fire if a certain selection is made.



Thanks,
John

[shweta123]

Hi ,

Please refer the example below if you want to compare the text in the drop down instead of its index.

  
  <html>
 <head>
 <script type="text/javascript">
function favBrowser()
{
var mylist=document.getElementById("myList");
document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].text;
}
</script>
</head>

<body>
<form>
Select your favorite browser:
<select id="myList" onchange="favBrowser()">
  <option>Internet Explorer</option>
  <option>Netscape</option>
  <option>Opera</option>
</select>
<p>Your favorite browser is: <input type="text" id="favorite" size="20"></p>
</form>
</body>

For your second question , what do you mean by having more than one onChange event ? You can have more than one function which can be called for diffrent dropdown boxes.

I was also wondering if you could have more then one onchange event on the form? Say I have 2 Drop Downs and I would like to have both of them to have an onchange event to fire if a certain selection is made.



Thanks,
John

[jrayjr]

Thanks for the help shweta123 I was able to get it worked out. As far as my last question disregard it. It was dumb. Anyways thanks again.

-John