CODEWITHSUNDEEP
javascriptjqueryhtml
Muchtar
Muchtar

Reputation: 122

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?

Upvotes: 1

Views: 94

Answers (6)

Alvin
Alvin

Reputation: 302

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

Upvotes: 0

Abhisek Malakar
Abhisek Malakar

Reputation: 899

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

Upvotes: 1

Pugazh
Pugazh

Reputation: 9561

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>

Upvotes: 0

Tushar Gupta
Tushar Gupta

Reputation: 15913

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>

Upvotes: 0

Sam Tolton
Sam Tolton

Reputation: 357

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;
}

Upvotes: 0

Bardo
Bardo

Reputation: 2523

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.

Upvotes: 0

Related Questions