HTML Javascript simple validation form with maths function-CodePudding

I'm writing a simple inventory webpage with items used/issued to get subtracted from total stock and the should be in multiples of 50, All working fine except a small glitch. The Javascript isn't giving me balance, its adding the items fine in total variable, calculating and showing if its multiple of 50 or not. All Good.

BUT

just not giving me balance. What has gone wrong? I checked many time but to me all seems fine and in place. Help Please.

function findTotal() {

  var stock = document.getElementsByName('stock');
  var arr = document.querySelectorAll('[name="vala"], [name="valb"], [name="valc"]'); //manual selection of names
  var tot = 0;

  for (var i = 0; i < arr.length; i  ) {
    if (parseInt(arr[i].value))
      tot  = parseInt(arr[i].value);
  }
  document.getElementById('total').value = tot;

  if ((tot % 50) == 0) {
    document.getElementById('new').value = "correct";
  } else {
    document.getElementById('new').value = "incorrect";
  }
  return tot;
  var bal = number(stock - tot);
  document.getElementById('balance').value = bal;
  return bal;
}

function ValidateTotal() {
  var y = findTotal();
  if ((y % 50) == 0) {
    return true;
  } else {
    alert("Total Must be in multiples of 50");
    return false;

  }
}

<form  onsubmit="return ValidateTotal(this)" method="post" action="portal.php" >
  <span >
                        Portal <br><span style="color:red;"><span style="font-size: 80%"> Data Submission for '.$datadate.' </red>
                    </span></span>
  </span>

  </div>
  <div  data-validate="Value 1">
    <input  onblur="findTotal()" type="number" step="1" name="vala" id="vala" placeholder="Value A">


  </div>
  <div  data-validate="Value 2">
    <input  onblur="findTotal()" type="number" step="1" name="valb" id="valb" placeholder="Value B">

  </div>


  <div  data-validate="Value 3">
    <input  onblur="findTotal()" type="number" step="1" name="valc" id="valc" placeholder="Value C">

  </div>

  <div  data-validate="Value 4">
    <input  type="number" step="1" name="vald" id="vald" placeholder="Value D not in total">

  </div>
  <div  data-validate="Total">
    <input  type="number" step="1" name="total" id="total" placeholder="Total ABC">

  </div>
  <div  data-validate="stock">
    <input  onblur="findTotal()" type="number" step="1" name="stock" id="stock" placeholder="Total Stock">

  </div>
  <div  data-validate="balance">
    <input  onblur="findTotal()" type="number" step="1" name="balance" id="balance" placeholder="balance">

  </div>


  <span style="color:red;">Total : 
<input type="text" name="total" id="total" size="2" readonly="readonly">Validations : 
<input type="text" name="new" id="new" size="5" readonly="readonly"></span></span>

  </div>

  <div >
    <button >
                            Submit
                        </button>
  </div>
</form>
</div>
</div>
</div>

CodePudding user response：

you cant use getElementsByName because with getElementsByName it gives you nodelist.in that case you have specify the index:

getElementsByName("stock")[0].

i changed it to document.getElementById('stock').value; getting the value straight from here so you woulnt need to parseInt or .valueAsNumber.

var bal = stock - tot; this will work fine

function findTotal() {

  var stock = document.getElementById('stock').value;/*<-------byId*/
  var arr = document.querySelectorAll('[name="vala"], [name="valb"], [name="valc"]'); //manual selection of names
  var tot = 0;

  for (var i = 0; i < arr.length; i  ) {
    if (parseInt(arr[i].value))
      tot  = parseInt(arr[i].value);
  }
  document.getElementById('total').value = tot;

  if ((tot % 50) == 0) {
    document.getElementById('new').value = "correct";
  } else {
    document.getElementById('new').value = "incorrect";
  }
  
  var bal = stock - tot;
  document.getElementById('balance').value = bal;
  return bal;
  return tot;
}

function ValidateTotal() {
  var y = findTotal();
  if ((y % 50) == 0) {
    return true;
  } else {
    alert("Total Must be in multiples of 50");
    return false;

  }
}

<form  onsubmit="return ValidateTotal(this)" method="post" action="portal.php" >
  <span >
                        Portal <br><span style="color:red;"><span style="font-size: 80%"> Data Submission for '.$datadate.' </red>
                    </span></span>
  </span>

  </div>
  <div  data-validate="Value 1">
    <input  onblur="findTotal()" type="number" step="1" name="vala" id="vala" placeholder="Value A">


  </div>
  <div  data-validate="Value 2">
    <input  onblur="findTotal()" type="number" step="1" name="valb" id="valb" placeholder="Value B">

  </div>


  <div  data-validate="Value 3">
    <input  onblur="findTotal()" type="number" step="1" name="valc" id="valc" placeholder="Value C">

  </div>

  <div  data-validate="Value 4">
    <input  type="number" step="1" name="vald" id="vald" placeholder="Value D not in total">

  </div>
  <div  data-validate="Total">
    <input  type="number" step="1" name="total" id="total" placeholder="Total ABC">

  </div>
  <div  data-validate="stock">
    <input  onblur="findTotal()" type="number" step="1" name="stock" id="stock" placeholder="Total Stock">

  </div>
  <div  data-validate="balance">
    <input  onblur="findTotal()" type="number" step="1" name="balance" id="balance" placeholder="balance">

  </div>


  <span style="color:red;">Total : 
<input type="text" name="total" id="total" size="2" readonly="readonly">Validations : 
<input type="text" name="new" id="new" size="5" readonly="readonly"></span></span>

  </div>

  <div >
    <button >
                            Submit
                        </button>
  </div>
</form>
</div>
</div>
</div>