By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,165 Members | 853 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,165 IT Pros & Developers. It's quick & easy.

onchange event with ASP and Javascript

P: 15
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.

Expand|Select|Wrap|Line Numbers
  1.  
  2. <script language="JavaScript">
  3.  
  4. function showHideContent( id, show )
  5. {
  6. var elem = document.getElementById( id );
  7. if ( elem ) 
  8. {
  9. if ( show ) 
  10. {
  11. elem.style.display = 'block';
  12. elem.style.visibility = 'visible';
  13. else
  14. {
  15. elem.style.display = 'none';
  16. elem.style.visibility = 'hidden';
  17. }
  18. }
  19.  
Once the user selects the choice I want it to check if it matchs. If it does then to make an object visible.

Expand|Select|Wrap|Line Numbers
  1.  
  2. function ModSelection( selection )
  3.  
  4. {
  5. if ( selection == "Split Case Pick" )
  6. {
  7. showHideContent( 'SCP1', true);
  8. }
  9. else
  10. showHideContent( 'SCP1', false);
  11. }
  12. }
  13.  
  14.  
  15. </script>
  16.  
  17.  
The selection the user will make there choice.

Expand|Select|Wrap|Line Numbers
  1.  
  2. <div id="Form1">
  3. <table width="80%" align="center">
  4. <tr>
  5. <td width="18%" align="center">
  6. <font face="Arial" size="2">
  7.  
  8. <label>From Department: </label>
  9.  
  10. <% Response.Write( "<select name=""FDepartment1"" onchange=""ModSelection(this.options[this.selectedIndex].value)"" tabindex=""3"">" )
  11.  
  12. For a = 0 To UBound( mySQLDepList, 2 )
  13.     For b = 0 To UBound( mySQLDepList, 1 )
  14.         Response.Write("<option value='" & mySQLDepList(b, a) & "'>" & mySQLDepList(b, a) & "</option>" & vbCr)
  15.         Next
  16. Next
  17.  
  18. Response.Write("</select>" ) %>
  19. </font>
  20. </td>
  21. </tr>
  22. </table>
  23. </div>
  24.  
  25.  
The choice that will become visible.

Expand|Select|Wrap|Line Numbers
  1. <div style="display:none" id="SCP1">
  2. <td><select name="SCPSelection">
  3. <option value="M Mod">M Mod</option>
  4. <option value="L Mod">L Mod</option>
  5. </select></td>
  6. </div>
  7.  

-John
Jan 12 '08 #1
Share this Question
Share on Google+
8 Replies


shweta123
Expert 100+
P: 692
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.

Expand|Select|Wrap|Line Numbers
  1.  
  2. <script language="JavaScript">
  3.  
  4. function showHideContent( id, show )
  5. {
  6. var elem = document.getElementById( id );
  7. if ( elem ) 
  8. {
  9. if ( show ) 
  10. {
  11. elem.style.display = 'block';
  12. elem.style.visibility = 'visible';
  13. else
  14. {
  15. elem.style.display = 'none';
  16. elem.style.visibility = 'hidden';
  17. }
  18. }
  19.  
Once the user selects the choice I want it to check if it matchs. If it does then to make an object visible.

Expand|Select|Wrap|Line Numbers
  1.  
  2. function ModSelection( selection )
  3.  
  4. {
  5. if ( selection == "Split Case Pick" )
  6. {
  7. showHideContent( 'SCP1', true);
  8. }
  9. else
  10. showHideContent( 'SCP1', false);
  11. }
  12. }
  13.  
  14.  
  15. </script>
  16.  
  17.  
The selection the user will make there choice.

Expand|Select|Wrap|Line Numbers
  1.  
  2. <div id="Form1">
  3. <table width="80%" align="center">
  4. <tr>
  5. <td width="18%" align="center">
  6. <font face="Arial" size="2">
  7.  
  8. <label>From Department: </label>
  9.  
  10. <% Response.Write( "<select name=""FDepartment1"" onchange=""ModSelection(this.options[this.selectedIndex].value)"" tabindex=""3"">" )
  11.  
  12. For a = 0 To UBound( mySQLDepList, 2 )
  13.     For b = 0 To UBound( mySQLDepList, 1 )
  14.         Response.Write("<option value='" & mySQLDepList(b, a) & "'>" & mySQLDepList(b, a) & "</option>" & vbCr)
  15.         Next
  16. Next
  17.  
  18. Response.Write("</select>" ) %>
  19. </font>
  20. </td>
  21. </tr>
  22. </table>
  23. </div>
  24.  
  25.  
The choice that will become visible.

Expand|Select|Wrap|Line Numbers
  1. <div style="display:none" id="SCP1">
  2. <td><select name="SCPSelection">
  3. <option value="M Mod">M Mod</option>
  4. <option value="L Mod">L Mod</option>
  5. </select></td>
  6. </div>
  7.  

-John
Jan 13 '08 #2

P: 15
No theres not. The only onchange event I have is the one I am trying to add.
Jan 13 '08 #3

P: 15
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.

Expand|Select|Wrap|Line Numbers
  1. function ModSelection(  )
  2.  
  3. {
  4. if ( document.MainForm.FDepartment1.selectedIndex == 19 )
  5. {
  6. showHideContent( 'SCP1', true);
  7. }
  8. else
  9. {
  10. showHideContent( 'SCP1', false);
  11. }
  12. }
  13.  
  14. </script>
  15.  
Thanks,
-John
Jan 14 '08 #4

shweta123
Expert 100+
P: 692
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.

Expand|Select|Wrap|Line Numbers
  1. function ModSelection(  )
  2.  
  3. {
  4. if ( document.MainForm.FDepartment1.selectedIndex == 19 )
  5. {
  6. showHideContent( 'SCP1', true);
  7. }
  8. else
  9. {
  10. showHideContent( 'SCP1', false);
  11. }
  12. }
  13.  
  14. </script>
  15.  
Thanks,
-John
Jan 14 '08 #5

P: 15
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.

Expand|Select|Wrap|Line Numbers
  1. function ModSelection( )
  2. {
  3.      if ( document.MainForm.FDepartment1.options.value == "Split Case Pick" )
  4.      {
  5.           showHideContent( 'SCP1', true);
  6.      }
  7.      else
  8.      {
  9.           showHideContent( 'SCP1', false);
  10.      }
  11. }
  12.  
Plus made one change in the SELECT on the form.

Expand|Select|Wrap|Line Numbers
  1. <% Response.Write( "<select name=""FDepartment1"" onchange=""ModSelection(this.options[this.selectedIndex].text)"" tabindex=""3"">" )
  2.  

Thanks again,
John
Jan 14 '08 #6

P: 15
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
Jan 14 '08 #7

shweta123
Expert 100+
P: 692
Hi ,

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

Expand|Select|Wrap|Line Numbers
  1.  
  2.   <html>
  3.  <head>
  4.  <script type="text/javascript">
  5. function favBrowser()
  6. {
  7. var mylist=document.getElementById("myList");
  8. document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].text;
  9. }
  10. </script>
  11. </head>
  12.  
  13. <body>
  14. <form>
  15. Select your favorite browser:
  16. <select id="myList" onchange="favBrowser()">
  17.   <option>Internet Explorer</option>
  18.   <option>Netscape</option>
  19.   <option>Opera</option>
  20. </select>
  21. <p>Your favorite browser is: <input type="text" id="favorite" size="20"></p>
  22. </form>
  23. </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
Jan 15 '08 #8

P: 15
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
Jan 16 '08 #9

Post your reply

Sign in to post your reply or Sign up for a free account.