PDA

View Full Version : Agree to Term and Condition check box


sandraa
01-31-2007, 05:36 AM
Hi guys!
I am trying to do the following: create a check box that the user has to check to agree to the terms and conditions of the product. So when the user tries to continue, he wont be able unless that box is checked.

Any help will be appreciated

Thanks!

davidj
01-31-2007, 06:38 AM
Hi... welcome to the forum

ok this depends on how strict you want this be

you can use Javascript or a serverside language to do this

serverside language (PHP, ASP etc) is more work and is more difficult to impliment but is the most secure and can check every page if you ticked the box. Javascript is very quick to develop but is easily defeated.
also PHP could record the tickbox status in a database but JS wont have a memory (unless you use cookies)

It is upto you really

i have wrote a small example for you in Javascript...

you need to set up an additional page called page2.htm this is where you goto when the box is ticked and the button pressed.

just copy the following code and paste into a blank page and call it what you like


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function agree(){
b = document.getElementById('btn');
c = document.getElementById('checkbox');
if(c.checked == true){

b.innerHTML = "<input type=\"button\" name=\"Button\" value=\"Next\" onClick = \"document.location.href='page2.htm' \"/>";

}else{

b.innerHTML = "<input type=\"button\" name=\"Button\" value=\"Next\" disabled=\"disabled\"/>"

}
}
</script>
</head>
<body>
<table width="417" height="202" border="1">
<tr>
<td height="152" colspan="2" valign="top"><p minmax_bound="true">The following is the terms of the agreement between [Name of Company] (&ldquo;Company&rdquo;) and the buyer (&ldquo;Buyer&rdquo;) of goods or services through the Company&rsquo;s Web site (the &ldquo;Site&rdquo;). If you do not agree to these terms, you will not be able to purchase anything, so please review these terms carefully:: </p>
<p minmax_bound="true">By accepting the Terms you are entering into a contract </p> </td>
</tr>

<tr>
<td width="174" height="42"> <label>
Accept the terms
<br />
<input type="checkbox" name="checkbox" value="checkbox" onclick="agree()"/>
<br />
</label> </td>
<td width="227" align="center">

<div id="btn">
<input type="button" name="Button" value="Next" disabled="disabled"/>
</div>

</td>
</tr>
</table>
</body>
</html>

domedia
01-31-2007, 12:43 PM
davidj, couldn't you just write a really short js snippet that read the value of the checkbox, and set the submit button attribute 'disabled' until it was checked?

domedia
01-31-2007, 01:28 PM
Like this:
<form action="result.php">
<input type="checkbox" onclick="getElementById('Qwrty').disabled=false;">
<input type="submit" disabled id="Qwrty">
</form>

davidj
01-31-2007, 01:43 PM
Have i over complicated the process ???

probably!

domedia
01-31-2007, 02:29 PM
I just happen to know the *very* basics of DOM scripting.. How would this look if you turned it into a function to place in the head of the document. It would probably be good to switch the ID of the submit button, so that the submit button could get disabled=true when the checkbox got clicked on again (unchecked)

davidj
01-31-2007, 02:33 PM
yes that is oneway

if you look to see what i am doing in my version i am just replacing the disabled button with a new one using the DOM and innerHTML

same sort of thing but maybe a bit long winded

i like innerHTML... im fond of it

so i supose its like adding too much chilli to a meal

sandraa
01-31-2007, 04:12 PM
LOL! you guys are great!
So, I still havent tried any options, which one would be easier for a beginner?
1st option? so I need a page two, which is where they will go once the box is checked, but do I put the code on another page?is that what you said? and what about the page where the box is? any code there?:confused: Sorry I am confused!LOL

And 2nd option? where do I put this code, anywhere on the page or specific? Do I have to name my button ( like instance name in action script??)
Thank you so much for your help!

Sandra

domedia
01-31-2007, 04:34 PM
err... something in your post tells me you're not familiar with this ;-)

Paste your page in here and we'll do the changes for you.

sandraa
01-31-2007, 05:25 PM
:roll: euh no, not really! I am more of a graphic designer, I have no problems building basic website...but when comes time to talk about codes.....:confused:
But I do have a big interest and I want to learn!!!!!...please....

davidj
01-31-2007, 05:26 PM
err just examined your example dom

senario...
if i was to click the checkbox then the button becomes un-disabled allowing me to proceed..

what if i uncheck the box !!

what would happen then?

domedia
01-31-2007, 05:42 PM
err just examined your example dom

senario...
if i was to click the checkbox then the button becomes un-disabled allowing me to proceed..

what if i uncheck the box !!

what would happen then?
Exactly, did you even read my previous posts? :)

domedia
01-31-2007, 05:43 PM
:roll: euh no, not really! I am more of a graphic designer, I have no problems building basic website...but when comes time to talk about codes.....:confused:
But I do have a big interest and I want to learn!!!!!...please....

Just paste your HTML page in here and someone will tell you what is needed.

davidj
01-31-2007, 05:45 PM
Exactly, did you even read my previous posts? :)

OOps

maybe not

appologies and a big naked hug!!!

sandraa
01-31-2007, 11:17 PM
This is the code I have for my check box

<td align="right" valign="top" class="texte">I agree with the <a href="termsandconditions.html">Terms and conditions</a>
<input name="checkbox" type="checkbox" class="texte" value="checkbox" /></td>
<td>&nbsp;</td>


So, what would be the best option? Thank you so much for you help!

sandraa
02-01-2007, 02:08 AM
Thank you for your help, I actually used the submit button and I learned something today!
thanks!
Sandra

sandraa
02-01-2007, 03:15 AM
Excuse my lack of knowledge but, when you said,
I just happen to know the *very* basics of DOM scripting.. How would this look if you turned it into a function to place in the head of the document. It would probably be good to switch the ID of the submit button, so that the submit button could get disabled=true when the checkbox got clicked on again (unchecked)

Could you explain me the code to do this????
PLEASE!!!!?????

davidj
02-01-2007, 05:53 AM
this is the function.. needs to go between the HEAD tags



<script language="javascript" type="text/javascript">

function agree(){
b = document.getElementById('btn');
c = document.getElementById('checkbox');
if(c.checked == true){

b.innerHTML = "<input type=\"button\" name=\"Button\" value=\"Next\" onClick = \"document.location.href='page2.htm' \"/>";

}else{

b.innerHTML = "<input type=\"button\" name=\"Button\" value=\"Next\" disabled=\"disabled\"/>"

}
}
</script>



here is the table with a checkbox and stuff... Paste this in your <BODY tag

<table width="417" height="202" border="1">
<tr>
<td height="152" colspan="2" valign="top"><p minmax_bound="true">The following is the terms of the agreement between [Name of Company] (&ldquo;Company&rdquo;) and the buyer (&ldquo;Buyer&rdquo;) of goods or services through the Company&rsquo;s Web site (the &ldquo;Site&rdquo;). If you do not agree to these terms, you will not be able to purchase anything, so please review these terms carefully:: </p>
<p minmax_bound="true">By accepting the Terms you are entering into a contract </p> </td>
</tr>

<tr>
<td width="174" height="42"> <label>
Accept the terms
<br />
<input type="checkbox" name="checkbox" value="checkbox" onclick="agree()"/>
<br />
</label> </td>
<td width="227" align="center">

<div id="btn">
<input type="button" name="Button" value="Next" disabled="disabled"/>
</div>

</td>
</tr>
</table>

domedia
02-01-2007, 01:41 PM
This is the code I have for my check box

<td align="right" valign="top" class="texte">I agree with the <a href="termsandconditions.html">Terms and conditions</a>
<input name="checkbox" type="checkbox" class="texte" value="checkbox" /></td>
<td>&nbsp;</td>


So, what would be the best option? Thank you so much for you help!

Sandra can you post your whole form, or let me know if what davidj got going worked for you.