Javascript checkbox checking

Question

I would like to use Javascript to check if a checkbox has been checked and if the checkbox is not check, the submission form would not continue until it is checked. Below are my codes.

<SCRIPT language=javascript>
function checkAcknowledgement(checkbox){
    alert(checkbox.toString());
    if (checkbox.checked == false){
        alert('Please read through the acknowledgement and acknowledge it.');
        return false;
    } else {
        return true;
    }
}
</script>

<form action="ioutput.php" method="POST">
    <input name="form" type="hidden" id="form" value="true">
    ... some html form ...
    <input type="checkbox" id="acknowledgement" value="1" /><br><br>
    <input type="submit" value="submit" onclick="return checkAcknowledgement(this)"/>
</form>

Whenever the form is checked or not, it returns the alert warning that the form have not been checked despite me checking it manually. How should I fix it ?

Answer 1

You have to bind the event to the form instead of the submit button. Also, if you want the checkbox input to be submitted, attach a name instead of ID:

<input type="checkbox" name="acknowledgement" value="1" /><br><br>
<form action="ioutput.php" method="POST" onsubmit="return checkAcknowledgement(this)">

Then, modify the function:

function checkAcknowledgement(form){
    var checkbox = form["acknowledgement"];
    alert(checkbox); //shows [HTMLInputElement]
    if (!checkbox.checked){ //A shorter method for checkbox.checked == false
        alert('Please read through the acknowledgement and acknowledge it.');
        return false;
    } else {
        return true;
    }
}

Answer 2

You are checking if the submit button is checked, which it naturally never will be.

Send the form to the function rather than the submit button itself:

<input type="submit" value="submit" onclick="return checkAcknowledgement(this.form)"/>

You need a name on the checkbox to find it:

Use the form reference to access the checkbox:

<script type="text/javascript">

function checkAcknowledgement(frm){
  var checked = frm.acknowledgement.checked;
  if (!checked){
    alert('Please read through the acknowledgement and acknowledge it.');
  }
  return checked;
}

</script>