PDA

Click to See Complete Forum and Search --> : how do i create a link that works with a checkbox

zog953
06-23-2006, 07:25 AM
Hi,

i want to create a link that works only when the user has checked the checkbox, and when they haven't i would like a message to appear asking them to do so.

can anyone please help me?

many thanks
MstrBob
06-23-2006, 10:57 AM
This requires some Javascript to get working accurrately. You run a funciton to disable the button on the start of the page, and then have another function change the disabled value of the button depending on wether the checkbox is clicked or not. This could be changed to work with a link as well. Basically, your standard page would look something like this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Content-Style-Type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title>Example</title>
<script type="text/javascript">
<!--
function okay(elm)
{
if(elm.checked)
{
document.getElementById('proceed').removeAttribute('disabled');
} else {
document.getElementById('proceed').setAttribute('disabled','disabled');
}
}

window.onload=function()
{
document.getElementById('proceed').setAttribute('disabled','disabled');
}
// -->
</script>
<style type="text/css">
<!--
label, textarea {
display:block;
}
fieldset {
border:none;
}
-->
</style>
</head>
<body>
<form action="newpage.html" method="GET">
<fieldset>
<legend>Terms and Conditions</legend>
<textarea readonly="readonly" name="tac" id="tac" rows="7" cols="30">Terms and conditions go here...</textarea>
<label>I Agree<input type="checkbox" id="agree" name="agree" onchange="okay(this);"></label>
<input type="submit" id="proceed" name="proceed" value="Continue On">
</fieldset>
</form>
</body>
</html>
zog953
06-24-2006, 04:38 AM
I tried to break down what you showed me although i couldn't get it to work. Could you take a look at my code and see if there is a way to do this.

basically i don't want the user to continue via the "Enter" link until they have ticked the checkbox.

thanks!





<!DOCTYPE html
public"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3org/1999/xhtml">

<head>
<meta http-equiv="content-type" content= "text/html; charset=utf-8" />
<title>Fund Alliance International</title>
</head>

<style typre=tect/css">body{background-color: #FFFFFF;}</style>
<basefont size="+2" color="#191970" face="Arial">

<style type="text/css">
a {text-decoration:none}
a:link {color: #191970}
a:visited {color: #191970}
a:hover {color: #7C9BCF}
a:active {color: #191970}
</style>




<table border="0" align="center" width="800">
<tr>
<td align="center">
<img src="logo_s.jpg"/>
</td>
</tr>


<tr>
<td align="center">
<p><b>Offshore Investment Fund Distribution through Global Investment Professionals</b></p>
<br><br>
</td>
</tr>


<tr>
<td align="center" bgcolor="#C0C0C0">
<p><b>IMPORTANT INFORMATION</b></p>
</td>
</tr>


<tr>
<td align="center">
<br>
<p>The information contained within this website is for the information of prospective and existing clients of Fund Alliance International Limited. It is not intended as an offer or solicitation to buy or sell securities, by anyone in any jurisdiction in which such offer, solicitation or distribution would be unlawful or in which the person making such offer or solicitation is not qualified to do so or to anyone to whom it is unlawful to make such an offer or solicitation.
</p>

<p>The information contained on this website is published in good faith but no representation or warranty, express or implied, is made by Fund Alliance or any person as to its accuracy or completeness and it should not be relied on as such. <b>This publication is subject to change without notice</b>.
</p>

<p>The distribution of information contained on this website in certain countries may be restricted by law or regulation and accordingly, persons who access it are required to inform themselves of and comply with any such restrictions. Persons interested in making any investment or accepting any service detailed in this website should inform themselves as to (i) the legal and regulatory requirements within their country of nationality, residence or domicile, (ii) the tax consequences which might be relevant to the acquisition, holding or disposal of any investment and (iii) any other requirement or restriction which they may encounter.
</p>

<p>Without prejudice to the generality of the above, unless the specified product or service provides otherwise, Fund Alliance is unable to accept business from US investors.
</p>
<br>
</td>
</tr>


<tr>
<td align="center">
<form>
<input type="checkbox" name="read and understood">
<b>I confirm that I have read and understand the important information</b>
</form>

</td>
</tr>

<tr>
<td align="center">
<a href="home.html">ENTER</a>
</td>
</tr>


<tr>
<td align="center">
<br>
<table border="0" width="100%" align="center">

<tr>
<td colspan="19"><hr></td>
</tr>

<tr>
<td><img src="usa_sh.jpg" width="50" alt="United States of America"></td>
<td width="10"></td>
<td><img src="union_jack_sh.jpg" width="50" alt="Great Britain"></td>
<td width="10"></td>
<td><img src="south_africa_sh.jpg" width="50" alt="South Africa"></td>
<td width="10"></td>
<td><img src="jersey_sh.jpg" width="50" alt="Jersey"></td>
<td width="10"></td>
<td><img src="japan_sh.jpg" width="50" alt="Japan"></td>
<td width="10"></td>
<td><img src="isle_of_man_sh.jpg" width="50" alt="Isle Of Man"></td>
<td width="10"></td>
<td><img src="hong_kong_sh.jpg" width="50" alt="Hong Kong"></td>
<td width="10"></td>
<td><img src="guernsey_sh.jpg" width="50" alt="Guernsey"></td>
<td width="10"></td>
<td><img src="european_union_sh.jpg" width="50" alt="European Union"></td>
<td width="10"></td>
<td><img src="china_sh.jpg" width="50" alt="China"></td>
</tr>

<tr>
<td colspan="19"><hr></td>
</tr>

</table>
</td>

</tr>
</table>

</html>
MstrBob
06-24-2006, 11:26 AM
Okay, try this. The only changes to your code are the addition of ID's to your checkbox and enter link (So that Javascript can access them via the DOM easily) and the javascript from before, slightly modified. if you Follow the javascript, then we are hiding the link unless the checkbox is clicked.


<!DOCTYPE html
public"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3org/1999/xhtml">

<head>
<meta http-equiv="content-type" content= "text/html; charset=utf-8" />
<title>Fund Alliance International</title>
</head>

<style type="text/css">body{background-color: #FFFFFF;}</style>

<style type="text/css">
a {text-decoration:none}
a:link {color: #191970}
a:visited {color: #191970}
a:hover {color: #7C9BCF}
a:active {color: #191970}
</style>
<script type="text/javascript">
function checker(elm)
{
if(elm.checked)
{
document.getElementById('enterLink').removeAttribute('style');
} else {
document.getElementById('enterLink').setAttribute('style','display:none;');
}
}
window.onload=function()
{
checker(document.getElementById('read_and_understood'));
}
</script>


<table border="0" align="center" width="800">
<tr>
<td align="center">
<img src="logo_s.jpg"/>
</td>
</tr>


<tr>
<td align="center">
<p><b>Offshore Investment Fund Distribution through Global Investment Professionals</b></p>
<br><br>
</td>
</tr>


<tr>
<td align="center" bgcolor="#C0C0C0">
<p><b>IMPORTANT INFORMATION</b></p>
</td>
</tr>


<tr>
<td align="center">
<br>
<p>The information contained within this website is for the information of prospective and existing clients of Fund Alliance International Limited. It is not intended as an offer or solicitation to buy or sell securities, by anyone in any jurisdiction in which such offer, solicitation or distribution would be unlawful or in which the person making such offer or solicitation is not qualified to do so or to anyone to whom it is unlawful to make such an offer or solicitation.
</p>

<p>The information contained on this website is published in good faith but no representation or warranty, express or implied, is made by Fund Alliance or any person as to its accuracy or completeness and it should not be relied on as such. <b>This publication is subject to change without notice</b>.
</p>

<p>The distribution of information contained on this website in certain countries may be restricted by law or regulation and accordingly, persons who access it are required to inform themselves of and comply with any such restrictions. Persons interested in making any investment or accepting any service detailed in this website should inform themselves as to (i) the legal and regulatory requirements within their country of nationality, residence or domicile, (ii) the tax consequences which might be relevant to the acquisition, holding or disposal of any investment and (iii) any other requirement or restriction which they may encounter.
</p>

<p>Without prejudice to the generality of the above, unless the specified product or service provides otherwise, Fund Alliance is unable to accept business from US investors.
</p>
<br>
</td>
</tr>


<tr>
<td align="center">
<form>
<label><input type="checkbox" id="read_and_understood" name="read_and_understood" onchange="checker(this);">
<b>I confirm that I have read and understand the important information</b></label>
</form>

</td>
</tr>

<tr>
<td align="center">
<a href="home.html" id="enterLink">ENTER</a>
</td>
</tr>


<tr>
<td align="center">
<br>
<table border="0" width="100%" align="center">

<tr>
<td colspan="19"><hr></td>
</tr>

<tr>
<td><img src="usa_sh.jpg" width="50" alt="United States of America"></td>
<td width="10"></td>
<td><img src="union_jack_sh.jpg" width="50" alt="Great Britain"></td>
<td width="10"></td>
<td><img src="south_africa_sh.jpg" width="50" alt="South Africa"></td>
<td width="10"></td>
<td><img src="jersey_sh.jpg" width="50" alt="Jersey"></td>
<td width="10"></td>
<td><img src="japan_sh.jpg" width="50" alt="Japan"></td>
<td width="10"></td>
<td><img src="isle_of_man_sh.jpg" width="50" alt="Isle Of Man"></td>
<td width="10"></td>
<td><img src="hong_kong_sh.jpg" width="50" alt="Hong Kong"></td>
<td width="10"></td>
<td><img src="guernsey_sh.jpg" width="50" alt="Guernsey"></td>
<td width="10"></td>
<td><img src="european_union_sh.jpg" width="50" alt="European Union"></td>
<td width="10"></td>
<td><img src="china_sh.jpg" width="50" alt="China"></td>
</tr>

<tr>
<td colspan="19"><hr></td>
</tr>

</table>
</td>

</tr>
</table>

</html>
zog953
06-26-2006, 09:06 AM
thank you for your help, sorted it!