jQuery Keyup Input

Hay ..

Pada kesempatan kali ini saya akan membagikan sebuah tulisan mengenai keyup input pada jQuery, langsung saja

pada bagian form nya kurang lebih seperti ini

<div class="form-group col-md-4">
        <label for="harga_beli">Harga Beli</label>
        {!! Form::text('harga_beli', null, ['class' => $errors->has('harga_beli') ? 'form-control is-invalid' : 'form-control', 'placeholder' => 'Harga Beli', 'id'=>'harga-beli']) !!}
        @error('harga_beli')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>
    <div class="form-group col-md-4">
        <label for="qty">Qty</label>
        {!! Form::number('qty', 1, ['class' => $errors->has('qty') ? 'form-control is-invalid' : 'form-control', 'placeholder' => 'Qty',
        'id' => 'qty']) !!}
        @error('qty')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>
<div class="form-group col-md-4">
        <label for="discount">Potongan Harga</label>
        {!! Form::text('discount', null, ['class' => $errors->has('discount') ? 'form-control is-invalid' : 'form-control', 'placeholder' => 'Discount', 'id'=>'discount']) !!}
        @error('discount')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>
<div class="col-12">
        <div class="float-right">
        <p><b>TOTAL</b></p>
        <h3 id="total">{{ (!empty($total)) ? Money::stringToRupiah($total) : '' }}</h3>
        </div>
    </div>

pada setiap class form jangan lupa kasih id untuk memudahkan mengirim datanya

Untuk jQuery nya seperti dibawah ini

$('#harga-beli, #qty, #discount').on('keyup',function() {
                        //alert('BB');
                        var harga_beli = $('#harga-beli').val();
                        var harga = harga_beli.replace(/[\Rp. ,]/g, '');
                        var qty = parseInt($('#qty').val());
                        var discount = $('#discount').val();
                        var disc = discount.replace(/[\Rp. ,]/g, '');
                        var total = (harga * qty) - disc;
                        $('#total').text(convertToRupiah(total));
                    });

Dan sebuah function untuk mengconvert ke Rupiah

function convertToRupiah(angka)
    {
        var rupiah = '';
        var angkarev = angka.toString().split('').reverse().join('');
        for(var i = 0; i < angkarev.length; i++) if(i%3 == 0) rupiah += angkarev.substr(i,3)+'.';
        return 'Rp. '+rupiah.split('',rupiah.length-1).reverse().join('');
    }

Semoga bisa dijadikan sebagai bahan untuk referensi dan bermanfaat, terutama bagi penulis sendiri.. alasan kenapa ditulis disini adalah sebagai library ilmu untuk penulis sendiri ketika ada kasus yang sama bisa dilihat kembali untuk dipakai ^_^

Haturnuhun sebelumnya

Dan kurang lebih seperti ini tampilan nya

jquery_1

Related Articles

Comments