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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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

Show code snippet

$(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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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

CodePudding user response：

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Change input type from text to number and after that you can skip all value regex checks. Also minus sign will work correctly after that and code will be much cleaner.
If you need change locale, pass lang attribute id-ID or value of navigator.language.

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>