Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Aug 2003
    Location
    Singapore
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to Hide/Unhide fields and some among other things

    I'd like to know if there are ways to hide/unhide fields like radio options, text fields & others by using JavaScript.

    If so how do I do it? I do know I will have to check the form every time. Is there a need to refresh the form? Will the refresh clear all the selections?

    Things I'd like to hide:
    1. Upon the selection of a radio option, another radio option will appear.
    2. Upon the selection of a radio option, a text field will appear.

    Sorry for asking so many questions. But I just got to know that I need to use JavaScript in my application and I have no idea how and where to start, just bumping around, & hoping that God will drop some hint.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,960
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Check this out:

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function doClick(objRad){
    	if (objRad.value=="0"){		
    		document.getElementById("textbox").style.display='none'; //hide textbox
    		document.getElementById("otherOpt").style.display='block'; //show other options
    	}
    	else{		
    		document.getElementById("otherOpt").style.display='none'; //hide other options
    		document.getElementById("textbox").style.display='block'; //show textbox
    	}
    }
    </script>
    </head>
    <body>
    <form name="myform">
    <table>
    <tr>
    <td>
    <input type="radio" name="rad" value="0" onclick="doClick(this)">Other options
    </td>
    <td>
    <div id="otherOpt" style="display:none">
    <input type="radio" name="rad2" value="0">Option 1
    <input type="radio" name="rad2" value="1">Option 2
    </div>
    </td>
    <tr>
    <td>
    <input type="radio" name="rad" value="1" onclick="doClick(this)">Show textbox
    </td>
    <td>
    <div id="textbox" style="display:none">
    <input type="text" name="txt">
    </div>
    </td>
    </form>
    </body>
    </html>

  • #3
    New Coder
    Join Date
    Aug 2003
    Location
    Singapore
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dang it!

    I can't use it in R5!

    I deleted the <html>, <script> & other things that made the code outputs invisible in the browser. Finally I could see the code work in the browser but there was an error.

    I'm very sure it would work very well if I'm designing a website just using FrontPage or some other software.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,960
    Thanks
    0
    Thanked 236 Times in 233 Posts
    what is R5? what browser are you using?

  • #5
    New Coder
    Join Date
    Aug 2003
    Location
    Singapore
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok.

    I'm currently using R5 - Lotus Notes Release 5.

    This version allows JavaScript to be used and some tags like <script> are not supported on R5.

    Thus I previously posted the same question in Lotus Notes forum but was told to look for such scripts in those JavaScript forums and that's how I came here.

    The problem is that, the people here are more on web design gurus.

    I don't know where else to look for someone who knows what's going on in R5 & JavaScript.


  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,960
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Lotus Notes is just a Web server.
    It just outputs HTML and javascript codes to the browser.
    So it is still the browser that renders and interprets the scripts not the server.
    If you "View-Source" the generated page by the server, you should see the code I posted. Can you post the generated html source?

  • #7
    New Coder
    Join Date
    Aug 2003
    Location
    Singapore
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I could just strangle the PC.

    The script works now. I don't know if it's the cache or whatever...

    Thank you, Glenn, for your help.

  • #8
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Using a Combo Box instead?

    Hello all,

    I've been messing round with this code to get a better understanding of it and I was wondering how to perform hiding and unhiding of a text field using a Combo Box selection instead of clicking a radio button?

    Please have a look at the following code.

    ==========================================================

    <html>
    <head>
    <script type="text/javascript">
    function onSelect(objSelect){
    if (objSelect.value=="1") {
    document.getElementById("otherOpt").style.display='block'; // Show Options
    }
    }
    </script>
    </head>
    <body>
    <form name="submit_details">
    <table border="1">
    <tr>
    <td>
    <!-- When the user selects option 1, new options will appear -->
    <select name="values">
    <option value="">None</option>
    <option value="1" onfocus="onSelect(this)">1</option>
    <option value="2">2</option>
    </select>
    </td>
    <td>
    <div id="otherOpt" style="display:none">
    <input type="radio" name="rad2" value="0">Option 1
    <input type="radio" name="rad2" value="1">Option 2
    </div>
    </td>
    </tr>
    </table>
    </form>
    </body>
    </html>

    ==========================================================

    It is most likely a problem with onfocus function but ive tried onchange and onclick and they don't work either. Any help on this would be appreciated.

    Thanks
    Wes

  • #9
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    this solves the above problem

    <html>
    <head>
    <script type="text/javascript">
    function onSelect(objSelect){
    if (objSelect.value=="1") {
    document.getElementById("otherOpt").style.display='block'; // Show Options
    }else{
    document.getElementById("otherOpt").style.display='none'; // hide Options
    }
    }
    </script>
    </head>
    <body>
    <form name="submit_details">
    <table border="1">
    <tr>
    <td>
    <!-- When the user selects option 1, new options will appear -->
    <select name="values" onchange="onSelect(this);">
    <option value="">None</option>
    <option value="1">1</option>
    <option value="2">2</option>
    </select>
    </td>
    <td>
    <div id="otherOpt" style="display:none">
    <input type="radio" name="rad2" value="0" checked="checked">Option 1
    <input type="radio" name="rad2" value="1">Option 2
    </div>
    </td>
    </tr>
    </table>
    </form>
    </body>
    </html>

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Better late than never!

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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