Disable/enable icon.gif

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • viki1967
    Contributor
    • Oct 2007
    • 263
    #1

    Disable/enable icon.gif

    Disable/enable icon.gif

    Hi all.

    I have this form in the page.htm:

    Code:
    <form action="form.asp" method="post" onsubmit="return(validateForm(this));">

<select size="1" name="t_im" onchange="Form()">
<option value="">Select value</option>
<option value="A">A</option>
<option value="C">C</option>
<option value="Ca">Ca</option>
<option value="Cav">Cav</option>
</select>
            
<input type="text" name="e_gu" size="10" readonly>           
<a href="javascript:Form()">
<img src="icon_1.gif" border="0"></a>
            
<select size="1" name="c_fu">
<option value="">Select value</option>
<option value="YES">YES</option>
<option value="NO">NO</option>
</select>
                  
<input type="text" name="c_ma" size="10" readonly>           
<a href="javascript:Form()">
<img src="icon_2.gif" border="0"></a>
            
</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
    Tags: None
    • RamananKalirajan
      Contributor
      • Mar 2008
      • 608
      #2
      Wether u need it as disabled or hidden.

      Regards
      Ramanan Kalirajan

        Comment

        • viki1967
          Contributor
          • Oct 2007
          • 263
          #3
          Originally posted by RamananKaliraja n
          Wether u need it as disabled or hidden.

          Regards
          Ramanan Kalirajan
          I need disabled.
          thanks x your reply
          viki

            Comment

            • RamananKalirajan
              Contributor
              • Mar 2008
              • 608
              #4
              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.getEle mentById('mySel ect').selectedI ndex;
              alert(document. getElementById( 'mySelect').opt ions[x].value);
              if(document.get ElementById('my Select').option s[x].value<1)
              document.getEle mentById('myImg ').disabled=tru e;
              }
              </script>
              </head>
              <select id="mySelect" size="10" onclick="doThis ()">
              <option value="0">Selec t a Value</option>
              <option value="1">Selec t 1 Value</option>
              <option value="2">Selec t 2 Value</option>
              <option value="3">Selec t 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

                Comment

                • viki1967
                  Contributor
                  • Oct 2007
                  • 263
                  #5
                  Sorry buy your example not working in my case:

                  Code:
                  <html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<script type="text/javascript">
function doThis()
{
  
    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>

<body>

<form action="form.asp" method="post" onsubmit="return(validateForm(this));">
 
<select id="mySelect" size="1" name="t_im" onchange="Form()" onclick="doThis()">
<option value="">Select value</option>
<option value="A">A</option>
<option value="C">C</option>
<option value="Ca">Ca</option>
<option value="Cav">Cav</option>
</select>
            
<input type="text" name="e_gu" size="10" readonly>           
<a href="javascript:Form()">
<img id="myImg" src="icon_1.gif" border="0"></a>
            
<select size="1" name="c_fu">
<option value="">Select value</option>
<option value="YES">YES</option>
<option value="NO">NO</option>
</select>
                  
<input type="text" name="c_ma" size="10" readonly>           
<a href="javascript:Form()">
<img src="icon_2.gif" border="0"></a>
            
</form>

</body>

</html>

                    Comment

                    • viki1967
                      Contributor
                      • Oct 2007
                      • 263
                      #6
                      Sorry buy your example not working in my case:

                      Code:
                      <html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<script type="text/javascript">
function doThis()
{
  
    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>

<body>

<form action="form.asp" method="post" onsubmit="return(validateForm(this));">
 
<select id="mySelect" size="1" name="t_im" onchange="Form()" onclick="doThis()">
<option value="">Select value</option>
<option value="A">A</option>
<option value="C">C</option>
<option value="Ca">Ca</option>
<option value="Cav">Cav</option>
</select>
            
<input type="text" name="e_gu" size="10" readonly>           
<a href="javascript:Form()">
<img id="myImg" src="icon_1.gif" border="0"></a>
            
<select size="1" name="c_fu">
<option value="">Select value</option>
<option value="YES">YES</option>
<option value="NO">NO</option>
</select>
                  
<input type="text" name="c_ma" size="10" readonly>           
<a href="javascript:Form()">
<img src="icon_2.gif" border="0"></a>
            
</form>

</body>

</html>

                        Comment

                        • RamananKalirajan
                          Contributor
                          • Mar 2008
                          • 608
                          #7
                          Originally posted by viki1967
                          Sorry buy your example not working in my case:

                          Code:
                          <html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<script type="text/javascript">
function doThis()
{
  
    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>

<body>

<form action="form.asp" method="post" onsubmit="return(validateForm(this));">
 
<select id="mySelect" size="1" name="t_im" onchange="Form()" onclick="doThis()">
<option value="">Select value</option>
<option value="A">A</option>
<option value="C">C</option>
<option value="Ca">Ca</option>
<option value="Cav">Cav</option>
</select>
            
<input type="text" name="e_gu" size="10" readonly>           
<a href="javascript:Form()">
<img id="myImg" src="icon_1.gif" border="0"></a>
            
<select size="1" name="c_fu">
<option value="">Select value</option>
<option value="YES">YES</option>
<option value="NO">NO</option>
</select>
                  
<input type="text" name="c_ma" size="10" readonly>           
<a href="javascript:Form()">
<img src="icon_2.gif" border="0"></a>
            
</form>

</body>

</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

                            Comment

                            • acoder
                              Recognized Expert MVP
                              • Nov 2006
                              • 16032
                              #8
                              By disabling, do you mean that you want to disable the link?

                                Comment

                                • viki1967
                                  Contributor
                                  • Oct 2007
                                  • 263
                                  #9
                                  Originally posted by acoder
                                  By disabling, do you mean that you want to disable the link?
                                  Yes, I disable the link href.

                                    Comment

                                    • viki1967
                                      Contributor
                                      • Oct 2007
                                      • 263
                                      #10
                                      This is my solution on the problem, check please:

                                      Code:
                                      <html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<script type="text/javascript">

function CheckIcon1(ss){
	var ok=false
	if(ss.options[ss.selectedIndex].value==''){
		document.getElementById('icon1').onclick=Function('return false')
		document.getElementById('img_icon1').src='icon_1.gif'
	}
	else{
		document.getElementById('icon1').onclick=Function('return true')
		document.getElementById('img_icon1').src="icon_2.gif'
		ok=true
	}
	return ok
}

function CheckIcon2(ss){
	var ok=false
	if(ss.options[ss.selectedIndex].value=='NO'){
		document.getElementById('icon2').onclick=Function('return true')
		document.getElementById('img_icon2').src='icon_1.gif'
		ok=true
	}
	else{
		document.getElementById('icon2').onclick=Function('return false')
		document.getElementById('img_icon2').src='icon_2.gif'
	}
	return ok
}


function Form(theUrl, percSize) 

{

var width = 400; 
var height = 200; 
var left = Math.floor((screen.width-width)/2); 
var top = Math.floor((screen.height-height)/2); 

  window.open(theUrl,'popup','width='+width+',height='+height+',top='+top+',left='+left);
  
}

</script>

</head>

<body>

<form action="form.asp" method="post">
 
<select size="1" name="t_im" onchange="if(CheckIcon1(this))Form('test.htm', '');">
<option value="">Select value</option>
<option value="A">A</option>
<option value="C">C</option>
<option value="Ca">Ca</option>
<option value="Cav">Cav</option>
</select>
            
<input type="text" name="e_gu" size="10" readonly>           
<a id="icon1" href="javascript:Form('test.htm')" onclick="return false">
<img id="img_icon1" src="icon_1.gif" border="0"></a>
            
<select size="1" name="c_fu" onchange="CheckIcon2(this);">
<option value="">Select value</option>
<option value="YES">YES</option>
<option value="NO">NO</option>
</select>
                  
<input type="text" name="c_ma" size="10" readonly>           
<a id="icon2" href="javascript:Form('test.htm')" onclick="return false">
<img id="img_icon2" src="icon_2.gif" border="0"></a>
            
</form>

</body>

</html>

                                        Comment

                                        • acoder
                                          Recognized Expert MVP
                                          • Nov 2006
                                          • 16032
                                          #11
                                          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.

                                            Comment

                                            Previous template Next
                                            Working...