Javascript compare not working - javascript

I have a condition in javascript like below
function check()
{
var amount = document.getElementById('pamount').value;
var quantity = document.getElementById('qty').value;
var pmin = document.getElementById('pmin').value;
var pmax = document.getElementById('pmax').value;
var stock = document.getElementById('stocks').value;
if (amount > pmax) {
alert('Price should not be more than maximum price');
return false;
}
if (amount < pmin) {
alert('Price should not be less than minimum price');
return false;
}
if (quantity > stock) {
alert('Please enter quantity no more than maximum');
return false;
}
if (quantity < 1) {
alert('Please enter valid quantity');
return false;
}
}
And here is the html fields
<input type="text" value="" data-toggle="tooltip" data-placement="top" class="form-control small qty_box" id="qty" name="qty">
<input style="width:90px; float:left" type="text" value="" class="form-control small" id="pmin" name="min">
<input style="width:90px; float:left" type="text" class="form-control small" id="pmax" name="max">
But it always return false. When I enter less value for amount it alerts the same. I tried alerting amount and pmax. It gets actual value. But something wrong with this compare
I gave amount as 75 and pmax as 100.


Use parseFloat() or parseInt() as per your need to compare numbers. Below code used parseFloat().
var amount = parseFloat(document.getElementById('pamount').value);
var quantity = parseFloat(document.getElementById('qty').value));
var pmin = parseFloat(parseFloat(document.getElementById('pmin').value);
var pmax = parseFloat(document.getElementById('pmax').value);
var stock = parseFloat(document.getElementById('stocks').value);


There is no issue with your code. Check whether your browser is disabled the javascript. That will be the issue.


Remove that return false from { }
if (amount > pmax) {
alert('Price should not be more than maximum price');
}
else
//rest of the code

Related

Prevent inserting value greater than max at the same time restrict to decimal

I want to restrict the user input to two decimal places only at the same time restrict user input not greater than the maxvalue. My code below doesn't work together.
JS Code
var validate = function(e) {
var t = e.value;
e.value = (t.indexOf(".") >= 0) ? (t.substr(0, t.indexOf(".")) + t.substr(t.indexOf("."), 3)) : t;
}
var input = document.getElementById("amt");
// Add event listener
input.addEventListener("input", function(e){
var max = parseFloat(input.max);
this.setCustomValidity("");
console.log(this.value)
if(parseFloat(this.value) > max){
this.value = max;
} else if(this.validity.rangeUnderflow){
this.setCustomValidity("Does not reach the amount requirement");
}
});
html code
<input type="number" min="100" max="999.99" step=".01" name="amt" id="amt" oninput="validate(this)" required>

How to calculate total?

I faced a problem for my code and I could not solve it. I have 2 functions, the first one calculates the total and second one discounts the total (if the user write the discount code, it will show the discounted total). But I don't know how to get and call the right value from total to keep it in the second function to calculate the discount because it always shows 0 in the amount. The TOTAL is for the first function and JavaScript code is for the second function.
total = parseInt(TicketsPrice[i].value) * parseInt(NOfTictet);
document.getElementById("total").innerHTML = total;
function discount(coupon) {
var yCoupon = "winner1";
var price = Number(document.getElementById('total').innerHTML);
var amount;
var input = document.getElementById('discount').value;
if (input == coupon) {
amount = price || 0 * 0.25;
document.getElementById("Offerprice").innerHTML = amount;
} else {
alert("Invalid");
}
}
<input type="text" name="coupon" id="discount">
<button onclick="discount()">discount</button>
<p id="total"></p>
<p><span id="Offerprice"></span></p>

Something like this?
function discount() {
var coupon = "winner1";
var price = Number(document.getElementById('total').value);
var input = document.getElementById('discount').value;
if (input == coupon) {
var amount = price * (1 - .25) // 25% off coupon
document.getElementById("Offerprice").innerHTML = amount;
} else {
document.getElementById("Offerprice").innerHTML = 'Invalid coupon'
}
}
<div>Total: <input id="total"></div>
<div>Coupon: <input id="discount"></div>
<button onclick="discount()"> discount</button>
<p><span id ="Offerprice"></span></p>

You have several issues in your code. Here is a working version. I hardcoded the total only for testing because I don't know the HTML for your tickets:
var total = 500; //This is only for testing.
document.getElementById("total").innerHTML = total;
function discount() {
var coupon = "winner1";
var price = Number(document.getElementById('total').innerHTML);
var input = document.getElementById('discount').value;
if (input == coupon) {
var amount = price * 0.75; //discount of 25%
document.getElementById("Offerprice").innerHTML = amount;
} else {
alert("Invalid");
}
}
<input type="text" name="coupon" id="discount">
<button onclick="discount()">discount</button>
<p id="total"></p>
<p><span id="Offerprice"></span></p>

java script checks two input values only by digit

var tbv = document.getElementById("inputFrom");
var tbb = document.getElementById("inputTo");
var submit_check = document.getElementById("checkValues");
function blr() {
var von = tbv.value;
var bis = tbb.value;
console.log(von);
console.log(bis);
if (von >= bis || bis <= von) {
checkValues.disabled = true;
} else {
checkValues.disabled = false;
}
}
tbv.addEventListener("blur", blr);
tbb.addEventListener("blur", blr);
From: <br>
<input type="text" class="form-control" pattern="(|-)?[0-9]{0,3}?" title="Min: -100" id="inputFrom" />
<br> To: <br>
<input type="number" class="form-control" pattern="(|-)?[0-9]{0,3}?" title="Max: 300" id="inputTo" />
<br>
<button type="submit" class="btn btn-primary" id="checkValues"> Check </button>
As I explained above, I want to check if the value of the input "From" is greater or equal to the input "To".
The thing is, this works only by checking digit for digit, so that if input "From" has the value 12 and input "To" has the value 1, it is correct.
Anyone an idea what I´m doing wrong?

Try this
function blr() {
var von = parseint(tbv.value);
var bis = parseint(tbb.value);
console.log(von);
console.log(bis);
if (von >= bis) {
checkValues.disabled = true;
} else {
checkValues.disabled = false;
}
}
tbv.addEventListener("blur", blr);
tbb.addEventListener("blur", blr);
I have jsut parse the input as Integer and then compare, and there is no need to compare in both direction like a>=b and b<=a .-silly

By default .value returns a string, so use parseInt() to parse the value into a number.
Note: von >= bis and bis <= von means the same. Use of any one is enough.
var tbv = document.getElementById("inputFrom");
var tbb = document.getElementById("inputTo");
var submit_check = document.getElementById("checkValues");
function blr() {
var von = parseInt(tbv.value);
var bis = parseInt(tbb.value);
console.log(von);
console.log(bis);
if (von >= bis) {
checkValues.disabled = true;
} else {
checkValues.disabled = false;
}
}
tbv.addEventListener("blur", blr);
tbb.addEventListener("blur", blr);
From: <br>
<input type="text" class="form-control" pattern="(|-)?[0-9]{0,3}?" title="Min: -100" id="inputFrom" />
<br> To: <br>
<input type="number" class="form-control" pattern="(|-)?[0-9]{0,3}?" title="Max: 300" id="inputTo" />
<br>
<button type="submit" class="btn btn-primary" id="checkValues"> Check </button>

Javascript is loosely typed. It's variables get their type when data is loaded the first time, but can change type during their lifetime.
When you create a variable and load it with data from an input, it's considered a string, and string comparison is made character by character, not as a whole.
If you convert your values to int or float, using parseInt() or parseFloat() you'll have your problem solved.

Well for a start you don't need the OR part of this - (von >= bis || bis <= von) - you can just use (von >= bis).
If the values are always going to be numeric, then you can simply cast them by putting a plus before them, like so:
if (+von >= +bis) {
checkValues.disabled = true;
} else {
checkValues.disabled = false;
}

Use parseInt(). Since you get the value of textbox as string, you need to convert the string to number
var tbv = document.getElementById("inputFrom");
var tbb = document.getElementById("inputTo");
var submit_check = document.getElementById("checkValues");
function blr() {
var von = parseInt(tbv.value);
var bis = parseInt(tbb.value);
console.log(von);
console.log(bis);
if (von >= bis) {
checkValues.disabled = true;
} else {
checkValues.disabled = false;
}
}
tbv.addEventListener("blur", blr);
tbb.addEventListener("blur", blr);
From: <br>
<input type="text" class="form-control" pattern="(|-)?[0-9]{0,3}?" title="Min: -100" id="inputFrom" />
<br> To: <br>
<input type="number" class="form-control" pattern="(|-)?[0-9]{0,3}?" title="Max: 300" id="inputTo" />
<br>
<button type="submit" class="btn btn-primary" id="checkValues"> Check </button>

Agree with David Thomas. You need to convert string to a number.
Since you already have regular expression on your input box try using Number object to convert your string literal to Number and then compare.
function blr() {
var von = Number(tbv.value);
var bis = Number(tbb.value);
console.log(von);
console.log(bis);
if (von >= bis) {
checkValues.disabled = true;
} else {
checkValues.disabled = false;
}
}
For more detail on Number object visit
this link

Modificate in live value of a input

I have a form conversion, and I need the result is updated according to the amount entered by the user in live.
But the result is always the same.
I think the problem is in the variable price, this is not updated with the last written number of input.
This is the form
<input type="text" id="from_amount" value="0" name="amount" />
<span class="num" id="conv_result">0</span>
<input type="submit" action="" method="" >
This is the javascript
function a(){
var price = $("#from_amount").val(); //Get the number of the input
if (price == 0){
var total = 1;
}else if (price > 20 && price < 30){
var total = price * 2;
}else{
var total = 4;
}
return total;
}
var conver = {
'people': {
'rooms': a()
},
};

Javascript total return NaN for 4 digits num

Here is the javascript for calculating the price of the item the problem is that
whenever the price is 4 digits the value that return is NaN.
here's my hidden field for the price:
<input type="hidden" name="price" id="price"class="price" value="4500"readonly >
here's for my quantity field
<input type="number" name="quant" id="quant" value="2" />
here's for my shipment fee
<select id="shipment" onchange="myFunction3()" name="shipment2" disabled>
<option value="100" data-quantity="1">1 for 100 pesos </option>
</select
here's for the total price
<input type="text" id="demo" name="total_price" style="margin-top:10px;margin-left:5px;" readonly>
Script for changing the value of shipment
<script type="text/javascript">
document.getElementById('quant').addEventListener("keyup", function(){
var value = parseInt(this.value, 20),
selectEle = document.getElementsByTagName('select')[0],
options = selectEle.options,
selectedNum = 0;
for(var i = 0; i < options.length; i++) {
//checking the exact string with spaces (" " + value + " ")
if(options[i].textContent.indexOf(" " + value + " ") > -1) {
selectedNum = i;
}
}
selectEle.selectedIndex = selectedNum ? selectedNum : 0;
}, false);
</script>
Calculating all the values
function myFunction3() {
var y= document.getElementById("shipment").value;
return y;
}
<script>
$("#price,#quant,#shipment").keyup(function () {
if(+myFunction3() =="" )
{
$('#demo').val(0);
}
else if($('#trigger')=="checked") //this is the problem
{
$('#demo').val($('#price').val() * $('#quant').val() ;
}
else
{
$('#demo').val($('#price').val() * $('#quant').val() + +myFunction3());
}
});
</script>

Not sure if this was just typed incorrectly in here, but you have a syntax error (missing closing parenthesis) near the problem area:
$('#demo').val($('#price').val() * $('#quant').val() ;
Should be:
$('#demo').val($('#price').val() * $('#quant').val());
I think it would be much better to ensure you aren't working with strings before you do math on them:
var price = parseInt($('#price').val(), 10);
var quantity = parseInt($('#quant').val(), 10);
$('#demo').val(price * quantity);
You could go further and ensure that neither of them are NaN prior to working with them:
var price = parseInt($('#price').val(), 10);
var quantity = parseInt($('#quant').val(), 10);
if(!isNaN(price) && !isNaN(quantity)) {
$('#demo').val(price * quantity);
} else {
alert('Please enter numbers only!');
}

Categories

Resources