CODEWITHSUNDEEP
jqueryhtml
Abdul Hannan
Abdul Hannan

Reputation: 82

How to set numeric value containing comma and decimal point to an input type number

I have an input tag in html

<input type="number" id="Amount" placeholder="Please enter somthing" />

I am setting value of this input using jQuery like :

$('#Amount').val("78,000.00");

I am unable to set this value unless I change the type of input tag to be "text". I have also applied pattern regex like :

<input type="number" id="Amount" placeholder="Please...." pattern="/^[0-9.,]+$/" />

How to solve this problem?

Upvotes: 0

Views: 4900

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

You need to set the value using standard JavaScript and HTML number notation, with no thousands separator and with period as the decimal separator:

$('#Amount').val("78000.00");

Or maybe better still, using plain JavaScript, since it’s dead simple and avoids the problem “how might different versions of jQuery work in this case?”:

document.getElementById('Amount').value = '78000.00';

The HTML5 <input type=number> element uses standard JavaScript and HTML number format for the internal value. Only the user interface for entering the value may be localized, according to the browser locale (a fundamental design flaw IMHO). So when you use a locale that has comma as thousands separator, you can type 78,000, but the browser is required to convert it to 78000. Similarly, the initial value must be specified in the standard (internationalized) format, not in a localized format).

The pattern attribute is not allowed in <input type=number>. The reason is that the browser is expected to know the pattern of allowed numbers and use it.

Upvotes: 2

Rajesh
Rajesh

Reputation: 3778

Abdul, try using 

<input type="text" id="Amount" pattern="[0-9.,]+" />

This seems to work.

Upvotes: 0

Related Questions