I am calculating Discount using jquery. But I have a problem calculating the correct discount. My calculation gives me wrong result.
Here is my code
$(document).on("change keyup blur", "#chDiscount", function() {
var amd = $('#cBalance').val();
var disc = $('#chDiscount').val();
if (disc != '' && amd != '')
$('#cBalance').val((parseInt(amd)) - (parseInt(disc)));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="number" id="cBalance" value="1575">
<br>
<input type="number" id="chDiscount">
I have a prepopulated value for cBalance input i.e.,1575. When I type discount value for example 500 in chDiscount input, it gives me 1020 and not 1075. And I want the value 1575 to be 1575 when there is no value or zero value in the chDiscount input. And the caculation keeps incrementing the cBalance value whenever I type new value in the chDiscount input, it does not increment from the default value.
My exptected output: When I type 500, I want the default value 1575 to be 1075. And if I delete the 1000 that I type, I want back the default value 1575 in cBalance. And If I type 5 in chDiscount, the default value would become 1570 and if I hit backspace to delete, it would become 1575 again.
How can I achieve this? Where did I go wrong? Please help.
$(document).on("change keyup blur", "#chDiscount", function() {
var amd = $('#cBalance').val();
var disc = $('#chDiscount').val();
if (disc != '' && amd != '') {
$('#result').val((parseInt(amd)) - (parseInt(disc)));
}else{
$('#result').val(parseInt(amd));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="number" id="cBalance" value="1575">
<br>
<input type="number" id="chDiscount">
<br>
<input type="number" id="result">
I added result field because otherwise you couldn't specify amd
As above mention code is just subtracting the main value. here is exact solution
<input type="number" id="cBalance" value="1575"> <br>
<input type="number" id="chDiscount"> <br>
<input type="number" id="result">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
$(document).on("change keyup blur", "#chDiscount", function() {
var main = $('#cBalance').val();
var disc = $('#chDiscount').val();
var dec = (disc/100).toFixed(2); //its convert 10 into 0.10
var mult = main*dec; // gives the value for subtract from main value
var discont = main-mult;
$('#result').val(discont);
});
JSFIDDLE
Related
I have the following HTML that is within a form, to accept 2 numbers from two separate inputs
<input type="number" id="amount" name="amount" value="0" onchange="ltv()">
<input type="number" id="property_value" name="property_value" value="0" onchange="ltv()">
<p id="ltv"></p>
Then some JavaScript
function ltv() {
var amount = document.getElementById("amount").textContent;
var property_value = document.getElementById("property_value").textContent;
document.getElementById("ltv").innerHTML = Math.round(amount/property_value*100);
};
However after entering a number into the "amount" input the ltv element is updated with NaN which is to be expected at this stage as only the first variable in the math operation is set, however upon entering the second number and tabbing away from the input field the ltv is not updated again.
Seems like textContent isn't returning anything. Try to use .value
function ltv() {
var amount = document.getElementById("amount").value;
var property_value = document.getElementById("property_value").value;
document.getElementById("ltv").innerHTML = Math.round(amount/property_value*100);
};
I have stumbled across on a problem I do not understand why it's even happening (not working).
What I have to do is just to replace 1 's amount value, for some reason I just can't lol.
When user enter amount, in case he enters ",", I have to change it to "." Instantly - live.
Here is the sample..
$(document).ready(function() {
// Uberfix Amount
$(".form-amount").keyup(function() {
var amount = $(".form-amount").val();
$(".form-amount").val().replace(",", ".");
alert('passed');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" class="form-amount" id="textare" value="" placeholder="0.1 BTC - 10 BTC" />
It's because you did not set the value of the textbox after changing its value. See working code below:
$(document).ready(function() {
// Uberfix Amount
$(".form-amount").keyup(function() {
var $this = $(this), amount = $this.val();
$this.val(amount.replace(",", "."));
console.log('passed');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" class="form-amount" id="textare" value="" placeholder="0.1 BTC - 10 BTC" />
You computed the modified string but do not set it back to the field. If I understand your problem correctly this should work for you:
$(document).ready(function() {
// Uberfix Amount
$(".form-amount").keyup(function() {
var amount = $(".form-amount").val();
$(".form-amount").val(amount.replace(",", "."));
alert('passed');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="text" class="form-amount" id="textare" value="" placeholder="0.1 BTC - 10 BTC" />
Note that .val() gets a value while .val(string) sets the value of the field to the specified string.
I would like to put in "max" and "min" values in separate input fields and then have another set of input fields autofill with all the integers in between and included the min and max #'s. I've never used JS before so I'm not sure if there is a method for this or if you need to loop through the numbers?
$("#min1").keyup(function(){
$("#speed1").val(this.value);
});
$("#max1").keyup(function(){
$("#speed5").val(this.value);
});
Just add one event for the boths (use input instead of keyup it's more effecient when we want to track input field change) then call result() function that will clear result div then generate input fields :
function result(min,max){
$("#result").html("");
for(var i=min;i<=max;i++)
$("#result").append('<input type="number" value="'+i+'"/>');
}
$("body").on('input', '#min1,#max1', function(){
var min = $('#min1').val();
var max = $('#max1').val();
if( min!="" && max!="")
if( min<max )
result(min, max);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="min1" type="number" placeholder="min" value="0"/>
<input id="max1" type="number" placeholder="max" value="0"/>
<div id="result"></div>
Good day,
I have 3 text fields for input.
TotalWeight
CustomUnitWeight
CustomsNumberOfUnit
There should be a validation to make sure TotalCustomWeight matches TotalWeight (neither higher nor lower).
I started playing around trying to construct a function for validating this no luck and looking for assistance
Scenario :
User input total weight of pkg at 30, then put number of custom unit at 2 and the weight at 10. On click the function calculate 2 * 10 = 20 and look at the total weight 30 and compare the total custom weight. In this case 20 does not equal to 30 therfore throw error message.
HTML
<input type="text" name="TotalWeight" id="TotalWeight" />
<input type="text" name="customsNumberOfUnitsUSA" id="CustomsNumberOfUnits" />
<input type="text" name="CustomsUnitWeight" id="CustomsUnitWeight" onChange="ChkWeight();" />
JAVASCRIPT
$(function(ChkWeight){
$('#CustomsUnitWeight').click(function() {
var TotalWeight = document.getElementById('TotalWeight');
var CustomUnitWeight = document.getElementById('CustomsUnitWeight');
var CustomsNumberOfUnit = document.getElementById('CustomsNumberOfUnits');
var TotalCustomWeight = CustomUnitWeight * CustomsNumberOfUnit;
if (TotalWeight != TotalCustomWeight) {
error message "pkg weight does not match total custom weight"
}
});
});
Well everything else is fine in your code just needs to put .value to get value from your input fields and converting string (simple text) to Float type and then calculate and show alert like
<body>
<input type="text" name="TotalWeight" id="TotalWeight" />
<input type="text" name="customsNumberOfUnits" id="CustomsNumberOfUnits"/>
<input type="text" name="CustomsUnitWeight" id="CustomsUnitWeight" onblur="CheckWeight()" />
//I have changed the event as onblur and calling CheckWeight() function defined in javascript below.
</body>
<script type="text/javascrit">
function CheckWeight()
{
var TotalWeight = document.getElementById('TotalWeight').value;
var CustomUnitWeight = document.getElementById('CustomsUnitWeight').value;
var CustomsNumberOfUnit = document.getElementById('CustomsNumberOfUnits').value;
//parsing text value to Float type for multipication
var TotalCustomWeight = parseFloat(CustomUnitWeight) * parseFloat(CustomsNumberOfUnit);
if (TotalWeight != TotalCustomWeight)
{
alert("pkg weight does not match total custom weight");
}
}
</script
and Off course you must need to validate for value to be number before calculation. This works perfect.
I'm new to web development, and I got an error when trying to apply a fairly simple javascript code.
Suppose that we have two numeric html5 fields:
<label for="f1">First field</label>
<input type="number" name="f1" id="f1" min="0" step="1" value="100"/>
<label for="f2">Second field</label>
<input type="number" name="f2" id="f2" min="0" step="1" value="100"/>
Now I want to apply two simple rules for these fields.
When value of the first field changed, then this value (from first field) sets to the second field:
$("#f1").bind("change paste keyup", function() {
$("#f2").val($("#f1").val()); });
This works well.
The value of the second field can't exceed the value of the first field:
$("#f2").bind("change paste keyup", function() {
var f1_ = $("#f1").val();
var f2_ = $("#f2").val();
var f2_new = (f2_ > f1_)? f1_ : f2_;
$("#f2").val(f2_new); });
It works with some bugs - when the value of the second field is 10, 100, 1000, 10000, ..., and I try to decrease it, new value becomes equal to the value of the first field.
See example here
Even though the input type is number, the type of the value returned from .val() is a string. To fix this, just convert back to a number by using Number(f1_) and Number(f2_). Here is a fiddle. See that before the conversion, the console.log( typeof f1_ ) line logs string.
$("#f1").bind("change paste keyup", function()
{
$("#f2").val($("#f1").val());
});
$("#f2").bind("change paste keyup", function()
{
var f1_ = $("#f1").val();
var f2_ = $("#f2").val();
console.log( typeof f1_ );
var f2_new = (Number(f2_) > Number(f1_))? f1_ : f2_;
$("#f2").val(f2_new);
});
I like to put the + symbol in front of a String to convert it to a Number. See the following fix: http://jsfiddle.net/fXnFF/531/