currency format in text field through javascript - javascript

I want to make text field in currency format with 2 decimal place.
Problem is :- after currency format my value is saved first digit in db instead of full value.
Here is code:-
html:-
<?php $itemcost=$item->price;?>
<label for="item-price" class="required item-dollar">$</label>
<input type="text" class="form-control" required="required"
value="{{number_format($itemcost)}}" id="item-pricing"
name="price" placeholder="Item Price">
Please advise me any solution.

It is not clear if you are having difficulty saving currency to the database or displaying it
You need to store the value in a field that accepts decimals/floats (e.g. decimal(10,2)
You are also using number_format() without a second argument which defaults to no decimal places, you should use number_format($itemcost, 2) for two decimal places
<?php $itemcost=$item->price;?>
<label for="item-price" class="required item-dollar">$</label>
<input type="text" class="form-control" required="required" value="{{number_format($itemcost,2)}}" id="item-pricing" name="price" placeholder="Item Price">
http://php.net/number_format

Related

jQuery - jMask money issue

I trying to use JMask for money mask, its work good, but when i click on other input, my field money that was for example "1.234,56" became "123.456" how can i fix it?
My field:
After after put value on other field
Automatically my comma broken
My code:
<label>Custo: </label>
<input type="text" name="" v-model="vehicle.cost" class="form-control money" placeholder="Custo"><br>
Documentation

How To add a min and max length verification to a number field?

I have the code for a number field:
<label for="Phone">Phone Number</label><br/>
<input id="Phone" name="Phone"class="form-control" type="tel" pattern="^\d{3}\d{3}\d{4}$" maxlength="10" minlength="10" required >
However that doesn't limit to only numbers and only one format works i want to do something like:
<input name="Phone" type="number" class="form-control" placeholder="Phone Number" maxlength="10" minlength="10" required="required"/>
and that code does not limit the max and min lengths!
How do i get the lengths to work?
From the mozilla docs:
If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter. For other control types, it is ignored.
That means that this attribute does not work as expected for a number input.
Here's one way you can define your own length-validator (of course you can write your own ;) ):
numberInput.addEventListener('input', function() {
this.value = this.value.substring(0, MAX_LENGTH);
}

Detecting Value of Generic Custom Attribute Without Adding Code Directly to Element?

I'm trying to figure out, using Javascript, how to detect the value of an email input by using the last attribute "aria-invalid" (will equal "true" or "false"). The issue is other fields on the page use the same attribute "aria-invalid" in the same fashion. Not sure how I can read the value of the email input attribute only? I can NOT add any code to the element and NO jQuery please.
<input class="masked-zip-code not-empty input-validation-error" data-val="true" data-val-regex="Enter a valid (5-digit) ZIP code." data-val-regex-pattern="^\d{5}(-\d{4})?$" data-val-required="Enter a ZIP code" id="ZipCode" name="ZipCode" type="text" value="" aria-required="true" aria-describedby="ZipCode-error" aria-invalid="true">
You will need a way to tell which one is which, and since aria-invalid is shared, it can't be used for this. You can use an ID or type="email" to distinguish such field. See the following:
<input class="masked-zip-code not-empty input-validation-error" data-val="true" data-val-regex="Enter a valid (5-digit) ZIP code." data-val-regex-pattern="^\d{5}(-\d{4})?$" data-val-required="Enter a ZIP code" id="ZipCode" name="ZipCode" type="text" value="" aria-required="true" aria-describedby="ZipCode-error" aria-invalid="true">
<input class="masked-zip-code not-empty input-validation-error" data-val="true" data-val-regex="Enter a valid (5-digit) ZIP code." data-val-regex-pattern="^\d{5}(-\d{4})?$" data-val-required="Enter a ZIP code" id="ZipCode" name="ZipCode" type="email" value="" aria-required="true" aria-describedby="ZipCode-error" aria-invalid="true">
You can then use this code to access aria-invalid value:
var aria-invalid-value = document.querySelector("input[type='email']")[0].getAttribute('aria-invalid');
var invalid = document.getElementById('ZipCode').getAttribute('aria-invalid');
console.log(invalid);
See JSFiddle

calculation in angularjs output fails with ng-model

I'm working on an angular project where i perform calculations on the page. In the textfield where i put the final results, when i get it an ng-model that answer fails to load. When i take out the ng-model, the answer appears.
But i want it working while it have an ng-model="total" because i will send the total value to the database. With the below script, it works
<input name="price" type="text" id="price" ng-model="price">
<input name="quantity" type="text" id="quantity"ng-model="price">
<input name="total" type="text" id="total" value="{{.price*quantity}}">
But with this
<input name="price" type="text" id="price" ng-model="price">
<input name="quantity" type="text" id="quantity"ng-model="price">
<input name="total" type="text" id="total" value="{{.price*quantity}}" ng-model="total">
it fails to works. The answer doesn't appear in the textbox
Try this instead:
<input name="price"
type="text"
ng-model="price" string-to-number>
<input name="quantity"
type="text"
ng-model="quantity" string-to-number>
<span>{{ price * quantity }}</span>
I'm not sure why you're trying to put the calculated value into the 3rd input, but if you are, you'll want to use ng-model-options to tell the total ngModel that it's to treat that value as a getter/setter - https://docs.angularjs.org/api/ng/directive/ngModelOptions
Also note the string-to-number directive. You're dealing with strings in the input. So in order for interpolation to work, you may need to add those.
edit
here is a working example of how I think you were trying to allow an override on the calculated value. You can enter another value in the total input and hit enter to see it working. This uses the ng-model-options - http://codepen.io/jusopi/pen/XKQzzv

AngularJS ui-mask Adding a MAX and MINIMUM for a currency

I am using the official AngularJS UI-Mask https://github.com/angular-ui/ui-mask and trying to figure out how I can create a mask for currency USD.
I want the user to be able to put $00.01 to like $9,000,000.00 or whatever the desired max is.
I currently have: <input type="text" ng-model="greeting" ui-mask="$99.99" class="form-control input-lg" style="width:50%" />
That limits me to $99...
Here is a live demo: http://plnkr.co/edit/5ErV11uGVxJFmD24K2jk?p=preview
You can use input number.
<input type="number" min="0.99" max="9000000.00" ng-model="greeting"
class="form-control input-lg" style="width:50%" />

Categories