I'm trying to make a simple inventory systems. But I'm having problem with my oninput event.

I want to make TOTAL GOODS to be "Please input number in GOODS IN " whenever every non number value inserted into GOODS IN. But it seems I can't make it so.

/*MAKE EVERY TABLE CLICKABLE AND SHOW ROW DATA IN INPUT TEXT*/

var tbGoods = document.getElementById('tbGoods');
for (var i = 0; i < tbGoods.rows.length; i  ) {
  tbGoods.rows[i].onclick = function() {
    document.getElementById("idTxt").value = this.cells[1].innerHTML;
    document.getElementById("gdTxt").value = this.cells[2].innerHTML;
    document.getElementById("qtyTXT").value = this.cells[3].innerHTML;

    var qty = parseInt(document.getElementById('qtyTXT').value);
    var x = parseInt(document.getElementById('gdin').value);
    var result = qty - x;
    document.getElementById('totalgd').value = result;


  };
}

/*MAKE EVERY NUMBER I PUT IN GOODS IN, TO BE CALCULATED WITHOUT SUBMIT BUTTON (ONINPUT)*/

function testmin() {
  var qty = parseInt(document.getElementById('qtyTXT').value);
  var x = parseInt(document.getElementById('gdin').value);
  var result = qty - x;
  if (document.getElementById('gdin').value === '') {
    document.getElementById('totalgd').value = '0';
  } else if (document.getElementById('qtyTXT').value === '') {
    document.getElementById('totalgd').value = '0';
  } else if (Number.isNaN(document.getElementById('gdin').value)) {
    document.getElementById('totalgd').value = 'Please Input Number in Goods In';
  } else {
    document.getElementById('totalgd').value = result;
  }
}

<form method="post">
  <label>ID</label>
  <input type="text" name="id" id="idTxt" disabled>

  <label>GOODS</label>
  <input type="text" name="goods" id="gdTxt" disabled>

  <label>AVAILABLE QTY</label>
  <input type="text" name="qty" id="qtyTXT" disabled>

  <label>GOODS IN</label>
  <input type="text" name="gdin" id="gdin" oninput="testmin()">
  <br>
  <br>

  <label>Total Goods</label>
  <input type="text" name="totalgd" id="totalgd" value="0" disabled>
  <br>

  <input type="submit" name="submit" value="submit">
</form>

CodePudding user response：

You don't need to code that manually. You can simply set the input type as "number" and your browser will not allow any non-numeric characters to be entered into the field.

Demo (run the snippet and try typing in the box):

<input type="number" id="gdin" name="gdin"/>

Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

CodePudding user response：

Just add type = "number" in the input label for TOTAL GOODS. It should prevent user from entering any alphabet. Except "e"

  <input type="number" name="totalgd" id="totalgd" value="0" disabled>

As pointed out, if you want to show an alert or something when an input of alphabet is there in TOTAL GOODS, you can just add

  <input type="text" name="totalgd" id="totalgd" value="0" oninput = "checkFunction()" disabled>

and in the function you can check the input for :

function checkFunction() {
 let totalGoodsIn = document.getElementById("totalgd").value; 
 let regExp = /[a-zA-Z]/g;
  
  if(regExp.test(totalGoodsIn))
  {
    //logic if alphabet is present in TOTAL GOODS
  }
  else
  {
    //logic if alphabet is not present in TOTAL GOODS
  }
 
}

if you want GOODS IN to be numeric just change the type of the label accordingly

CodePudding user response：

function validateNumberField() {
            var value = $("#numberField").val();
            var pattern = /^\d $/;
            var isValid = pattern.test(value);
            if(!isValid){
                document.getElementById('totalgd').value = 'Please Input Number in Goods In';   
            }
        }

<p>Please enter number :</p>
    <input type="number" id="numberField" name="numberField"
        oninput="validateNumberField()" />