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 ?

Note you add return function and pass "this" on submit button not on checkbox, so the condition "checkbox.checked == false" applied to submit button not checkbox, Rob W solution will solve your problem :) — Al-Mothafar
– Al-Mothafar, Commented Oct 23, 2011 at 14:38

Rob W · Accepted Answer · 2011-10-23 14:33:03Z

12

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;
    }
}

answered Oct 23, 2011 at 14:33

Rob W

350k87 gold badges811 silver badges683 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Guffa · Accepted Answer · 2011-10-23 14:36:21Z

1

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>

answered Oct 23, 2011 at 14:36

Guffa

703k111 gold badges760 silver badges1k bronze badges

Comments

Bao Nhan · Accepted Answer · 2011-10-23 14:37:55Z

1

Because you added that function in the onclick of the submit button, value of 'this' is not referring to the checkbox that you expect to receive it in the function. You can replace 'this' by document.getElementById('acknowledgement')

answered Oct 23, 2011 at 14:37

Bao Nhan

1807 bronze badges

Collectives™ on Stack Overflow

Javascript checkbox checking

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related