SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    Non-Member
    Join Date
    Aug 2007
    Posts
    494
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    3 Thread(s)
    Firstly you need to change your markup somewhat (added stuff is in red)

    Code:
    <form action="form.asp" method="post" onsubmit="return(validateForm(this));">
    
    <select size="1" id="t_im" 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" id="img1" border="0"></a>
                
    <select size="1" id="c_fu" 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" id="img2" border="0"></a>
                
    </form>
    As for the javascript:

    Code:
    function Form()
    {
      if (document.getElementById('t_im').value == '')
      {
        document.getElementById('img1').src = 'disable_icon1.gif';
      }
      else
      {
        document.getElementById('img1').src = 'enable_icon1.gif';
      }
      if (document.getElementById('f_cu').value == 'NO')
      {
        document.getElementById('img2').src = 'enable_icon2.gif';
      }
      else
      {
        document.getElementById('img2').src = 'disable_icon2.gif';
      }
    Hope this helps

  3. #3
    SitePoint Addict
    Join Date
    Jun 2006
    Location
    Durban, South Africa
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    I haven't tested this, but it should just about get you there.

    Code:
    <form action="form.asp" method="post" onsubmit="return(validateForm(this));">
    
    <select size="1" name="t_im" id="t_im" onchange="Form(event)">
    <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" id="c_fu" onchange="Form(event)">
    <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" id="the_gif"></a>
                
    </form>
    
    <script type="text/javascript">
    function return_element_that_actioned(event) {
      var elm;
    
      // check if no event was passed, if not create the event
      if(!event)
        var event = window.event;
    
      if(event.target)
        elm = event.target;
      else if(event.srcElement)
        elm = event.srcElement;
    
      // defeat Safari bug
      if(elm.nodeType == 3)
        elm = target.parentNode;
    
      return elm;
    }
    
    function Form(event) {
      var elm = return_element_that_actioned(event);
    
      if('t_im' == elm.id) {
        if(NULL == elm.value) {
          // i dont understand what you mean by disable the gif so im just making  it disappear...
          document.getElementById('the_gif').style.display = 'none';
        } else {
          document.getElementById('the_gif').style.display = 'block';
        }
      } else {
        if(NULL == elm.value || 'YES' == elm.value)
          document.getElementById('the_gif').style.display = 'none';
        else
          document.getElementById('the_gif').style.display = 'block';
      }
    }
    </script>
    I added an ID to the to selects.
    I added the "return_element_that_actioned function, to figure out with element was changed.
    The other function just gets the element that actioned, and gets the value, and figures out if the gif must be disabled or not. What exactly do you mean "disable the gif"?

  4. #4
    Non-Member
    Join Date
    Aug 2007
    Posts
    494
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks x your reply.

    the suggestion of poinz present error NULL undefined in the line:

    if(NULL == elm.value) {

    the suggestion of ScallioXTX not working... :S

    Disable the gif is null href...
    Last edited by viki1967; Aug 28, 2008 at 03:10.

  5. #5
    SitePoint Addict
    Join Date
    Jun 2006
    Location
    Durban, South Africa
    Posts
    287
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ya sorry, I didn't test it, so you might have to do a little debugging.

    Print out the value before the line that its having an error on and see if you maybe change the NULL in the if to undefined.

    Sorry I can't help further than that at the moment, i am just a little busy at the moment, but I think i'v given enough that you can debug it and get it working

  6. #6
    SitePoint Evangelist Miguel61's Avatar
    Join Date
    Mar 2008
    Posts
    408
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi poizn, I light to interesting about this script.

    But I have problem with your script.

    It's possible change the gif when is enabled: for example the gif enabled add.gif, the gif disables del.gif.

    Code:
    <html>
    
    <head>
    <script type="text/javascript">
    function return_element_that_actioned(event) {
      var elm;
    
      // check if no event was passed, if not create the event
      if(!event)
        var event = window.event;
    
      if(event.target)
        elm = event.target;
      else if(event.srcElement)
        elm = event.srcElement;
    
      // defeat Safari bug
      if(elm.nodeType == 3)
        elm = target.parentNode;
    
      return elm;
    }
    
    function Form(event) {
    
      var elm = return_element_that_actioned(event);  
      var NULL = ""
    
      if('t_im' == elm.id) {
        if(NULL == elm.value) {
          // i dont understand what you mean by disable the gif so im just making  it disappear...
          document.getElementById('the_gif').style.display = 'none';
        } else {
          document.getElementById('the_gif').style.display = 'block';
        }
      } else {
        if(NULL == elm.value || 'YES' == elm.value)
          document.getElementById('the_gif').style.display = 'none';
        else
          document.getElementById('the_gif').style.display = 'block';
      }
    }
    </script>
    </head>
    
    <body>
    
    <form action="form.asp" method="post" onsubmit="return(validateForm(this));">
    
    <select size="1" name="t_im" id="t_im" onchange="Form(event)">
    <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="/images/icons/add.png" border="0"></a>
                
    <select size="1" name="c_fu" id="c_fu" onchange="Form(event)">
    <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="/images/icons/add.png" border="0" id="the_gif"></a>
                
    </form>
    
    </body>
    
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •