onClick not hiding an element
hello
im trying to hide 2 divs with an onClick & its not working.
the radio button that has the onclick cant be clicked on until something is entered in the email box.
the user will then click on the radio button saying they read the rules & it should hide the 'ticketleft' & 'ticketright' divs.
ive tried a few diff things & i cant get it to work. the function is called riptickets()
any help is appreciated.
Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pre-Register for P.A.W.N</title>
<style type="text/css">
#ticketleft {
width: 236px;
height: 237px;
background-image: url(images/2017left.jpg);
float: left;
}
#ticketmiddle {
width: 327px;
height: 238px;
background-image: url(images/2018middle.jpg);
float: left;
}
#ticketright {
width: 236px;
height: 237px;
background-image: url(images/2017bonus.jpg);
margin-left: 561px;
background-repeat: no-repeat;
}
.auto-style2 {
text-align: left;
}
.auto-style3 {
text-align: right;
}
.auto-style4 {
color: #FFFFFF;
}
</style>
<script type="text/javascript">
function riptickets(){
document.getElementById('ticketleft').style.visibility = "hidden";
document.getElementById('ticketright').style.visibility = "hidden";
}
</script>
</head>
<body>
<p align="center">
</p>
<form action="preregisterconfirm.php" method="post" id="RAND" name="RAND" style="height: 528px; font-family: Georgia, 'Times New Roman', Times, serif;">
<div id="raffletable" style="height: 530px">
<div id="nametable">
<br />
<table style="width: 1100px; height: 75px;" cellpadding="5" align="center" class="auto-style2">
<tr>
<td style="width: 25px; height: 20px;"></td>
<td style="width: 274px; height: 20px;" class="auto-style3"><strong>Your Name:</strong></td>
<td style="width: 274px; height: 20px;" class="auto-style2">
<label> <input name="username" tabindex="1"></label></td>
<td style="width: 275px; height: 20px;" class="auto-style4">
</td>
<td style="width: 275px; height: 20px;" class="auto-style2">
</td>
<td style="width: 275px; height: 20px;"></td>
</tr>
<tr>
<td style="width: 25px; height: 20px;"></td>
<td style="width: 274px; height: 20px;" class="auto-style3"><strong>Your Email:</strong></td>
<td colspan="3" style="height: 20px">
<input name="email" size="68" type="text" tabindex="2" onclick="document.getElementById('readrules').disabled = false"><input name="neptune" size="68" type="hidden" ></td>
<td style="width: 275px; height: 20px;"></td>
</tr>
<tr>
<td style="width: 25px; height: 20px;"></td>
<td style="width: 274px; height: 20px;" class="auto-style3">
<strong>
<input name="readrules" type="radio" value=" " id="readrules" onclick="document.getElementById('submitme').disabled = false; function riptickets();" tabindex="3" disabled="disabled"> </strong></td>
<td colspan="3" style="height: 20px">
<strong>I have read & understand the rules.</strong></td>
<td style="width: 275px; height: 20px;"></td>
</tr>
</table>
</div>
<p align="center">
</p>
<p align="center">
<input type="submit" action="preregisterconfirm.php" id="submitme"value="Please Register Me & Enter My 2 Bonus Tickets" name="submit" disabled="disabled" tabindex="5" style="width: 321px" ></p>
<p align="center">
<div id="ticketleft"></div><div id="ticketmiddle"></div><div id="ticketright"></div></p>
</div>
</form>
</body>
</html>
you can see it here: http://www.whambamgames.com/wb/events/pawn/test.html
thanks,
HippieChickie
Just an example for agree with terms
This is another method:
Code:
<html>
<head>
<script type="text/javascript">
var checkobj
function agreesubmit(el){
checkobj=el
if (document.all||document.getElementById){
for (i=0;i<checkobj.form.length;i++){
var tempobj=checkobj.form.elements[i]
if(tempobj.type.toLowerCase()=="submit")
tempobj.disabled=!checkobj.checked
}
}
}
function defaultagree(el){
if (!document.all&&!document.getElementById){
if (window.checkobj&&checkobj.checked)
return true
else{
alert("Please accept the terms.!")
return false
}
}
}
</SCRIPT>
</head>
<body>
<table align=center>
<tr>
<td>
<form ACTION="http://www.leejoo.nl" target="_new" name="agreeform" onSubmit="return defaultagree(this)">
<!-- verander hierboven de url en target waarnaar doorgeklikt kan worden
<textarea rows="10" name="S1" cols="32" wrap="virtual">
Voorwaarden :
Bij deze ga ik akkoord met de voorwaarden die gelden ..... bla bla bla
bla
bla
vink de optie akkoord aan....</textarea>--><br>
<input name="agreecheck" TYPE="checkbox" onClick="agreesubmit(this)"> I agree with the <a href="#">terms.</a>
<br><br>
<input type="Submit" value="Oke" disabled>
</form>
<script type="text/javascript">
document.forms.agreeform.agreecheck.checked=false
</script>
</td>
</tr>
</table>
