I have a check box that needs to be tick, if not the javascript kicks in before the page is sent to a new page
here is the code
| <script type="text/javascript"> | |
| function validate(form) { | |
| if (!document.AdminDownloads.elease.checked) | |
| { alert("By ticking this box you agree that you have clearly read this document according to our terms and conditions and agree to digitally sign the document."); | |
| return false; } | |
| return true; | |
| } | |
| </script> |
here is the form
<form name="AdminDownloads" method="post" onsubmit="return validateForm()" action="">
<input type="checkbox" name="elease" id="elease" />
<a href="eLease.php?recordID=<?php echo $row_Recordset1['userid']; ?>"><input type="image" src="../images/smalldownload.png" width="35" height="35" alt="download" value="submit"/></a>
</form>
can anyone see what i am doing wrong
thanks in advance
Jon
Please compare your JS with the following
function validateForm() {
if (!document.AdminDownloads.elease.checked)
{ alert("By ticking this box you agree that you have clearly read this document according to our terms and conditions and agree to digitally sign the document.");
return false; }
return true;
}
and the markup with the following
<form name="AdminDownloads" method="post" onSubmit="return validateForm()" action="">
<input type="checkbox" name="elease" id="elease" />
<a href="eLease.php?recordID<?php echo $row_Recordset1['userid']; ?>"><input type="image" src="../images/smalldownload.png" width="35" height="35" alt="download" value="submit"/></a>
</form>
Gramps
i have another quick question can i put some more javascript in as what happens at the moment is the submit , if the check box isnt ticked it gives the prompt then sends them to the new page, can i say if not ticked send the back to the previous page so they can tick?
thanks in advance
Jon
got an issue
i have multiple check boxes that need to do the same this. when i run this it isnt doing what i need it to. basically each tick box needs to be check before the person can click the relevent button
<script type="text/javascript">
function validateForm() {
if (!document.AdminDownloads.elease.checked)
{ alert("PLEASE TICK THE BOX ON THE RIGHT, By ticking this box you agree that you have agreed to our terms and conditions and agree to digitally sign the document.");
return false; }
return true;
}
</script>
<script type="text/javascript">
function validateForm() {
if (!document.AdminDownloads.leaseshedule.checked)
{ alert("PLEASE TICK THE BOX ON THE RIGHT, By ticking this box you agree that you have agreed to our terms and conditions and agree to digitally sign the document.");
return false; }
return true;
}
</script>
<form name="AdminDownloads" method="post" onClick="return validateForm()" action="">
<input type="image" src="../images/smalldownload.png" width="35" height="35" alt="download" value="submit"/></a></div></td>
<td width="123" valign="middle" bgcolor="#FFFFFF" class="table-text"><div align="right">
<span class="red">*</span>sign
<input type="checkbox" name="elease" id="elease"/>
<input type="image" src="../images/smalldownload.png" width="35" height="35" alt="download" value="submit"/></a></div></td>
<td bgcolor="#FFFFFF" class="table-text"><div align="right"><br />
<span class="red">*</span>sign
<input type="checkbox" name="leaseshedule" id="leaseshedule" />
</form>
i have included two of the check boxes
what is happening at the moment is once one box is checked i can access the other page.
Is this what you are looking for?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://labs.adobe.com/technologies/spry/includes_minified/SpryValidationCheckbox.js"></script>
<link href="http://labs.adobe.com/technologies/spry/widgets/checkboxvalidation/SpryValidationCheckbox.css" rel="stylesheet">
</head>
<body>
<form action="" method="get">
<p id="sprycheckbox1">
<input type="checkbox" name="one" id="one">
<label for="one">One</label>
<span class="checkboxRequiredMsg">PLEASE TICK THE BOX ON THE LEFT, By ticking this box you agree that you have agreed to our terms and conditions and agree to digitally sign the document.</span>
</p>
<p id="sprycheckbox2">
<input type="checkbox" name="two" id="two">
<label for="two">Two</label>
<span class="checkboxRequiredMsg">PLEASE TICK THE BOX ON THE LEFT, By ticking this box you agree that you have agreed to our terms and conditions and agree to digitally sign the document.</span>
</p>
<p><input name="" type="submit"></p>
</form>
<script type="text/javascript">
var sprycheckbox1 = new Spry.Widget.ValidationCheckbox("sprycheckbox1");
var sprycheckbox2 = new Spry.Widget.ValidationCheckbox("sprycheckbox2");
</script>
</body>
</html>
Gramps
Do you want to hear some good things about Spry?
DMXZone: http://www.dmxzone.com/go?16649, http://www.dmxzone.com/go?16717, http://www.dmxzone.com/go?16966,
WebAssist: http://www.webassist.com/support/validation-tooltips-for-spry/getting- started-guide/validation-tooltips-for-spry_gsg.php, http://www.justdreamweaver.com/wa-site-assist.html
Linecraft: http://www.linecraft.com/b2/index.php?p=28&c=1, http://www.linecraft.com/spry-pop-up-dialog/extension.php, http://www.linecraft.com/spry_data_utils/videos/editable-spry-table.ph p, http://www.linecraft.com/spry_data_utils/videos/sending_spry_email.php
The above is just a very small selection of professionals that believe in Spry and a very small selection of their reference to Spry. On occasion, I use will use Webeassist's pre-built PHP solutions as per http://www.webassist.com/php-scripts-and-solutions/. These are full of Spry widgets. They would not risk their name by using Spry if it was no good.
Do you want to use javascript?
Spry is javascript, it is a library of javascript code, ready made for us to use. Not only that, the widgets include the markup, the CSS and the javascript which javascript on its own does not have. Even jQuery, which is also a javascript library, is not as easy to implement as Spry
Do you want to give Spry a go?
Have you tried copying and pasting my code into a new document and have you viewed it in your favourite browser?
Grumps
ok i have the alert working but it currently just displays underneath the check box, is there any way i can have it come up in another window or another part of the page?
here is the full form
<form id="form1" name="form1" method="post" action="eLease.php?recordID=<?php echo $row_Recordset1['recordID']; ?>">
<span id="sprycheckbox1" onfocus="MM_openBrWindow('electronic-sig-agreement.php','electronicsi gagreement','width=400,height=250')">
<span class="body-text">Electronically Sign</span><br />
<input type="image" src="../images/smalldownload.png" width="35" height="35" alt="download" value="submit"/>
</a>
<input type="checkbox" name="elease" id="elease" />
<br />
<span class="checkboxRequiredMsg" onclick="MM_openBrWindow('electronic-sig-agreement.php?userid=<?php echo $row_Recordset1['userid']; ?>','electronicsignatureagreement','width=410,height=260')">confirm you have read our terms</span></span>
</form>
sorry that was some code i tried to open it up in another window here it is without the MM_openBrWindow
<span id="sprycheckbox2">
<span class="body-text">Electronically Sign</span><br />
<input type="image" src="../images/smalldownload.png" width="35" height="35" alt="download" value="submit"/>
</a>
<input type="checkbox" name="leaseshedule" id="leaseshedule" />
<label for="leaseshedule2"></label>
<br />
<span class="checkboxRequiredMsg">confirm you have read our terms</span></span>
the message currently sits in the span class="checkboxRequiredMsg
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://labs.adobe.com/technologies/spry/includes_minified/SpryValidationCheckbox.js"></script>
<link href="http://labs.adobe.com/technologies/spry/widgets/checkboxvalidation/SpryValidationCheckbox.css" rel="stylesheet">
<style>
#ErrorZone {
width: 240px;
text-align: center;
position: absolute;
top: 300px;
left: 50%;
margin-left: -120px;
}
</style>
</head>
<body>
<form id="form" action="" method="post">
<p id="sprycheckbox1">
<input type="checkbox" name="one" id="one">
<label for="one">One</label>
</p>
<p><input name="" type="submit"></p>
</form>
<div id="ErrorZone"><span class="checkboxRequiredMsg">confirm you have read our terms</span></div>
<script type="text/javascript">
var sprycheckbox1 = new Spry.Widget.ValidationCheckbox("sprycheckbox1", {additionalError: 'ErrorZone'});
</script>
</body>
</html>
Gramps
hello, i have another quick question
i have followed the above and it works perfectly. however i cans add any formatting to the #ErrorZone because if i add a border or Padding it is visible on the page even before the contents is shown in the div so i need to hide it the show it when the checkbox is clicked
thanks
Change the selector from #ErrorZone to #ErrorZone.checkboxRequiredState .checkboxRequiredMsg as in the following
#ErrorZone.checkboxRequiredState .checkboxRequiredMsg {
color: brown;
font-weight: bold;
background: yellow;
border: 1px solid green;
padding: 20px;
width: 240px;
text-align: center;
position: absolute;
top: 300px;
left: 50%;
margin-left: -120px;
}
Gramps
Please have a look here http://pleysier.com.au/fortis/
Right click on the page and choose View Source or similar to view the source code.
Gramps
North America
Europe, Middle East and Africa
Asia Pacific