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
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    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.
    Tags: None
  • #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

            Previous template Next
            Working...
            X