format number to price - javascript

I have seen a few of these jquery things going on, and just wondered if there was a simple number formatting script.
Essentially, all we wish to do, is format ( client side ) for checking purposes only, the number entered in a field. To show somewhere else on the page ( presumably in a div ) the formatted price they entered.
So lets say, field
input id="price" name="price" size="50" type="text" class="medium" /
And they enter 1234560
I want to show somewhere else on the page, :
You Entered : $1,234,560.00 as the price. Is this correct ?
This is only for visual purposes only. Alternatively, changing the value of what they type and formatting it "live" could be an option, however the value we want to send to the db is pure numerics, ie: 1234560

Setup a function like this one
Javascript format currency
function CurrencyFormatted(amount) {
var i = parseFloat(amount);
if(isNaN(i)) { i = 0.00; }
var minus = '';
if(i < 0) { minus = '-'; }
i = Math.abs(i);
i = parseInt((i + .005) * 100);
i = i / 100;
s = new String(i);
if(s.indexOf('.') < 0) { s += '.00'; }
if(s.indexOf('.') == (s.length - 2)) { s += '0'; }
s = minus + s;
return s;
}
Then set an onchange for jQuery something like this
jQuery(document).ready(function(){
jQuery('#price').change(function(){
jQuery('#mydivsomewhere').val(CurrencyChange(jQuery('#price').val()));
});
});
Not sure if that is 100% correct, haven't tested it. But should call CurrencyFormat whenever the text in your input box changes. Should pass in the val of the textbox with id of price and set a div of id mydivsomewhere with the formatted value.

Related

check if user inserted value higher then 0 with vanilla js

I am creating a custom js validator from scratch, without the use of any libraries.
I want to validate a numeric input by checking if the user-inserted content in the input tag is great than 0:
<label>Price
<input type="text" id="price" name="price">
</label>
Attempt:
function price()
{
if (#price.value>0)
console.log('0.');
else
console.log('Incorrect');
}
Would this not work:
if(price.value.match(/^[0-9]+$/) && +(price.value) > 0){
im not quite sure what the hash symbol is being used for so i removed it in my example. Unless you are trying to find the ID in which you would have to look for the element like so:
var price = document.querySelector("#price");
function price()
{
var price = document.getElementById("#price"); // get the element
if (isNaN(price.value) || price.value <= 0) // if the value is not a number or is less than 0
console.log('Incorect');
else // otherwise
console.log('Correct');
}
How about some thing like that
var price = document.getElementById("price").value;
if (parseInt(price) > 0 && !isNaN(price)))
{
// then do something
}
else
{
// else do something
}

SAP Java Script for % Increase Function

We have a Requirement, where Business always discuss to Increase or Decrease the Target sales value by some Integers, accordingly we have Input Enabled SAP WAD report which gives sale numbers. Moreover Now we have developed all of the Necessary Configuration to perform this %Increase Function but need this precise Javascript code optimization on my existing code.
Logic is, I Select the Required multiple row Cells and subsequently admit to press the %Increase Button, a Prompt will pop-up and enter the required integer Values and say OK.
So,for that Input provided integer value, back-end code should perform the %Increase calculation and insert back to respective cell.
x = (Input Value/100)X Cell Value;
Result = Cell value X x
Here I need your help fix the Javascript syntax correction.
The below Code performs 80% of my required function, but only need 20% of modification on that.
function sapbi_rig_plan_Per_Increase(content){
if ('undefined' == typeof(content) ) content = '';
if (content == null) content = '';
var info = sapbi_rig_plan_inf;
if (sapbi_rig_plan_isValidState(info) === false){
alert('Please select the range.');
return;
}
var content = prompt("Please enter value", " ");
if (isNumber(content ) == true){
var cell;
for(var cntSel = 0; cntSel<info.activeSel.length; cntSel++){
cell = document.getElementById(info.activeSel[cntSel][0]);
var fact = (content/100)*cell;
var content1 = fact+cell;
sapbi_rig_plan_setContent(cell, content1);
}
} else {
alert('Please Enter the Valid Qty only');
}
}
Please Note : I am Not java Developer, i am SAP BW-IP Developer

jQuery plugin for inline form validation

I m using jQuery plugin for inline form validation in my .NET web application.
With following:
jquery.validationEngine.js
jquery.validationEngine-en.js
jquery-1.6.min.js
validationEngine.jquery.css
template.css
Now i have two html <select> , one is for minimum value and second is for maximum value. Values should be check onchange.
How to use custom functions to Validate minimum and maximum values.
Untested but according to the reference of the jQuery plugin, you can work with custom functions to validate a field value:
HTML:
<input class="validate[required,funcCall[checkMinMax]]" type="text" ...
JavaScript:
function checkMinMax(field, rules, i, options) {
var minVal = parseInt($("#sel_min").val(), 10),
maxVal = parseInt($("#sel_max").val(), 10);
if(!isNaN(minVal) && !isNaN(maxVal)) {
if (minVal > maxVal) {
return 'YOUR MESSAGE TEXT HERE';
} else if (maxVal < minVal) {
/* OR use the options with */
return options.allrules.validate2fields.alertText;
}
}
}
It's a long time since I saw the usage of another jQuery validation plugin than jQuery validate, comparing both I suggest you should look into this, because it became more a less the 'standard' way to handle form validation with jQuery, it's well documented and you'll find most of the problems already solved.
<select id="sel_max" name="sel_max" style="width:83px" class="validate[required,funcCall[checkMinMax]]" >
jquery.validationEngine.js :
window.checkMinMax = function(field, rules, i, options) {
var minVal = parseInt($("#sel_min").val(), 10);
var maxVal = parseInt($("#sel_max").val(), 10);
var bothHaveValues = !isNaN(minVal) && !isNaN(maxVal);
if (bothHaveValues) {
if (minVal > maxVal) {
return options.allrules.cmm.alertText2;
}
else if (maxVal < minVal) {
return options.allrules.cmm.alertText;
}
}
};
jquery.validationEngine-en.js :
"cmm": {
"alertText": "* Max value < Min value!",
"alertText2": "* Min value > Max value!"
},

if input field is not a number OR not empty replace with a number

I have an input field that I am monitoring for changes using an .on('input') function as this covers .change and .keyup.
There is no submit button yet I just want to change the behaviour of the input field depending on what is entered.
I will validate server side later and I'm using html5 type='number'.
I only want the field to be able to hold a number, or it can be empty. The user might want to empty the contents to type the number 15 for example.
However I don't want any other characters to be accepted - if they are entered, a prompt should show notifying the user of this and the field is defaulted back to it's starting value of 1.
HTML
<input type="number" class="input-field" placeholder="" value="1" min="1">
JS
$(document).ready(function ($) {
var num = $('input[type="number"]').val();
$('input[type="number"]').on('input', function () {
var num = $(this).val();
if (num < 1 || isNaN(num) || num !== '') {
alert(num + ' is not a number or is less than 1');
$(this).val(1);
}
});
});
I have tried with the above code and it doesn't allow for an empty field. I've also tried if (num < 1 || isNAN(num) || num.length != 0) {
do I need to use .replace() with a Regexr. I've been looking at a few questions on here like here but I'm not sure thats what I'm looking for considering I'm testing for an empty string.
JSFIDDLE
You can use the constraint validation API:
$('input[type="number"]').on('input', function () {
if (!this.validity.valid) {
alert(this.value + ' is not a number or is less than 1');
this.value = 1;
}
});
$('input[type="number"]').on('input', function () {
if (!this.validity.valid) {
alert(this.value + ' is not a number or is less than 1');
this.value = 1;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="number" class="input-field" placeholder="" value="1" min="1">
However, note that this behavior is obtrusive. If an user types the wrong key, you will annoy him with a modal dialog and will clear the number.
Consider doing nothing. HTML5 browsers won't send the form if the input is not valid.
The HTML5 answer is definitely more elegant.
But if you want to offer more support, this is usually the route I take when trying to verify numbers.
Note that I am using data-min attribute but if you want to switch you can always use $.attr() to grab your min="" attribute.
$(document).ready(function ($) {
$('input[type="number"]').on('change', function () {
var min = parseInt(this.dataset.min),
num = isNaN(parseInt(this.value)) ? 0 : parseInt(this.value),
clamped = Math.max(num, min);
if(num != clamped) {
alert(num + ' is less than 1');
this.value = clamped;
}
});
});
jsfiddle

Javascript calculator as users type numbers

I'm a noob at Javascript, but I'm trying to implement something on my website where users can type a quantity, and the subtotal updates dynamically as they type.
For example: if items are 10 dollars each, and a user types 5 in the text field I would like it to show $50 next to the text box. Pretty simple multiplication, but I don't know how to do it with Javascript. I think onKeyPress somehow? Thanks!
Assuming the following HTML:
<input type="text" id="numberField"/>
<span id="result"></span>
JavaScript:
window.onload = function() {
var base = 10;
var numberField = document.getElementById('numberField');
numberField.onkeyup = numberField.onpaste = function() {
if(this.value.length == 0) {
document.getElementById('result').innerHTML = '';
return;
}
var number = parseInt(this.value);
if(isNaN(number)) return;
document.getElementById('result').innerHTML = number * base;
};
numberField.onkeyup(); //could just as easily have been onpaste();
};
Here's a working example.
You should handle 'onkeyup' and 'onpaste' events to ensure you capture changes by keyboard and via clipboard paste events.
<input id='myinput' />
<script>
var myinput = document.getElementById('myinput');
function changeHandler() {
// here, you can access the input value with 'myinput.value' or 'this.value'
}
myinput.onkeyup = myinput.onpaste = changeHandler;
</script>
Similarly, use getElementById and the element's innerHTML attribute to set the contents of an element when you want to show the result.

Categories

Resources