How To Use JavaScript To Ensure Users Agree Before Posting

Often, you may need to make sure that visitors to your site agree to specific terms of service before they submit a form. You may need to do so for legal reasons before they upload a file, add an image, or submit a comment. In this tutorial, we will show you how to use JavaScript to disable all the fields on a form until a user agrees to your terms.

We’re going to show you a script that we found on our own discussion forums that allows you to do just that.

First, here’s the form in action. As you can see, you are presented with a checkbox that you can check to show that you have accepted the terms of the site. Once it is clicked, you are able to enter data into the form. If you do not click the checkbox, you are not permitted to enter any text into the form. If you try to enter text, and then deselect the form, you will again not be allowed to enter data into the form, or submit the form.’

---

To accept the license terms for posting, click the checkbox below:

I Accept

Name:
E-Mail:
Post:

---

Here’s the code that is used within the HTML page:

<script type=”text/javascript” src=”https://www.htmlgoodies.com/img/2010/09/agreeBeforePosting.js”></script>

<form name=”myform”>

<p>To accept the license terms for posting, click the checkbox below:<P>

<input type=”checkbox” name=”mycheck” onclick=”toggleform(‘document.myform’,’mycheck’,’pname,pemail,ptext’)”> I Accept</p>

<table>

<tr>

<td><b>Name:</b></td><td><input type=”textbox” id=”pname” name=”pname” disabled=”true”></td>

</tr><tr>

<td><b>E-Mail:</b></td><td><input type=”textbox” name=”pemail” disabled=”true”></td>

</tr><tr>

<td><b>Post:</b></td><td><textarea name=”ptext” disabled=”true”></textarea></td>

</tr>

</table>

</form>

Although we could have added the JavaScript within the page, we prefer to use an external file for the JavaScript code, so we can easily use it on other pages. The file is called “agreeBeforePosting.js” and contains the following code:

function enableob(o) { eval(o+”.disabled = false”); }

function disableob(o) { eval(o+”.disabled = true”); }

function toggleform(formstr,chkobstr,obstr) {

var checked = eval(formstr+”.”+chkobstr+”.checked”);

var obs = obstr.split(“,”);

  for (i = 0; i < obs.length; i++) {
  obs[i] = formstr+"."+obs[i];
  }
  if (checked == false) {
    for (i = 0; i < obs.length; i++) {
    disableob(obs[i]);
    }
  }
  else {
    for (i = 0; i < obs.length; i++) {
    enableob(obs[i]);
    }
    document.getElementById('pname').focus();
  }
}

You will want to save it into a file of that name, or you can grab it from here. Now that you have the code, you can add additional feilds to your form, by simply adding them to the onClick event of the checkbox…here is the code from above (from the code shown above):

(‘document.myform’,’mycheck’,’pname,pemail,ptext’)

And if you wanted to add an additional field for an address, for instance, you would add it like this (we have named the additional field paddress):

(‘document.myform’,’mycheck’,’pname,pemail,ptext,paddress’)

As you can see, by using a bit of JavaScript along with your form, you can ensure that your site’s visitors comply with your site’s terms of service, before they move on to use the features of your site (and more importantly, submit a form).