Assigning different values to a name in HTML checkbox input based on check status

Question

I have an input tag as follows as part of a form submission.

<input type=“checkbox” id=“allowcheatmode” name=allowCheatMode value=“NO” onchange=“allowCheatModes()”>

And allowCheatModes in a JS function

function allowCheatModes(){
   var x = document.getElementById(“allowcheatmode”).checked
   if (x) {
      document.getElementById(“allowcheatmode”).value = “YES”
   } else {
      document.getElementById(“allowcheatmode”).value = “NO”
   }

But this is not working when I am trying to print the allowcheatmode variable after form submission. What am I doing wrong here?

Quick guess: Don't you need to put your `if` `else` clause into the `function allowCheatModes()`? Otherwise: What would trigger your clause to be executed after a change? — Enak, Aug 19 '21 at 06:44
The `if ... else ...` should be _in_ `allowCheatModes()`. And changing the `.value` property of a checkbox doesn't "print" anything. — Andreas, Aug 19 '21 at 06:49
There should be an error in the console (and there will be more after fixing the the first) -> [How can I debug my JavaScript code?](https://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — Andreas, Aug 19 '21 at 06:54

DecPK · Accepted Answer · 2021-08-19T06:51:27.187

1

1) You have included an invalid character “ and ”. You should use " in both HTML and JS.

var x = document.getElementById(“allowcheatmode”).checked

2) There is no function named getElemenetById, instead use getElementById.

3) Add if-else code in the onChange function itself. So that it can trigger when checkbox value changes

NOTE I've added an extra label to just show the current state of the checkbox. You can skip that part.

function allowCheatModes() {
  var x = document.getElementById("allowcheatmode").checked
  if (x) {
    document.querySelector("label").textContent = "YES"
    document.getElementById("allowcheatmode").value = "YES"
  } else {
    document.querySelector("label").textContent = "NO"
    document.getElementById("allowcheatmode").value = "NO"
  }
}

<input type="checkbox" id="allowcheatmode" name="allowCheatMode" value="NO" onchange="allowCheatModes()">
<label for="allowcheatmode">NO</label>

edited Aug 19 '21 at 06:51

answered Aug 19 '21 at 06:48

DecPK

24,537
6
26
42

This works only when checkbox is checked. It is not working when it not checked – elliot Aug 19 '21 at 07:09
Sorry to say this. But it does not. When I submit the form in checked stage, It works fine and I am able to print the variable allowCheatMode at other places. But when it is not checked, the form submission itself does not complete. – elliot Aug 19 '21 at 07:40
Then you might need to add full code. This might help – DecPK Aug 19 '21 at 07:44
Thanks. This worked. Issue was at some other part of the code – elliot Aug 20 '21 at 07:41

score 0 · Answer 2 · answered Aug 19 '21 at 06:46

Shouldn't it be this:

function allowCheatModes(){
    var x = document.getElementById(“allowcheatmode”).checked
    if (x) {
        document.getElemenetById(“allowcheatmode”).value = “YES”
    } else {
         document.getElemenetById(“allowcheatmode”).value = “NO”
    }
}

score 0 · Answer 3 · answered Aug 19 '21 at 06:58

Try this

function allowCheatModes(){
    var isChecked = document.getElementById("allowcheatmode").checked;

    if (isChecked) {
      document.getElementById("allowcheatmode").value = "YES";
    } else {
      document.getElementById("allowcheatmode").value = "NO";
    }
}

<input type="checkbox" id="allowcheatmode" name="allowCheatMode" value="NO" onchange="allowCheatModes()">

The code above will be valid, because you had typo in getElemenetById (should be getElementById, not getElemeNETById). Anyway, you will see nothing in this case, because input with type="checkbox" have no view. You can improve your code adding some div element:

function allowCheatModes(){
    var isChecked = document.getElementById("allowcheatmode").checked;
    
    document.getElementById("allowcheatmode-view").innerHTML = isChecked ? "YES" : "NO";
}

<input type="checkbox" id="allowcheatmode" name="allowCheatMode" onchange="allowCheatModes()">

<div id="allowcheatmode-view">NO</div>

P.S.: "condition ? ifTrue : ifFalse" is ternary operator, the short form of "if"

score 0 · Answer 4 · answered Aug 19 '21 at 07:05

You did two things wrong

First thing

You put if outside the function, please put if inside the function

function allowCheatModes() {
...
}

Replace with

function allowCheatModes() {
...
  if(x){
    ...
  }
}

Second thing

The function name you are using is wrong, you should use getElementById, not getElemenetById

document.getElemenetById

Replace with

document.getElementById

Below is my adjusted snippet, you can refer to it.

Have a good day :)

function allowCheatModes(){
  var x = document.getElementById("allowcheatmode").checked;
  if (x) {
     document.getElementById("allowcheatmode").value = "YES"
  } else {
     document.getElementById("allowcheatmode").value = "NO"
  }
  console.log(document.getElementById("allowcheatmode").value);
}

<input type="checkbox" id="allowcheatmode" name="allowCheatMode" value="NO" onchange="allowCheatModes()">

Assigning different values to a name in HTML checkbox input based on check status

4 Answers4