CODEWITHSUNDEEP
javascripthtmljqueryinput
Rimelda Pratama
Rimelda Pratama

Reputation: 102

Javascript input keyup first value = "-" not NaN

Here i want to fill input value starting with value "-", it works if start value is number and then add last "-" to value, but here i want input value "-" at start and not "NaN" at time input "-"

This is my code sample :

    $(document).on("keyup change", ".cll_debit", function() {
        var sum = 0;
        $(".cll_debit").each(function(){
            sum += +$(this).val().replace(/\./g, "");
        });

        $("#tl_debit").val(sum.toLocaleString("id-ID"));
    });
  
  var $form = $( ".form" );
    var $input = $form.find( "input" );
  
  $input.on( "keyup", function( event ) {
        var $this = $( this );  
        var input = $this.val();
        var input = input.replace(/[\/a-z\/A-Z\s\._\=\`]+/g, "");
        
        input = input ? parseInt( input, 10 ) : 0;
        $this.val( function() {
            return ( input === 0 ) ? "" : input.toLocaleString("id-ID");
        } );
    } );
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form">
  <input type="text" class="cll_debit" autocomplete="off" value="">
  <input type="text" class="cll_debit" autocomplete="off" value="">
  <br><br>
  <input type="text" id="tl_debit" value="0" readonly>
</div>

Here I found a way without toLocaleString, but on input value="-" it doesn't work

$(document).on("keyup change", ".cll_debit", function() {
    var sum = 0;
    $(".cll_debit").each(function(){
        sum += +$(this).val().replace(/\./g, "");
    });

    $("#tl_debit").val(sum.toLocaleString("id-ID"));
});

number_format = function (number, decimals, dec_point, thousands_sep) {
        number = number.toFixed(decimals);

        var nstr = number.toString();
        nstr += '';
        x = nstr.split('.');
        x1 = x[0];
        x2 = x.length > 1 ? dec_point + x[1] : '';
  var rgx = /(\d+)(\d{3})/;

        while (rgx.test(x1))
            x1 = x1.replace(rgx, '$1' + thousands_sep + '$2');

        return x1 + x2;
    }

var $form = $( ".form" );
var $input = $form.find( "input" );

$input.on( "keyup", function( event ) {
    var $this = $( this );  
    var input = $this.val();
    var input = input.replace(/\D/g, "");

    input = input ? parseInt( input, 10 ) : 0;
    $this.val( function() {
        return number_format(input, '', '.', '.');
    } );
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form">
  <input type="text" class="cll_debit" autocomplete="off" value="">
  <input type="text" class="cll_debit" autocomplete="off" value="">
  <br><br>
  <input type="text" id="tl_debit" value="0" readonly>
</div>

Here i added a new function which is not related to toLocaleString, but also not working as i want on input value="-" not working at all

Upvotes: 0

Views: 284

Answers (1)

d41d8cd98f00b204e9800998ecf842
d41d8cd98f00b204e9800998ecf842

Reputation: 765

You can try this :

$(document).on("keyup change", ".cll_debit", function() {
    var sum = 0;
    $(".cll_debit").each(function(){
        sum += +$(this).val().replace(/\./g, "");
    });

    $("#tl_debit").val(sum.toLocaleString("id-ID"));
});

var $form = $( ".form" );
var $input = $form.find( "input" );

$input.on( "keyup", function( event ) {
    var $this = $( this );  
    var input = $this.val();
    var input = input.replace(/[\/a-z\/A-Z\s\._\=\`]+/g, "");

    if($(this).val().length > 1){
      input = input ? parseInt( input, 10 ) : 0;
      $this.val( function() {
          return ( input === 0 ) ? "" : input.toLocaleString("id-ID");
      } );
    }else{ }
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="form">
  <input type="text" class="cll_debit" autocomplete="off" value="">
  <input type="text" class="cll_debit" autocomplete="off" value="">
  <br><br>
  <input type="text" id="tl_debit" value="0" readonly>
</div>

Upvotes: 1

Related Questions