Require TOS Checkbox Checked

Sometimes, an agreement to terms of service must be acquired before a service is delivered.

A checkbox might be used to indicate agreement. JavaScript notifies the form user if form submission is attempted without the agreement box checked.

To catch browsers with JavaScript disabled, the submit button is disabled when the web page is loaded. JavaScript then enables the submit button. If JavaScript is disabled, the submit button remains disabled and a notice to turn JavaScript on is presented to the form user.

Here is an example.

The form's submit button will be enabled only if your browser's JavaScript is turned on. Further, the form won't submit until the agreement checkbox is checked.

(When the form does submit, it will submit to this same web page.)

The code to recreate the example and implementation instructions for your own forms follow this note.

Note: Even with the non-JavaScript browser catch, it might still be possible to recreate your form and submit it without the agreement checkbox checked. Although outside the scope of this article, it needs to be mentioned that it would be prudent for the form handling software to do its own verification to spot such attempts.

The Agreement-Required Example Code

Here's the source code to recreate the functionality of the example. Implementation instructions follow.

<form method="post" action="" onsubmit="return VerifyAgreement()">
<p>
Email address:<br>
<input type="email" style="width:100%; box-sizing:border-box;">
</p>
<p>
<input type="checkbox" id="agreement-box" value="yes"> I agree to the terms of service.
</p>
<p>
<input type="submit" id="submit-button" disabled="disabled" style="width:100%; box-sizing:border-box;" value="Submit form">
</p>
</form>

<noscript>
<h3>NOTE: JavaScript needs to be enabled to use this form. Thank you.</h3>
</noscript>

<script>
/* Next two variable values may need to be updated. */
var AgreementCheckboxIDvalue = "agreement-box";
var SubmitButtonIDvalue = "submit-button";
/* Verify above two variable values are correct. */

document.getElementById(SubmitButtonIDvalue).disabled = false;

function VerifyAgreement()
{
   if( document.getElementById(AgreementCheckboxIDvalue).checked ) { return true; }
   alert("The agreement checkbox needs to be checked.");
   return false;
}
</script>

Implementing an Agreement-Required Form

Implementation uses the above example source code for reference. The code has 3 sections.

1. The form.
2. The noscript section.
3. The script section.

i. The form.

In the form tag, specify the action attribute value as the URL to the software the form will submit to. (In the example, the value is blank.)

Also in the form tag is an onsubmit attribute. Keep it there. It causes the form to run the JavaScript VerifyAgreement() function when the submit button is clicked.

The checkbox field and the submit button both have an id value that the JavaScript needs to know about (see iii. The script section.). They are id="agreement-box" and id="submit-button".

The submit button also has a disabled="disabled" attribute to disable the submit button until the JavaScript enables it. Browser's with JavaScript turned off won't have the submit button enabled.

Those are the only form fields that require special attention.

ii. The noscript section.

Between the <noscript> and </noscript> tags, place the message you want to publish when the browser has JavaScript turned off.

iii. The script section.

The JavaScript has two places to customize, the id value of the terms-of-service checkbox and the id value of the submit button. In the example, they are

var AgreementCheckboxIDvalue = "agreement-box";
var SubmitButtonIDvalue = "submit-button";

Verify the values are correct.

Testing the Agreement-Required Form

When testing, test with a browser with JavaScript turned on and a browser with JavaScript turned off.

With JavaScript turned off, the submit button should stay disabled. With JavaScript turned on, the form should refuse to submit unless the terms-of-service checkbox is checked.

(This article first appeared in Possibilities ezine.)

Will Bontrager