CODEWITHSUNDEEP
javascripthtmlvalidation
Matthew Dickens
Matthew Dickens

Reputation: 33

Form Validation - check box with Javascript

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!

Upvotes: 2

Views: 86

Answers (2)

colecmc
colecmc

Reputation: 3318

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>

Upvotes: 1

medinasod
medinasod

Reputation: 375

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)">

Upvotes: 2

Related Questions