Multiplying two inputs with decimal value using JavaScript in ASP.Net Core MVC

trisetia302
 
on Sep 16, 2021 07:30 AM
636 Views

Hi,

I tried make calculation for currency in indoneasia format using javascript in .Net Core Mvc. When I not use indoneasia currency format the calculation working properly.

When 5.000 * 2 = 10.000 but the code just return 10 value.

How to solve this ? Any help could be appriciate.

The View

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header card-header-success">
                <h4 class="card-title">Data Obat</h4>
                <p class="card-category"></p>
            </div>
            <div class="card-body">
                <form id="formHitung" name="formHitung">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="position-relative form-group">
                                <label asp-for="Nama_Obat" class="control-label"></label>
                                <input asp-for="Nama_Obat" name="Nama_Obat" id="Nama_Obat" class="form-control" />
                                <span asp-validation-for="Nama_Obat" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="position-relative form-group">
                                <label asp-for="Harga" class="control-label"></label>
                                <div class="input-group">
                                    <span class="input-group-text">Rp.</span>
                                    <input asp-for="Harga" name="Harga" id="Harga" class="form-control" onkeyup="OnChange(this.value)" onKeyPress="return isNumberKey(event)" />
                                </div>
                                <span asp-validation-for="Harga" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="position-relative form-group">
                                <label asp-for="Jumlah" class="control-label"></label>
                                <input asp-for="Jumlah" name="Jumlah" id="Jumlah" class="form-control" onkeyup="OnChange(this.value)" onKeyPress="return isNumberKey(event)" />
                                <span asp-validation-for="Jumlah" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="position-relative form-group">
                                <label asp-for="Total_Bayar" class="control-label"></label>
                                <div class="input-group">
                                    <span class="input-group-text">Rp.</span>
                                    <input asp-for="Total_Bayar" name="Total_Bayar" id="Total_Bayar" class="form-control" />
                                </div>
                                <span asp-validation-for="Total_Bayar" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div align="center">
                                <div class="form-group">
                                    <button type="button" id="BtnAddDataObat" class="btn btn-success"> Add</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

The Javascript

@*For automatic calculation *@
<script type="text/javascript" language="Javascript">
    var _Harga;
    var _Jumlah;
    var total;

    _Harga = document.formHitung.Harga.value;
    document.formHitung.Total_Bayar.value = _Harga;

    _Jumlah = document.formHitung.Jumlah.value;
    document.formHitung.Total_Bayar.value = _Jumlah;

    function OnChange(value) {
        _Harga = document.formHitung.Harga.value;
        _Jumlah = document.formHitung.Jumlah.value;

        total = _Harga * _Jumlah;
        document.formHitung.Total_Bayar.value = total;
    }
</script>

@*For show currency in indonesian format*@
<script type="text/javascript" lang="javascript">
    window.addEventListener("load", function (e) {
        var input = document.getElementById("Harga");
        input.addEventListener('keyup', function (e) {
            input.value = FormatRupiah(this.value, '')
        });
        function FormatRupiah(bilangan, prefix) {
            var number_string = bilangan.replace(/[^,\d]/g, '').toString(),
                split = number_string.split(','),
                sisa = split[0].length % 3,
                rupiah = split[0].substr(0, sisa),
                ribuan = split[0].substr(sisa).match(/\d{1,3}/gi);
            if (ribuan) {
                separator = sisa ? '.' : '';
                rupiah += separator + ribuan.join('.');
            }

            rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
            return prefix == undefined ? rupiah : (rupiah ? '' + rupiah : '');
        }
    });
</script>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Sep 16, 2021 11:24 PM

Hi trisetia302,

Refer below code.

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header card-header-success">
                    <h4 class="card-title">Data Obat</h4>
                    <p class="card-category"></p>
                </div>
                <div class="card-body">
                    <form id="formHitung" name="formHitung">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="position-relative form-group">
                                    <label asp-for="Nama_Obat" class="control-label"></label>
                                    <input asp-for="Nama_Obat" name="Nama_Obat" id="Nama_Obat" class="form-control" />
                                    <span asp-validation-for="Nama_Obat" class="text-danger"></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="position-relative form-group">
                                    <label asp-for="Harga" class="control-label"></label>
                                    <div class="input-group">
                                        <span class="input-group-text">Rp.</span>
                                        <input asp-for="Harga" name="Harga" id="Harga" class="form-control" onkeyup="OnChange(this.value)" />
                                    </div>
                                    <span asp-validation-for="Harga" class="text-danger"></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="position-relative form-group">
                                    <label asp-for="Jumlah" class="control-label"></label>
                                    <input asp-for="Jumlah" name="Jumlah" id="Jumlah" class="form-control" onkeyup="OnChange(this.value)" />
                                    <span asp-validation-for="Jumlah" class="text-danger"></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="position-relative form-group">
                                    <label asp-for="Total_Bayar" class="control-label"></label>
                                    <div class="input-group">
                                        <span class="input-group-text">Rp.</span>
                                        <input asp-for="Total_Bayar" name="Total_Bayar" id="Total_Bayar" class="form-control" />
                                    </div>
                                    <span asp-validation-for="Total_Bayar" class="text-danger"></span>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div align="center">
                                    <div class="form-group">
                                        <button type="button" id="BtnAddDataObat" class="btn btn-success">Add</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" language="Javascript">
    var _Harga;
    var _Jumlah;
    var total;

    _Harga = document.formHitung.Harga.value;
    document.formHitung.Total_Bayar.value = _Harga;

    _Jumlah = document.formHitung.Jumlah.value;
    document.formHitung.Total_Bayar.value = _Jumlah;

    function OnChange(value) {
        _Harga = document.formHitung.Harga.value;
        _Jumlah = document.formHitung.Jumlah.value;

        total = _Harga * _Jumlah;
        document.formHitung.Total_Bayar.value = FormatRupiah(total.toString(), '');
    }
    window.addEventListener("load", function (e) {
        var input = document.getElementById("Harga");
        input.addEventListener('keyup', function (e) {
            input.value = FormatRupiah(this.value, '')
        });
    });
    function FormatRupiah(bilangan, prefix) {
        var number_string = bilangan.replace(/[^,\d]/g, '').toString(),
            split = number_string.split(','),
            sisa = split[0].length % 3,
            rupiah = split[0].substr(0, sisa),
            ribuan = split[0].substr(sisa).match(/\d{1,3}/gi);
        if (ribuan) {
            separator = sisa ? '.' : '';
            rupiah += separator + ribuan.join('.');
        }

        rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
        return prefix == undefined ? rupiah : (rupiah ? '' + rupiah : '');
    }
</script>

Screenshot