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 6 of 6
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How do I clear an onclick event?

    I've got a checkbox that, when clicked, displays new text inputs. However, when I "uncheck" the box, the fields don't disappear unless I reload the entire page. What code can I add to reset the box to null when it is unchecked?

    Here's the function code I have:
    Code:
    <script>
    function showUserReg() {
    	document.getElementById("userReg").style.display = "inline";
    		}
    </script>
    And here's the inline code:
    Code:
    <input type="checkbox" name="additional" value="userRegister" onclick="showUserReg()"/> Yes! Register me now!<br/>
    
    <span id = "userReg" style="display:none">
    <table class="nobord" align="center">
    <tr>
    <td>Choose a username:</td>
    <td><input type="text" name="username" size="35"/></td>
    </tr>
    <tr>
    <td>Choose a password:</td>
    <td><input type="password" name="password" size="35" maxlength="20"/></td>
    </tr>
    <tr>
    <td>Confirm password:<font color="red">*</font></td>
    <td><input type="password" name="password" size="35" maxlength="20"/></td>
    </tr>
    </table>		
    </span>
    Thanks for any help.

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    this should do it.

    Code:
    <script>
    function showUserReg() {
    if (this.checked === True){
    	document.getElementById("userReg").style.display = "inline";
    }else{
    document.getElementById("userReg").style.display = "none";
    }
    		}
    </script>

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DanInMa View Post
    this should do it.

    Code:
    <script>
    function showUserReg() {
    if (this.checked === True){
    	document.getElementById("userReg").style.display = "inline";
    }else{
    document.getElementById("userReg").style.display = "none";
    }
    		}
    </script>
    Wow I get to see you here as well, DanInMA. I was starting my day on my list of forums and you are everywhere. lol

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Code:
    <html><head>
    <script>
    function showUserReg() {
    	if(document.getElementById("userReg").style.display == "inline")
    document.getElementById("userReg").style.display = "none"
    else document.getElementById("userReg").style.display = "inline";
    
    
    		}
    </script>
    </head><body>
    
    <input type="checkbox" name="additional" value="userRegister" onclick="showUserReg()"/> Yes! Register me now!<br/>
    
    <span id = "userReg" style="display:none">
    <table class="nobord" align="center">
    <tr>
    <td>Choose a username:</td>
    <td><input type="text" name="username" size="35"/></td>
    </tr>
    <tr>
    <td>Choose a password:</td>
    <td><input type="password" name="password" size="35" maxlength="20"/></td>
    </tr>
    <tr>
    <td>Confirm password:<font color="red">*</font></td>
    <td><input type="password" name="password" size="35" maxlength="20"/></td>
    </tr>
    </table>		
    </span>
    </body></html>

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks so much. That was what I needed. I'm still trying to get a handle of the if/else logic. Thanks again.

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    You can also use the ternary operator in place of the if/else.
    Code:
    <input type="checkbox" name="additional" value="userRegister" onclick="document.getElementById('userReg').style.display = (this.checked) ? 'inline' : 'none'; "/> Yes! Register me now!<br/>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

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