Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

Disable/enable icon.gif

Familiar Sight
  
Join Date: Oct 2007
Posts: 254
#1: Aug 28 '08
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>
  26.  
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

RamananKalirajan's Avatar
Needs Regular Fix
  
Join Date: Mar 2008
Location: Chennai - India
Posts: 350
#2: Aug 28 '08

re: Disable/enable icon.gif

Wether u need it as disabled or hidden.

Regards
Ramanan Kalirajan
Familiar Sight
  
Join Date: Oct 2007
Posts: 254
#3: Aug 28 '08

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
Needs Regular Fix
  
Join Date: Mar 2008
Location: Chennai - India
Posts: 350
#4: Aug 28 '08

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

[HTML]<html>
<head>
<script type="text/javascript">
function doThis()
{
//alert("hai");
var x = document.getElementById('mySelect').selectedIndex;
alert(document.getElementById('mySelect').options[x].value);
if(document.getElementById('mySelect').options[x].value<1)
document.getElementById('myImg').disabled=true;
}
</script>
</head>
<select id="mySelect" size="10" onclick="doThis()">
<option value="0">Select a Value</option>
<option value="1">Select 1 Value</option>
<option value="2">Select 2 Value</option>
<option value="3">Select 3 Value</option>
</select>
<br/><br/><br/>
<img src="demo.jpg" id="myImg">
</html>
[/HTML]

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
Familiar Sight
  
Join Date: Oct 2007
Posts: 254
#5: Aug 28 '08

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>
Familiar Sight
  
Join Date: Oct 2007
Posts: 254
#6: Aug 28 '08

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
Needs Regular Fix
  
Join Date: Mar 2008
Location: Chennai - India
Posts: 350
#7: Aug 28 '08

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
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#8: Aug 28 '08

re: Disable/enable icon.gif

By disabling, do you mean that you want to disable the link?
Familiar Sight
  
Join Date: Oct 2007
Posts: 254
#9: Aug 28 '08

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.
Familiar Sight
  
Join Date: Oct 2007
Posts: 254
#10: Aug 28 '08

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.gif'
  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.gif'
  28.         ok=true
  29.     }
  30.     else{
  31.         document.getElementById('icon2').onclick=Function('return false')
  32.         document.getElementById('img_icon2').src='icon_2.gif'
  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>
  86.  
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#11: Aug 28 '08

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

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

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 226,533 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved