The Small Notes

Terkadang kita perlu untuk membuat sebuah validasi sederhana pada aplikasi web kita. Misalkan sebagai contoh validasi pada inputan nilai barang keluar dan stok. Maka setiap nilai inputan dibuat harus kurang atau sama dengan nilai stok. Jika nilai inputan lebih besar daripada nilai stok maka aplikasi otomatis mengeluarkan notifikasi/alert bahwasanya nilai inputan melebihi nilai stok. Dan juga jika nilai inputan sesuai dengan nilai stok maka akan otomatis melakukan kalkulasi harga. Berikut contoh dari codingan HTML dan Javascript nya :

Code HTML :

<html>
  <p>Stock : <input type="number" id="stock" value="10"></p>
  <p>Quantity : <input type="number" id="qty" value="0" onInput="calc();"></p>
  <p>Price : <input type="number" id="price" value="1000"></p>
  <p>Total : <input type="number" id="total"></p>
</html>

Code Javascript :

<script type="text/javascript">
  function calc(){
    var stock = +document.getElementById("stock").value;
    var qty = +document.getElementById("qty").value;
    var price = +document.getElementById("price").value;

    if(qty > stock){
        alert("Qty More Than Stock!");
        document.getElementById("qty").value = 0;
        document.getElementById("total").value = "";
    }else{
        var total = qty * price;
        document.getElementById("total").value = total;
    }

  }
</script>