PDA

View Full Version : Having some issues getting a 'Agree to terms.." checkbox working properly



BlackReef
Jul 10th, 2010, 12:54 AM
Hello,

I've looked at a few tutorials and they have gotten me like 75% there, but I am having some issues.

Basically all I want to do is have a submit button - but it's greyed out until the user clicks on the 'I agree that I am a US Citizen' checkbox. Only after they check the checkbox will they be able to click on the button.

First issue - I notice that the box is clickable now even if you don't mark the checkbox

Second - not sure how to turn this button into a link to another page? Any time I try and hyperlink the button in dreamweaver it doesn't quite work

Please excuse my inexperience with this. Any help would be appreciated

Here is the code as it stands now:


<head>
<style>

.button{
color:#fff;
font-size:11px;
background-color: #A99A89;
}

</style>
<script>
var checkobj

function agreesubmit(el){
checkobj=el
if (document.all||document.getElementById){
for (i=0;i<checkobj.form.length;i++){ //hunt down submit button
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 read/accept terms to submit form")
return false
}
}
}

</script>
</head><div style="text-align: center;"><img src="../pc/catalog/shop_services_barrel_threading_good.gif"><br><img src="../pc/catalog/customer.gif"><br><table style="border-collapse: collapse; width: 865px; margin-left: 25px; margin-right: 25px; border: medium none;" align="" width=""><tbody><tr><td style="border: medium none;"><div style="text-align: center;">
<p><img src="../pc/catalog/cat.png"><p><a href="http://XXX.com.mytempweb.com/store/pc/pdf/XXX.pdf" target="_blank"><span style="font-weight: bold; font-size: 12pt;">Download a .pdf copy of the most current XXXX catalog</span></a><br>
<span style="font-size: 8pt;">(All rights reserved, copyright does not allow copy or reproduction for distribution, only personal use.)</span><br>

<p>&nbsp;
<p><br>

<p><br><p><br><p><img src="../pc/catalog/info.png"><span style="font-weight: bold; color: rgb(165, 76, 10);">
</span><p><span style="font-weight: bold; color: rgb(165, 76, 10);">Technical Manuals and Info Sheets are
for U.S. Citizens and Government use only.</span><br>

<form name="agreeform" onSubmit="return defaultagree(this)">
<span class="style1">Download .pdf copies of XXXX Info Sheets or XXXX Technical Manuals for your suppressor after certifying your nationality below.</span><span class="style1"><br>
</span><br>
<input name="agreecheck" type="checkbox" onClick="agreesubmit(this)">
<b>I agree that I am a U.S. Citizen</b><br>
<br>
<input type="Submit" class="button" value="Click here to download Technical Manuals" disabled >
</form>

<script>
document.forms.agreeform.agreecheck.checked=false
</script>

<p>&nbsp;
<p><span style="font-size: 8pt;">(All rights reserved, copyright does not allow copy or reproduction for distribution, only personal or government client instructional use.)</span><br>
<span style="font-size: 8pt;"></span>
</div><br><span style="font-weight: bold;"></span><br></td></tr></tbody></table><br></div>

VIPStephan
Jul 10th, 2010, 01:19 AM
I’m not gonna go into detail here but a few more general suggestions that might give you some hints:


Don’t use WYSIWYG editors to create advanced layouts and/or functionality for you, they are mostly writing crappy code that is a pain to debug eventually.
If you have a form make sure it works properly without JavaScript and CSS. That means: have some proper back-end script validation (e. g. ASP, PHP, JSP, ColdFusion, …) before you approach to implement any front-end functionality.
You can’t put a submit button into a hyperlink. You have to write a server side script that sets the location to the other page on submit (for example with PHP (http://php.net/manual/en/function.header.php)).
Always use a doctype (http://www.alistapart.com/articles/doctype/) (either HTML strict or XHTML strict mode, nothing else is necessary or acceptable).
Validate your HTML. (http://validator.w3.org/) You can’t expect proper functionality if the code isn’t correct.
Your script and style elements are missing the required type attributes.
Use labels together with form controls where applicable. For example the checkbox needs a label for better usability and accessibility (that’s not really related to the problem, though).
Your button isn’t being grayed out automatically when you’ve already styled it other than its default styles. You have to write specific CSS for disabled buttons.


And by the way: testing your code with a proper doctype and valid HTML showed that the disabling/enabling actually works (with JS enabled, at least, which, alone, is not enough, as I’ve mentioned already).

BlackReef
Jul 13th, 2010, 09:21 AM
Iím not gonna go into detail here but a few more general suggestions that might give you some hints:


Donít use WYSIWYG editors to create advanced layouts and/or functionality for you, they are mostly writing crappy code that is a pain to debug eventually.
If you have a form make sure it works properly without JavaScript and CSS. That means: have some proper back-end script validation (e. g. ASP, PHP, JSP, ColdFusion, Ö) before you approach to implement any front-end functionality.
You canít put a submit button into a hyperlink. You have to write a server side script that sets the location to the other page on submit (for example with PHP (http://php.net/manual/en/function.header.php)).
Always use a doctype (http://www.alistapart.com/articles/doctype/) (either HTML strict or XHTML strict mode, nothing else is necessary or acceptable).
Validate your HTML. (http://validator.w3.org/) You canít expect proper functionality if the code isnít correct.
Your script and style elements are missing the required type attributes.
Use labels together with form controls where applicable. For example the checkbox needs a label for better usability and accessibility (thatís not really related to the problem, though).
Your button isnít being grayed out automatically when youíve already styled it other than its default styles. You have to write specific CSS for disabled buttons.


And by the way: testing your code with a proper doctype and valid HTML showed that the disabling/enabling actually works (with JS enabled, at least, which, alone, is not enough, as Iíve mentioned already).

Thanks for your reply.

Ok, well - I followed a online tutorial to setup this checkbox deal.

I will admit that this is a bit above my head as I have never done anything like this, but Im trying to learn.

Basically all the customer wants is a small check box that one must check in order to click on a link.

In this case, the checkbox confirms your nationality before the link becomes active.

Thanks for your time and patience with me