Web Analytics Made Easy -
StatCounter How do I clear an onclick event? - CodingForum

Announcement

Collapse
No announcement yet.

How do I clear an onclick event?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    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>
    - Firebug is a web developers best friend! - Learn it, Love it, use it!
    - Validate your code! - JQ/JS troubleshooting
    - Using jQuery with Other Libraries - Jslint for Jquery/other JS library users

    Comment


    • #3
      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

      Comment


      • #4
        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>

        Comment


        • #5
          Thanks so much. That was what I needed. I'm still trying to get a handle of the if/else logic. Thanks again.

          Comment


          • #6
            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
            vBulletin Mods That Rock!

            Comment

            Working...
            X