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

Disable/enable icon.gif

  #1  
Old August 28th, 2008, 09:13 AM
Familiar Sight
  
Join Date: Oct 2007
Posts: 250
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
  #2  
Old August 28th, 2008, 09:23 AM
RamananKalirajan's Avatar
Needs Regular Fix
  
Join Date: Mar 2008
Location: Chennai - India
Posts: 344

re: Disable/enable icon.gif

Wether u need it as disabled or hidden.

Regards
Ramanan Kalirajan
  #3  
Old August 28th, 2008, 09:26 AM
Familiar Sight
  
Join Date: Oct 2007
Posts: 250

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
  #4  
Old August 28th, 2008, 09:39 AM
RamananKalirajan's Avatar
Needs Regular Fix
  
Join Date: Mar 2008
Location: Chennai - India
Posts: 344

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
  #5  
Old August 28th, 2008, 09:52 AM
Familiar Sight
  
Join Date: Oct 2007
Posts: 250

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>
  #6  
Old August 28th, 2008, 09:57 AM
Familiar Sight
  
Join Date: Oct 2007
Posts: 250

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>
  #7  
Old August 28th, 2008, 11:34 AM
RamananKalirajan's Avatar
Needs Regular Fix
  
Join Date: Mar 2008
Location: Chennai - India
Posts: 344

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
  #8  
Old August 28th, 2008, 11:34 AM
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,525
Provided Answers: 12

re: Disable/enable icon.gif

By disabling, do you mean that you want to disable the link?
  #9  
Old August 28th, 2008, 12:59 PM
Familiar Sight
  
Join Date: Oct 2007
Posts: 250

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.
  #10  
Old August 28th, 2008, 02:26 PM
Familiar Sight
  
Join Date: Oct 2007
Posts: 250

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.  
  #11  
Old August 28th, 2008, 05:16 PM
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,525
Provided Answers: 12

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 Threads
Thread Thread Starter Forum Replies Last Post
Java script memory leak Jay answers 2 June 27th, 2008 09:09 PM

/bytes/development

/bytes/it

/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 225,698 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