CODEWITHSUNDEEP
javascriptpythondjango
jojo1711
jojo1711

Reputation: 113

How to add Thousand Separator to number in Javascript / Python / Django

I wanted to ask how to add thousand separator to the number when I type the number and also to the output.

For example 10 000 becomes 10,000.

I tried to use Django intcomma but it's not working.

Really appreciate if you guys can help me with this. Below is my code :

HTML 

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <br />
    <br />
    <div class="form-group">
      <form name="add_price" id="add_price">
        <div class="table-responsive">
          <table class="table table-bordered" id="price">
            {{ priceformset.management_form }}
            {% for price in priceformset %} 
            <tr>
              <td>{{ product.product_price }}</td>
              <td>{{ product.product_quantity }}</td>

              <td>{{ product.product_total_price }}</td>
            </tr>
            {% endfor %}
          </table>
          <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
        </div>
      </form>
    </div>
  </div>
</body

Javascript

$('.textInput').on('change keyup', function() {

      product_total_price=0;

      var product_price= Number($('#id_Product-0-price').val());
      var product_quantity= Number($('#id_Product-0-quantity').val());

      product_total_price= product_price * product_quantity;
      $('#id_Product-0-total_price').val(product_total_price);

});

Models.py

 class Price (models.Model):
    product_price = models.CharField(max_length=512,null=True,blank=True)
    product_quantity = models.CharField(max_length=512,null=True,blank=True)
    product_total_price= models.CharField(max_length=512,null=True,blank=True)

Forms.py

class PriceForm(forms.ModelForm):

product_price =forms.CharField(required=False,label=('Price'),widget=forms.TextInput(
        attrs= {
        "class":"textInput form-control",
        "placeholder" : "Price"
}))

product_quantity =forms.CharField(required=False,label=('Quantity'),widget=forms.TextInput(
        attrs= {
        "class":"textInput form-control",
        "placeholder" : "Quantity"
}))

product_total_price =forms.CharField(required=False,label=('Total Price'),widget=forms.TextInput(
        attrs= {
        "class":"textInput form-control",
        "placeholder" : "Total Price"
}))

class Meta:
        model = Price
        fields = ('__all__')

Upvotes: 3

Views: 5979

Answers (4)

BonMoDo
BonMoDo

Reputation: 1

In JavaScript with regex:

var result_to = document.querySelector('.my_example_280124');
var product_price = 123;
var product_quantity = 67;
var product_total_price = product_price * product_quantity;

// Adding a comma to the result number
product_total_price = product_total_price.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,')

result_to.innerHTML = 
'<p>' + 'Product price: ' + product_price + '</p>' +
'<p>' + 'Product quantity: ' + product_quantity + '</p>' +
'<p>' + '<b>' + 'Product total price: ' + '</b>' +  product_total_price + '</p>';
<div class="my_example_280124"></div>

From: http://www.kompx.com/en/add-thousands-separator-into-numbers-javascript.htm

Upvotes: 0

Happy Virgo
Happy Virgo

Reputation: 1

It works with float-type vale as well. It's a little complex but I really love to share my idea. It's based on Javascript.

value.toString().split('.').map((v, i) => i===0?v.split('').map((val, idx, self) => ((idx===0)||((self.length-idx)%3!==0))?val:`,${val}`).join(''):v).join('.')

Upvotes: -1

user12688644
user12688644

Reputation:

javascript:

const n = 100000
const formated = n.toLocaleString()

python (requires python 3.6+):

n = 1000000
formatted = f'{n:,}'

Upvotes: 5

thealpha93
thealpha93

Reputation: 778

It's easy to do in js:

let number = 1000
number.toLocaleString()

This is how to do it in python:

def place_value(number): 
    return ("{:,}".format(number)) 

print(place_value(1000000))

Happy to help

Upvotes: 3

Related Questions