Variable value from hidden form field not working with if else

I'm using Contact Form 7 with Dynamic Text Extension and Contact Form DB.

I have a form that states quota value to 60. I use Contact Form DB's shortcode [cfdb-value] that gives MAX number of id=k_quota (value="60") and SUM every input from id=k_amount (in this example value="9"). k_amount increases everytime form is submitted. Everything is working as intented so far.

When k_amount is greater or equal as k_quota I want form to disappear and a message to show. This worked like a charm yesterday, but not today. Why is this not working?

This is stripped down code I have:

function counter() {
  var x = document.getElementById("k_amount").value;
  var y = document.getElementById("k_quota").value;

  if (x >= y) {
    document.getElementById("coupon").style.display = "none";
    document.getElementById("notification").style.display = "inline";
  } else {
    document.getElementById("coupon").style.display = "inline";
    document.getElementById("notification").style.display = "none";
  }
}

<body onload="counter()">

  <form id="coupon">
    <span class="wpcf7-form-control-wrap amount">
    <span class="wpcf7-form-control wpcf7-radio">
    <label><span class="wpcf7-list-item-label">1</span><input type="radio" name="amount" value="1" checked="checked" /></label>
    <label><span class="wpcf7-list-item-label">2</span><input type="radio" name="amount" value="2" /></label>
    <label><span class="wpcf7-list-item-label">3</span><input type="radio" name="amount" value="3" /></label>
    </span>
    </span>

    <input type="hidden" name="quota" value="60" class="wpcf7-form-control wpcf7-hidden" />

    <span class="wpcf7-form-control-wrap inventory">
    <input type="hidden" name="inventory" value="9" size="40" class="wpcf7-form-control wpcf7dtx-dynamictext wpcf7-dynamichidden" id="k_amount" aria-invalid="false" />
    </span>

    <span class="wpcf7-form-control-wrap inventory">
    <input type="hidden" name="inventory" value="60" size="40" class="wpcf7-form-control wpcf7dtx-dynamictext wpcf7-dynamichidden" id="k_quota" aria-invalid="false" />
    </span>
  </form>

  <div id="notification">
    <p>
      All is gone!
    </p>
  </div>

Solution

By default the inputs are returning string values, and the >= operator will compare the strings against the default alphabetical order, one character at a time ("5" >= "10" === true as "5" comes after "1" alphabetically)

You need to parse your numbers as numbers before comparing them.

E.g. var x = parseInt(document.getElementById("k_amount").value);

Complete example:

function counter() {
  var x = parseInt(document.getElementById("k_amount").value);
  var y = parseInt(document.getElementById("k_quota").value);

  if (x >= y) {
    document.getElementById("coupon").style.display = "none";
    document.getElementById("notification").style.display = "inline";
  } else {
    document.getElementById("coupon").style.display = "inline";
    document.getElementById("notification").style.display = "none";
  }
}

<body onload="counter()">

  <form id="coupon">
    <span class="wpcf7-form-control-wrap amount">
    <span class="wpcf7-form-control wpcf7-radio">
    <label><span class="wpcf7-list-item-label">1</span><input type="radio" name="amount" value="1" checked="checked" /></label>
    <label><span class="wpcf7-list-item-label">2</span><input type="radio" name="amount" value="2" /></label>
    <label><span class="wpcf7-list-item-label">3</span><input type="radio" name="amount" value="3" /></label>
    </span>
    </span>

    <input type="hidden" name="quota" value="60" class="wpcf7-form-control wpcf7-hidden" />

    <span class="wpcf7-form-control-wrap inventory">
    <input type="hidden" name="inventory" value="9" size="40" class="wpcf7-form-control wpcf7dtx-dynamictext wpcf7-dynamichidden" id="k_amount" aria-invalid="false" />
    </span>

    <span class="wpcf7-form-control-wrap inventory">
    <input type="hidden" name="inventory" value="60" size="40" class="wpcf7-form-control wpcf7dtx-dynamictext wpcf7-dynamichidden" id="k_quota" aria-invalid="false" />
    </span>
  </form>

  <div id="notification">
    <p>
      All is gone!
    </p>
  </div>