Form Validation - check box with Javascript

Question

I have some information I am trying to validate when a user clicks a "confirm" check box. The issue is this is data pulled in from an Access database so the form field IDs have variables. Here is the check box I am using to trigger the event:

<INPUT TYPE="checkbox" id="checkconfirm<%=j%>" NAME="confirm<%=j%>" align="center" value="Yes" onclick="ConfirmBoxChecked(this.form.confirm<%=j%>.name,this.form.confirmYear<%=j%>.value,this.form.confirmStatus<%=j%>.value)">

Where j is each record pulled from the access database (so the first record checkbox is checkconfirm1, second record checkconfirm2, etc.).

confirmYear and confirmStatus are two pieces of data I'm checking.

My javascript onclick function is like this:

function ConfirmBoxChecked(confirmbox, yearz, statuz) {
    var datecheck = new Date;
    //alert("Working! " + yearz + " working " + confirmbox + " working " + statuz + " working " + datecheck.getFullYear() + " working ");
    var boxname = "\'" + confirmbox + "\'"
    alert(boxname);
    if (statuz=="P" && (yearz < datecheck.getFullYear())) {
        alert("This fleet was delivered in " + yearz + " but is still listed as 'Potential Order'.  Please edit the year or status of these vehicles.");
        document.getElementByID(boxname).checked=false;
    }
    if (statuz=="O" && (yearz < datecheck.getFullYear())) {
        alert("This fleet was delivered in " + yearz + " but is still listed as 'On Order'. Please edit the year or status of these vehicles.");
        return false; 
    }
    if (statuz=="A" && yearz > datecheck.getFullYear() - 1) {
       alert("You have entered vehicles with status=''Active'', but with a model year of " + yearz + ". Your responses should reflect the status of these vehicles on 1/1/" + daty.getFullYear() + ".\nVehicles being delivered in " + daty.getFullYear() + " or in later years should be ''On Order'' or ''Potential'' based on the contract status. Please correct the year or status of these vehicles.");
        return false; 
    }
}

It looks to me like the validation works properly - the alert after the IF fires properly. But I want the check box to then be UNCHECKED after that alert fires. I can't figure out how to do it.

OK, here's what fixed it. Instead of pulling through the name, I pulled through the element. So the input code looks like:

<INPUT TYPE="checkbox" id="checkconfirm<%=j%>" NAME="confirm<%=j%>" align="center" value="Yes" onClick="ConfirmBoxChecked(this,this.form.confirmYear<%=j%>.value,this.form.confirmStatus<%=j%>.value)">

And then the function code looks like:

function ConfirmBoxChecked(confirmbox, yearz, statuz) {
var datecheck = new Date;
//alert("Working! " + yearz + " working " + confirmbox + " working " + statuz + " working " + datecheck.getFullYear() + " working ");
//var boxname = "\"" + confirmbox + "\""
//alert(boxname);
            if (statuz=="P" && (yearz < datecheck.getFullYear())) {
                alert("This fleet was delivered in " + yearz + " but is still listed as 'Potential Order'.  You must edit the year or status of these vehicles before you can confirm.");
                confirmbox.checked = false; }
            if (statuz=="O" && (yearz < datecheck.getFullYear())) {
                alert("This fleet was delivered in " + yearz + " but is still listed as 'On Order'. You must edit the year or status of these vehicles before you can confirm.");
                confirmbox.checked = false;  }
            if (statuz=="A" && yearz > datecheck.getFullYear() - 1) {
                alert("You have entered vehicles with status=''Active'', but with a model year of " + yearz + ". Your responses should reflect the status of these vehicles on 1/1/" + daty.getFullYear() + ".\nVehicles being delivered in " + daty.getFullYear() + " or in later years should be ''On Order'' or ''Potential'' based on the contract status. Please correct the year or status of these vehicles.");
                confirmbox.checked = false;  }

}

And it works!

So your actual question is "How do I get the check box to then be UNCHECKED after that alert fires?" — colecmc
– colecmc, Commented Jan 19, 2016 at 23:59

medinasod · Accepted Answer · 2016-01-20 00:27:52Z

2

You're passing the name property of the checkbox as the confirmbox parameter in your function. Then in your code you're calling getElementById(confirmbox), which is not the id. Try passing the id property instead:

<INPUT TYPE="checkbox" id="checkconfirm<%=j%>" NAME="confirm<%=j%>" align="center" value="Yes" onclick="ConfirmBoxChecked(this.id,this.form.confirmYear<%=j%>.value,this.form.confirmStatus<%=j%>.value)">

edited Jan 20, 2016 at 0:27

answered Jan 20, 2016 at 0:22

medinasod

3753 silver badges9 bronze badges

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

Comments

colecmc · Accepted Answer · 2016-01-20 00:36:23Z

1

You can easily set the html checked attribute on the checkbox in order to update the value. If you later on need to remove it, use removeAttribute method.

(function(checks){
  var doCheck = function(checkbox) {
return checkbox.setAttribute('checked', '');
  }, unCheck = function(checkbox) {
return checkbox.removeAttribute('checked');
  };
  checks = Array.prototype.slice.call(checks);

  checks.forEach(unCheck);
}(document.querySelectorAll('.confirm-checks')));

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Form Validation - check box with Javascript</title>
</head>
<body>

  <input type="checkbox" id="checkconfirm400" class="confirm-checks" />
  
</body>
</html>

answered Jan 20, 2016 at 0:36

colecmc

3,3283 gold badges23 silver badges34 bronze badges

1 Comment

Matthew Dickens Over a year ago

This answer was also helpful. Thanks!

Collectives™ on Stack Overflow

Form Validation - check box with Javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related