Show separate number with comma in django tempalte-CodePudding

I have an issue that when the user is typing on text field the number is not separated by a comma

user is typing 500000, it shows 500000 not 500,000

in models

so_tien=models.PositiveIntegerField(max_length=50)

in forms

so_tien=forms.IntegerField(label="Số tiền",widget=forms.NumberInput(attrs={"class":"form-control",'onfocusout': 'numberWithCommas()',}),required=False)

template file

<div  id="sotien" style="display:none">{{ form.so_tien}}</div>

javascript code numberWithCommas in the template file:

 <script language="JavaScript">
function numberWithCommas(){
      var input = document.getElementById('sotien');
      input.value = parseInt(input.value).toLocaleString()
}
</script>

Thanks for your reading

CodePudding user response：

You're not changing value of your input you're just displaying it try assign new value to value attribute like this

Working example

function numberWithCommas(){
  var input = document.getElementById('input');
  input.value = parseInt(input.value).toLocaleString()
}

<input type="text" id="input" onfocusout="numberWithCommas()">

for django you can do somthing like this
in forms.py

so_tien=forms.CharField(label="Số tiền",widget=forms.TextInput(attrs={"class":"form-control", 'onfocusout': 'numberWithCommas()',}),required=False)

inside your templates

function numberWithCommas(){
      var input = document.getElementById('{{ form.so_tien.id_for_label}}');
      input.value = parseInt(input.value).toLocaleString()
}

CodePudding user response：

Two easy ways

1> you can use LOCALIZE to achieve this with limited control

2>You can create a custom django template tag to achieve this using your own logic like split in reverse and insert comma etc.

--EDIT--

from django import template
from django.contrib.humanize.templatetags.humanize import intcomma

register = template.Library()

def currency(dollars):
    dollars = round(float(dollars), 2)
    return "$%s%s" % (intcomma(int(dollars)), ("%0.2f" % dollars)[-3:])

register.filter('currency', currency)

I had previously used this for currency you can modify it as it suits you. in template call {{youvalue|currency}} . Read up on django template tags.

For Javascript:

$('.numberfieldclass').keyup(function() {
  var foo = $(this).val().split(",").join(""); // commas
  if (foo.length > 0) {
    foo = foo.match(new RegExp('.{1,3}', 'g')).join(",");
  }
  $(this).val(foo);
});