JSFiddle - React, Tailwind, and code Playground

by Tarkiman

HTML

<script src="https://googledrive.com/host/0B7faJmGqgqi7UW9IbllfX04waWM"></script>
<div class="main">    
<div class="formPage">
        <h1>Format Currency With jQuery</h1>
        
        <div class="sample">
            <h3>Format Currency with Event Button Click</h3>
            <input id="currencyField" type="textbox" value="Rp. 1,220.00" />
            <input id="currencyButton" type="button" value="Convert" />

            <div>
                Format Currency on HTML with Tag Span.
                <span class="currencyLabel">Rp. 1,220.00</span>
            </div>
        </div>


        <div class="sample">
            <h3>Format Currency with Event Change</h3>
            <input class="currency" id="currencyFieldKeyUp" type="textbox" value="Rp. 1,220.00" />
        </div>

        <div class="sample">
            <h3>From Format Currency to Number</h3>
            <input id="currencyToNumber" type="textbox" readonly />
        </div>

        <div class="sample">
            <h3>Format Currency with Event Key Up</h3>
            <i>Kalau di klik jadi Angka, kalau di tinggalin jadi Format Currency</i>
            <input class="currency" id="formatuang" type="textbox" value="" />
        </div>

    </div>
</div>

CSS

body, div  { margin:0px auto; padding:0px; }

            .main { margin:40px; }
            
            .sample { float:left; margin:10px; padding:4px; border:1px solid #888; width:350px; }
            
            .sample h3 { margin:-4px; margin-bottom:10px; padding:4px; background:#555; color:#eee; }
            
            .currencyLabel { display:block; }

JavaScript

$(document).ready(function()
            {
                // Sample 1
                $('#currencyButton').click(function()
                {
                    $('#currencyField').formatCurrency();
                    $('#currencyField').formatCurrency('.currencyLabel');
                });
            
            
                // Sample 2
                $('.currency').blur(function()
                {
                    $('.currency').formatCurrency();
                });


            
                // Sample 3
                $('#currencyFieldKeyUp').change(function()
                {
                    $('#currencyFieldKeyUp').formatCurrency();

                    //Conversi to Number
                    $('#currencyToNumber').val($('#currencyFieldKeyUp').asNumber());

                });


            
                // Test Inputan
                $('#test').keyup(function()
                {
                    $('#currencyFieldKeyUp').val($('#test').val());
                });

                // Sample 3
                $('#formatuang').click(function(){

                    if($('#formatuang').val()==""){
                        $('#formatuang').val("");
                    }
                    else{
                        //Conversi to Number
                        $('#formatuang').val($('#formatuang').asNumber());
                    }
                });

            });