2 Ways to Ensure a Checkbox Is Checked

Here are two different ways to ensure a checkbox is checked.

Perhaps you have an "I agree to the terms of service" checkbox, or "I give you the rights to publish my comments." The checkbox must be checked before the form is submitted.

If your form processing software won't, or can't easily be told to require the checkbox field to be checked, there is a work-around. More than one.

1. The "Missing Button" method.

2. The "Wrong Action" method.

In the sections for both of the two methods are:

• A description of the method.

• The source code of the method.

• Instructions for implementing the method.

Each requires JavaScript to work. Therefore, consider providing a noscript tag with a "JavaScript is required to use this form" message for users with those browsers.

If JavaScript is not enabled for the browser, the form won't submit or won't submit correctly.

The "Missing Button" Method

The submit button can be made unavailable unless the checkbox is checked. If the checkbox is subsequently unchecked, the submit button disappears again.

Here is an example:

When the checkbox is checked, the submit button is available. Otherwise, it isn't.

Below is the source code of the above "missing button" method example. Implementation instructions follow.

Note that the following source code was changed from the code used in the example to remove the attribute that prevents the form from submitting and the "Example only" message when the submit button is clicked.

<form method="post" action="script.php">
<input type="checkbox" id="required-checkbox" name="agree" onclick="CheckIfChecked()"> Will is a good programmer!
<div id="submit-button-container" style="display:none;">
<input type="submit" value="Submit Button">
</div>
</form>

<noscript>
<p style="font-size:larger;"><b>JavaScript is required to use this form.</b></p>
</noscript>

<script type="text/javascript"><!--
function CheckIfChecked()
{
   var CheckboxID = "required-checkbox";
   var SubmitButtonContainerID = "submit-button-container";
   if( document.getElementById(CheckboxID).checked ) { document.getElementById(SubmitButtonContainerID).style.display = "block"; }
   else { document.getElementById(SubmitButtonContainerID).style.display = "none"; }
}
CheckIfChecked();
//-->
</script>

Implementation Instructions

In the above code, you'll see a form, a noscript tag, and some JavaScript.

The submit button form tag is in a div that displays only when the checkbox is checked. Both the checkbox field and the div containing the submit button have an id value.

The id value of the checkbox field is in red text. The value is in both the form and the JavaScript. The value in both locations needs to be identical.

The id value of the submit button containing div is in blue text. The value is in both the form and the JavaScript. The value in both locations needs to be identical.

The checkbox field also has an onclick="CheckIfChecked()" attribute.

Implementation steps for your live form:

1. Transfer the checkbox id value and onclick attribute of the example form code to your live form.

2. Put the submit button of your live form into a div with an id.

3. Insert the JavaScript somewhere below your live form.

4. Ensure the id values of the checkbox and the submit button containing div match the id values in the JavaScript.

You should now be good to go. But test the form to make sure.

The "Wrong Action" Method

The form's action URL is changed when the form is submitted with the checkbox checked.

When the web page loads, the form's action URL is to a location other than the right one. The incorrect URL might be to a web page explaining that the checkbox must be checked, for example. Or, the URL might be to the domain's home page.

When the form is submitted, JavaScript checks if the checkbox is checked. If it is checked, the form's action URL is changed to the correct one.

This example form will submit to the willmaster.com home page if submitted without the checkbox checked. Otherwise, it will submit to the software index page. (The example opens a new window when the form is submitted, a feature probably unneeded for your live form.)

Note: Once the form action URL is changed and the submit button clicked, the URL remains as changed. coming back to the page with the browser's "back" button and unchecking the checkbox doesn't change the URL back.

Below is the source code of the above "wrong action" method example. Implementation instructions follow.

Note that the following source code was changed from the code used in the example to remove the attribute that loads the next page in a new window.

<form id="form-id" method="post" action="https://www.willmaster.com/" onsubmit="ChangeActionIfChecked();">
<input type="checkbox" id="the-required-checkbox" name="agree"> Will is a good programmer!<br>
<input type="submit" value="Submit Button">
</form>

<noscript>
<p style="font-size:larger;"><b>JavaScript is required to use this form.</b></p>
</noscript>

<script type="text/javascript"><!--
function ChangeActionIfChecked()
{
   var FormTagID = "form-id";
   var CheckboxID = "the-required-checkbox";
   var CorrectURL = "https://www.willmaster.com/software/";
   if( document.getElementById(CheckboxID).checked ) { document.getElementById(FormTagID).action = CorrectURL; }
}
//-->
</script>

Implementation Instructions

In the above code, you'll see a form, a noscript tag, and some JavaScript.

Both the form tag and the checkbox field have an id value.

The id value of the form tag is in red text. The value is in both the form tag and the JavaScript. The value in both locations needs to be identical.

The form tag's action value is in purple text. The value is the URL where the form is submitted to if the checkbox is never checked. Change the URL as appropriate for your installation.

The form tag's onsubmit attribute is in gold text.

The id value of the checkbox field is in blue text. The value is in both the checkbox field and the JavaScript. The value in both locations needs to be identical.

In the JavaScript, specify the URL for the form tag's action when the form is submitted with the checkbox checked. The example is in green text in the JavaScript.

Implementation steps for your live form:

1. Insert the JavaScript somewhere below the live form.

2. Transform the live form tag's action URL to the JavaScript, replacing the URL marked with green text in the above source code.

3. Replace the live form tag's action URL with the URL of the page the browser shall be sent to if the checkbox isn't checked.

4. Transfer the form tag id value and onsubmit attribute of the example form code to your live form.

5. Transfer the checkbox id value of the example form code to your live form.

6. Ensure the id values of the form tag and the checkbox match the id values in the JavaScript.

You should now be good to go. But test the form to make sure.

Either of the two methods can be used to require a checkbox to be checked before a form is submitted. It is useful when the software the form is submitted to doesn't block the submission when the checkbox is unchecked.

Will Bontrager