sign in | join about | help | sitemap
Connecting Tech Pros Worldwide
Membership is free - Join the Bytes Network
Bytes > Answers > Javascript / DHTML / Ajax
viki1967's Avatar

Disable/enable icon.gif


Question posted by: viki1967 (Familiar Sight) on August 28th, 2008 09:13 AM
Disable/enable icon.gif

Hi all.

I have this form in the page.htm:

Expand|Select|Wrap|Line Numbers
  1. <form action="form.asp" method="post" onsubmit="return(validateForm(this));">
  2.  
  3. <select size="1" name="t_im" onchange="Form()">
  4. <option value="">Select value</option>
  5. <option value="A">A</option>
  6. <option value="C">C</option>
  7. <option value="Ca">Ca</option>
  8. <option value="Cav">Cav</option>
  9. </select>
  10.  
  11. <input type="text" name="e_gu" size="10" readonly>           
  12. <a href="javascript:Form()">
  13. <img src="icon_1.gif" border="0"></a>
  14.  
  15. <select size="1" name="c_fu">
  16. <option value="">Select value</option>
  17. <option value="YES">YES</option>
  18. <option value="NO">NO</option>
  19. </select>
  20.  
  21. <input type="text" name="c_ma" size="10" readonly>           
  22. <a href="javascript:Form()">
  23. <img src="icon_2.gif" border="0"></a>
  24.  
  25. </form>


I need:

1) If select name="t_im" value is NULL ( "" ) disable icon_1.gif
2) If select name="t_im" value NOT is NULL ( "" ) enable icon_1.gif

3) If select name="c_fu" value is NULL ( "" ) OR value is "YES" disable icon_2.gif
4) If select name="c_fu" value is "NO" enable icon_2.gif

Can you help me ?
kind regards
viki
10 Answers Posted
RamananKalirajan's Avatar
RamananKalirajan August 28th, 2008 09:23 AM
Familiar Sight - 236 Posts
#2: Re: Disable/enable icon.gif

Wether u need it as disabled or hidden.

Regards
Ramanan Kalirajan
viki1967's Avatar
viki1967 August 28th, 2008 09:26 AM
Familiar Sight - 212 Posts
#3: Re: Disable/enable icon.gif

Quote:
Originally Posted by RamananKalirajan
Wether u need it as disabled or hidden.

Regards
Ramanan Kalirajan


I need disabled.
thanks x your reply
viki
RamananKalirajan's Avatar
RamananKalirajan August 28th, 2008 09:39 AM
Familiar Sight - 236 Posts
#4: Re: Disable/enable icon.gif

Quote:
Originally Posted by viki1967
I need disabled.
thanks x your reply
viki


just check, the selected value in the function. Give id to each and every object u use. Here is an example code

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function doThis()
  5. {
  6.   //alert("hai");
  7.     var x = document.getElementById('mySelect').selectedIndex;  
  8.     alert(document.getElementById('mySelect').options[x].value); 
  9.     if(document.getElementById('mySelect').options[x].value<1)
  10.        document.getElementById('myImg').disabled=true;
  11. }
  12. </script>
  13. </head>
  14. <select id="mySelect" size="10" onclick="doThis()">
  15. <option value="0">Select a Value</option>
  16. <option value="1">Select 1 Value</option>
  17. <option value="2">Select 2 Value</option>
  18. <option value="3">Select 3 Value</option>
  19. </select>
  20. <br/><br/><br/>
  21. <img src="demo.jpg" id="myImg">
  22. </html>
  23.  


By using this code I cant see the image disabling, same replaced by a text box is working. I hope disable property is not supported for Img. Instead of disabling u can use hidden property (my suggestion).

Regards
Ramanan Kalirajan
viki1967's Avatar
viki1967 August 28th, 2008 09:52 AM
Familiar Sight - 212 Posts
#5: Re: Disable/enable icon.gif

Sorry buy your example not working in my case:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  5.  
  6. <script type="text/javascript">
  7. function doThis()
  8. {
  9.  
  10.     var x = document.getElementById('mySelect').selectedIndex;    
  11.     alert(document.getElementById('mySelect').options[x].value); 
  12.  
  13.     if(document.getElementById('mySelect').options[x].value < 1)
  14.        document.getElementById('myImg').disabled=true;
  15. }
  16. </script>
  17.  
  18.  
  19. </head>
  20.  
  21. <body>
  22.  
  23. <form action="form.asp" method="post" onsubmit="return(validateForm(this));">
  24.  
  25. <select id="mySelect" size="1" name="t_im" onchange="Form()" onclick="doThis()">
  26. <option value="">Select value</option>
  27. <option value="A">A</option>
  28. <option value="C">C</option>
  29. <option value="Ca">Ca</option>
  30. <option value="Cav">Cav</option>
  31. </select>
  32.  
  33. <input type="text" name="e_gu" size="10" readonly>           
  34. <a href="javascript:Form()">
  35. <img id="myImg" src="icon_1.gif" border="0"></a>
  36.  
  37. <select size="1" name="c_fu">
  38. <option value="">Select value</option>
  39. <option value="YES">YES</option>
  40. <option value="NO">NO</option>
  41. </select>
  42.  
  43. <input type="text" name="c_ma" size="10" readonly>           
  44. <a href="javascript:Form()">
  45. <img src="icon_2.gif" border="0"></a>
  46.  
  47. </form>
  48.  
  49. </body>
  50.  
  51. </html>
viki1967's Avatar
viki1967 August 28th, 2008 09:57 AM
Familiar Sight - 212 Posts
#6: Re: Disable/enable icon.gif

Sorry buy your example not working in my case:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  5.  
  6. <script type="text/javascript">
  7. function doThis()
  8. {
  9.  
  10.     var x = document.getElementById('mySelect').selectedIndex;    
  11.     alert(document.getElementById('mySelect').options[x].value); 
  12.  
  13.     if(document.getElementById('mySelect').options[x].value < 1)
  14.        document.getElementById('myImg').disabled=true;
  15. }
  16. </script>
  17.  
  18.  
  19. </head>
  20.  
  21. <body>
  22.  
  23. <form action="form.asp" method="post" onsubmit="return(validateForm(this));">
  24.  
  25. <select id="mySelect" size="1" name="t_im" onchange="Form()" onclick="doThis()">
  26. <option value="">Select value</option>
  27. <option value="A">A</option>
  28. <option value="C">C</option>
  29. <option value="Ca">Ca</option>
  30. <option value="Cav">Cav</option>
  31. </select>
  32.  
  33. <input type="text" name="e_gu" size="10" readonly>           
  34. <a href="javascript:Form()">
  35. <img id="myImg" src="icon_1.gif" border="0"></a>
  36.  
  37. <select size="1" name="c_fu">
  38. <option value="">Select value</option>
  39. <option value="YES">YES</option>
  40. <option value="NO">NO</option>
  41. </select>
  42.  
  43. <input type="text" name="c_ma" size="10" readonly>           
  44. <a href="javascript:Form()">
  45. <img src="icon_2.gif" border="0"></a>
  46.  
  47. </form>
  48.  
  49. </body>
  50.  
  51. </html>
RamananKalirajan's Avatar
RamananKalirajan August 28th, 2008 11:34 AM
Familiar Sight - 236 Posts
#7: Re: Disable/enable icon.gif

Quote:
Originally Posted by viki1967
Sorry buy your example not working in my case:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  5.  
  6. <script type="text/javascript">
  7. function doThis()
  8. {
  9.  
  10.     var x = document.getElementById('mySelect').selectedIndex;    
  11.     alert(document.getElementById('mySelect').options[x].value); 
  12.  
  13.     if(document.getElementById('mySelect').options[x].value < 1)
  14.        document.getElementById('myImg').disabled=true;
  15. }
  16. </script>
  17.  
  18.  
  19. </head>
  20.  
  21. <body>
  22.  
  23. <form action="form.asp" method="post" onsubmit="return(validateForm(this));">
  24.  
  25. <select id="mySelect" size="1" name="t_im" onchange="Form()" onclick="doThis()">
  26. <option value="">Select value</option>
  27. <option value="A">A</option>
  28. <option value="C">C</option>
  29. <option value="Ca">Ca</option>
  30. <option value="Cav">Cav</option>
  31. </select>
  32.  
  33. <input type="text" name="e_gu" size="10" readonly>           
  34. <a href="javascript:Form()">
  35. <img id="myImg" src="icon_1.gif" border="0"></a>
  36.  
  37. <select size="1" name="c_fu">
  38. <option value="">Select value</option>
  39. <option value="YES">YES</option>
  40. <option value="NO">NO</option>
  41. </select>
  42.  
  43. <input type="text" name="c_ma" size="10" readonly>           
  44. <a href="javascript:Form()">
  45. <img src="icon_2.gif" border="0"></a>
  46.  
  47. </form>
  48.  
  49. </body>
  50.  
  51. </html>


In the if condition u have kept the value as 1 itself change for ur value and try it out. But the thing I am not able to diable an image. Just try hiding it

Regards
Ramanan Kalirajan
acoder's Avatar
acoder August 28th, 2008 11:34 AM
Site Moderator - 12,593 Posts
#8: Re: Disable/enable icon.gif

By disabling, do you mean that you want to disable the link?
viki1967's Avatar
viki1967 August 28th, 2008 12:59 PM
Familiar Sight - 212 Posts
#9: Re: Disable/enable icon.gif

Quote:
Originally Posted by acoder
By disabling, do you mean that you want to disable the link?


Yes, I disable the link href.
viki1967's Avatar
viki1967 August 28th, 2008 02:26 PM
Familiar Sight - 212 Posts
#10: Re: Disable/enable icon.gif

This is my solution on the problem, check please:

Expand|Select|Wrap|Line Numbers
  1.  
  2. <html>
  3.  
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  6.  
  7. <script type="text/javascript">
  8.  
  9. function CheckIcon1(ss){
  10.     var ok=false
  11.     if(ss.options[ss.selectedIndex].value==''){
  12.         document.getElementById('icon1').onclick=Function(  'return false')
  13.         document.getElementById('img_icon1').src='icon_1.g  if'
  14.     }
  15.     else{
  16.         document.getElementById('icon1').onclick=Function(  'return true')
  17.         document.getElementById('img_icon1').src="icon_2.gif'
  18.         ok=true
  19.     }
  20.     return ok
  21. }
  22.  
  23. function CheckIcon2(ss){
  24.     var ok=false
  25.     if(ss.options[ss.selectedIndex].value=='NO'){
  26.         document.getElementById('icon2').onclick=Function(  'return true')
  27.         document.getElementById('img_icon2').src='icon_1.g  if'
  28.         ok=true
  29.     }
  30.     else{
  31.         document.getElementById('icon2').onclick=Function(  'return false')
  32.         document.getElementById('img_icon2').src='icon_2.g  if'
  33.     }
  34.     return ok
  35. }
  36.  
  37.  
  38. function Form(theUrl, percSize) 
  39.  
  40. {
  41.  
  42. var width = 400; 
  43. var height = 200; 
  44. var left = Math.floor((screen.width-width)/2); 
  45. var top = Math.floor((screen.height-height)/2); 
  46.  
  47.   window.open(theUrl,'popup','width='+width+',height  ='+height+',top='+top+',left='+left);
  48.  
  49. }
  50.  
  51. </script>
  52.  
  53. </head>
  54.  
  55. <body>
  56.  
  57. <form action="form.asp" method="post">
  58.  
  59. <select size="1" name="t_im" onchange="if(CheckIcon1(this))Form('test.htm', '');">
  60. <option value="">Select value</option>
  61. <option value="A">A</option>
  62. <option value="C">C</option>
  63. <option value="Ca">Ca</option>
  64. <option value="Cav">Cav</option>
  65. </select>
  66.  
  67. <input type="text" name="e_gu" size="10" readonly>           
  68. <a id="icon1" href="javascript:Form('test.htm')" onclick="return false">
  69. <img id="img_icon1" src="icon_1.gif" border="0"></a>
  70.  
  71. <select size="1" name="c_fu" onchange="CheckIcon2(this);">
  72. <option value="">Select value</option>
  73. <option value="YES">YES</option>
  74. <option value="NO">NO</option>
  75. </select>
  76.  
  77. <input type="text" name="c_ma" size="10" readonly>           
  78. <a id="icon2" href="javascript:Form('test.htm')" onclick="return false">
  79. <img id="img_icon2" src="icon_2.gif" border="0"></a>
  80.  
  81. </form>
  82.  
  83. </body>
  84.  
  85. </html>
acoder's Avatar
acoder August 28th, 2008 05:16 PM
Site Moderator - 12,593 Posts
#11: Re: Disable/enable icon.gif

Set href to a real URL, i.e. "test.htm" in this case, and make the JavaScript function call in the onclick. To remove an onclick, set it to null, though here you would want to just set it to return false.
Reply
Not the answer you were looking for? Post your question . . .
197,015 members ready to help you find a solution.
Join Bytes.com

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 197,015 network members.
Post your question now . . .
It's fast and it's free

Popular Articles

Top Javascript / DHTML / Ajax Contributors
Quick Browse:
Communities / Archives
XML / CSS | HTML | Javascript | PHP | Perl | Visual Basic | Python | C++ / C | Java | .NET / C# / VB / XML / ASP.net | ASP
PostgreSQL | MS SQL | Oracle | IBM DB2 | MS Access | MySQL

About Bytes | Sitemap | Privacy Policy | Terms of Use
Copyright 1995-2008 Bytes.com. All rights Reserved