I will let you do all the formatting so that you can make it fit your theme. Also, you may want to change the name of the forms, since I use generic ones.
Add this into the head of your
HTML document.
Code:
<script language="Javascript" type="text/JavaScript">
function check(){
if (document.agreement_form.agreed.checked==''){
document.agreement_form.submit_button.disabled=true
}else{
document.agreement_form.submit_button.disabled=false
}
}
</script>
Let me break down the JavaScript really quick. Maybe it will help you understand it a little more.
This code
Code:
if (document.agreement_form.agreed.checked=='')
Is checking to see if the element named agreed inside the element named agreement_form is checked. So if you wanted, you can change the form (agreement_form) to anything you want, and you can change the part you want the user to click (agreed) to what ever you want.
Hopefully that makes the process a little clearer. Just remember that the document is the current page. Everything after that is element names until the part after the last period. That is the attribute we going to check for. So if we wanted we could go five elements deep into the document as long as we know the element names.
The same thing goes for the submit button.
Code:
document.agreement_form.submit_button.disabled=false
The difference here is that we are using JavaScript to change the value of disabled attribute. By default it is set to disabled (or true) in the
HTML code. So the if statement (listed above) checks to see if the element we are verifying is "active" or true. If so then we change the value of disable to false, or enable the button.
And this is the form that you can use.
Code:
<form name="agreement_form">
Name: <input type="text" name="Name" /><br />
Telephone: <input type="text" name="Tel" /><br />
Email: <input type="text" name="email" /><br />
Address: <input type="text" name="address" /><br />
Trade Required: <input type="text" name="trade" /><br />
Start Date: <input type="text" name="start_date" /><br />
End Date: <input type="text" name="end_date" /><br />
Work Needed <input type="text" name="work" /><br />
<input type="radio" onchange="check()" name="agreed"> I agree to all the terms and conditions shown under 'Our Policies'<br />
<input type="submit" disabled name="submit_button">
</form>
To make the code work we use a JavaScript event so that if the status of the element changes (in this case clicked) we run the function check. (Note, you can use onclick in this example, but onchange is more appropriate in this case sense we are checking the status of the element.)
Submit Your Article
Announcements
Contact
