1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

show/hide form elements

Discussion in 'JavaScript' started by jonhy.pear, Apr 20, 2006.

  1. #1
    Hi,
    I would like to have a javascript function to show/hide form elements, like input boxes, textareas, etc. I have one but only works witj firefox. When I try to run it wit IE6, firts the script is blocked and after unblock it it doesn't work.
    How can I avoid the IE6 to block my script and put the script working?
    The script is the following, ignore the bad programming, is just to test:

    function showhide(what,obj) {
        if(what.checked) {
            obj1 = document.getElementById(obj);
            obj1.style.display = 'block';
    
            
        } else {
            obj1 = document.getElementById(obj);
            obj1.style.display = 'none';
        
        }
    }
    Code (markup):
     
    jonhy.pear, Apr 20, 2006 IP
  2. Slapyo

    Slapyo Well-Known Member

    Messages:
    266
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    108
    #2
    Have you tried setting it's visibility to visible or hidden.

    function showhide(what,obj) {
    	obj1 = document.getElementById(obj);
    	if(what.checked) {
    		obj1.style.visibility = 'visible';
    	} else {
    		obj1.style.visibility = 'hidden';
    	}
    }
    Code (markup):
     
    Slapyo, Apr 20, 2006 IP
  3. torunforever

    torunforever Peon

    Messages:
    414
    Likes Received:
    36
    Best Answers:
    0
    Trophy Points:
    0
    #3
    "When I try to run it wit IE6, firts the script is blocked and after unblock it it doesn't work. How can I avoid the IE6 to block my script and put the script working?"

    As of XP SP2, html files with scripts opened from your local machine zone are blocked by default. This is for your security so you should leave it on, and just enable scripting on a page-by-page basis. The javascript example you listed should work in Internet Explorer once you've allowed blocked content for that page.

    Here is your code in an example I tested, and it works in IE and Firefox.

    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <script type="text/javascript">
    <!--
    function showhide(what,obj) {
        if(what.checked) {
            obj1 = document.getElementById(obj);
            obj1.style.display = 'block';
    
            
        } else {
            obj1 = document.getElementById(obj);
            obj1.style.display = 'none';
        
        }
    }
    //-->
    </script>
    </head>
    <body>
    <form>
    <input type="checkbox" onclick="showhide(this, 'txt1');" checked="checked" />
    <p>
    <input type="input" id="txt1" />
    </p>
    </form>
    </body>
    </html>
    
    HTML:
     
    torunforever, Apr 20, 2006 IP
  4. jonhy.pear

    jonhy.pear Peon

    Messages:
    105
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Thanks to both of you for the response.
    Slapyo: I'd already tried using visibility attribute instead of display attribute. Doesn't worked too.
    Torunforever: My code is exacly equals to the one you've posted, despite some different name of variable :)

    Neither one worked in IE, but now I'm now that's becasuse IE is blocking the scripts. I've tried also a simple alert in the beginning of the function and the message wasn't showed :=) The problem is due the IE and not the script. It's my conclusion. Hope it's not blocked in the end user IE :)
    Thanks again,
    JP
     
    jonhy.pear, Apr 20, 2006 IP
  5. Slapyo

    Slapyo Well-Known Member

    Messages:
    266
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    108
    #5
    jonhy.pear, if the problem was the script being blocked by IE then it should be a local issue only. End users loading your page should not have the same problem. Just to test it, upload your file(s) and load it up in a browser and see if anything is blocked or if it works.
     
    Slapyo, Apr 20, 2006 IP
  6. TecBrat

    TecBrat Member

    Messages:
    31
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    48
    #6
    I wanted to share what I did after reading this thread, in case it helps someone else. I needed a hidden text input that became visible only when "Other" was selected from the drop down. In testing, I gave the form field the obj id, but changed it to a div so that I could include a table with a bit of text as well.
    If I actually knew what I was doing, I'm sure I could clean this up a bit.
    ...<script type="text/javascript">
    function hide(obj)
      {
          obj1 = document.getElementById(obj);
          obj1.style.visibility = 'hidden';
      }
    function show(obj)
      {
          obj1 = document.getElementById(obj);
          obj1.style.visibility = 'visible';
      }
    
    function show_other(optionValue)
    {
    	if(optionValue=='Other'){show('txt1');}else{hide('txt1');}
    
    }
    </script>
    </head>
    
    <body onload=hide('txt1');>
    <form method=post action=whatever.php>
    <select id="how" size="1" name="how_hear" onchange="show_other(this.value)"">
                       <option value="">Please Select</option>
                       <option>Special Event</option>
                       <option>Radio</option>
                       <option>Newspaper</option>
                       <option>Banners</option>
                       <option>Posters</option>
                       <option value='Other'>Other</option>
                    </select>
    <div id="txt1">
    <TABLE>
      <TR>
        <TD>Other:   </TD><TD><input type="text"/></TD>
      </TR>
    </TABLE>
    </div>
    </form>...
    
    Code (markup):
     
    TecBrat, Mar 13, 2008 IP
    lanmonkey likes this.
  7. TecBrat

    TecBrat Member

    Messages:
    31
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    48
    #7
    In the time since I posted the above I have began to use
    obj1.style.display = 'none';
    Code (markup):
    to hide and
    obj1.style.display = '';
    Code (markup):
    to show. (that's the "display" property instead of the "visibility" property and setting the style to a null string takes it back to default.)
     
    TecBrat, Oct 23, 2013 IP
  8. jpmalloy

    jpmalloy Greenhorn

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #8
    obj1.style.display = 'block';
    
    //to display div or
    
    obj1.style.display = 'inline-block';
    
    //to display inline div
    Code (markup):
     
    jpmalloy, Oct 24, 2013 IP