JSFiddle - React, Tailwind, and code Playground

by taraym

HTML

<form>

<table style="width:100%">
                      <thead>
                        <tr>
                          <th>Pendapatan Keluarga (A) Bersumber dari</th>
                          <th>Jumlah (Rp/Bulan)</th>
                        </tr>
                      </thead>
                      <tbody>
                          <tr>
                            <td>Usaha Pokok Suami</td>
                            <td>
                              <input type="text" name="pendapatan_suami" id="nominal1" class="pendapatan" style="width: 200px; text-align:right;"onkeyup="angka(this)" >
                            </td>
                          </tr>
                          <tr>
                            <td>Usaha Pokok Istri</td>
                            <td>
                              <input type="text" name="pendapatan_istri" id="nominal2" class="pendapatan" style="width: 200px; text-align:right;" onkeyup="angka(this)" >
                            </td>
                          </tr>
                          <tr>
                            <td>Usaha Lainnya</td>
                            <td>
                              <input type="text" name="pendapatan_usaha" id="nominal3" class="pendapatan" style="width: 200px;  text-align:right;" onkeyup="angka(this)">
                            </td>
                          </tr>
                          <tr>
                            <td>Dari orangtua</td>
                            <td>
                              <input type="text" name="pendapatan_ortu" id="nominal3" class="pendapatan" style="width: 200px; text-align:right;" onkeyup="angka(this)">
                            </td>
                          </tr>
                          <tr>
                            <td>Dari anak/menantu</td>
                            <td>
                              <input type="text" name="pendapatan_anak" id="nominal4" class="pendapatan" style="width: 200px; text-align:right;"...

JavaScript

function NilaiRupiah(jumlah){  
        var titik = ".";
        var nilai = new String(jumlah);  
        var pecah = [];  
        while(nilai.length > 3)  
        {  
            var asd = nilai.substr(nilai.length-3);  
            pecah.unshift(asd);  
            nilai = nilai.substr(0, nilai.length-3);  
        }  

        if(nilai.length > 0) { pecah.unshift(nilai); }  
        nilai = pecah.join(titik);
        return nilai;  
      }

      function angka(e) {
        if (!/^[0-9]+$/.test(e.value)) {
          e.value = e.value.substring(0,e.value.length-1);
        }
      }

       $(document).ready(function () {
          //Iterate through each Textbox and add keyup event handler
          $(".pendapatan").each(function () {
              $(this).keyup(function () {
                  //Initialize total to 0
                  var total = 0;
                  $(".pendapatan").each(function () {
                      // Sum only if the text entered is number and greater than 0
                      if (!isNaN(this.value) && this.value.length != 0) {
                          total += parseFloat(this.value);
                          $(this).css("background-color", "#FEFFB0");
                      }
                      else if (this.value.length != 0){
                          $(this).css("background-color", "red");
                      }
                  });
                  //Assign the total to label
                  //.toFixed() method will roundoff the final sum to 2 decimal places
                  jml = "Rp. " + NilaiRupiah(total) + ",00";
                  $("#total").val(jml);
              });
          });
      });