Disable Form Submit Until Required

Sometimes you might want the submit button on a form disabled until the user has filled in mandatory checkboxes. A good example of this would be if you had terms and conditions that needed to be read/agreed to before commencing with the form submission. This would need to be checked server-side as well of course to be absolutely certain.

Anyway, on to the script. There is nothing complicated about this at all. We simply disable the submit button on page load and then test the “checked” property of each checkbox by calling a simple function.

The Javascript

<script type="text/javascript">
window.onload = function() {
    document.getElementById("submit").disabled = true;
    document.getElementById("understand1").onclick = checkIt;
    document.getElementById("understand2").onclick = checkIt;
    document.getElementById("understand3").onclick = checkIt;
}
function checkIt() {
    if (document.all||document.getElementById) {
        if (document.getElementById("understand1").checked && document.getElementById("understand2").checked && document.getElementById("understand3").checked) {
            document.getElementById("submit").disabled = false;
        } else {
            document.getElementById("submit").disabled = true;
        }
    }
}
</script>

The HTML

<form>
    <input id="understand1" name="understand1" type="checkbox" />I understand the rules<br />
    <input id="understand2" name="understand2" type="checkbox" />I have read the above and understood it<br />
    <input id="understand3" name="understand3" type="checkbox" />I've told you, I understand!<br />
    <input id="submit" type="Submit" value="Let Me Submit This Form!" />
</form>

You can see an example here.

Category: Javascript // 1 CommentOpen my Lovebox

One Response to “Disable Form Submit Until Required”

Ricardo - Jun 23, 2010 at 7:47 pm

Why does the script only recognize html button id. It does not recognize the id in an ASP button.

This button works:

This button does not:

Thanks for sharing!

Ricardo

RSS

ElanMan