...

View Full Version : How do I clear an onclick event?



magikeys
08-31-2011, 09:37 PM
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:

<script>
function showUserReg() {
document.getElementById("userReg").style.display = "inline";
}
</script>
And here's the inline 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.

DanInMa
08-31-2011, 09:43 PM
this should do it.



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

pactor21
08-31-2011, 09:48 PM
this should do it.



<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

DaveyErwin
08-31-2011, 09:50 PM
<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>

magikeys
08-31-2011, 10:02 PM
Thanks so much. That was what I needed. I'm still trying to get a handle of the if/else logic. Thanks again.

glenngv
09-01-2011, 08:37 PM
You can also use the ternary operator in place of the if/else.


<input type="checkbox" name="additional" value="userRegister" onclick="document.getElementById('userReg').style.display = (this.checked) ? 'inline' : 'none'; "/> Yes! Register me now!<br/>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum