Javascript - onblur function cannot change the value of the textbox

Question

I have some textboxes allowing users to enter numbers from 0 to 20. So that I have a js validation code to test if they follow the rule or not.

I have such the following textboxes:

<input type="textbox" name="tx1" onblur="checkValue(this.value)" />
<input type="textbox" name="tx2" onblur="checkValue(this.value)" />
....

Then I write a js function like this:

function checkValue(value) {
  if (value > 20) {
     return this.value = 20;
  } else if (value < 0){
     return this.value = 0;
  } else if (value == '' || isNan(value)) {
     return this.value = 0;
  } else {
     return this.value;
  }
}

I tried to test via console.log(). I tried alert('hi') and it works. However, it does not change value at all when meeting the above conditions. So could anyone help me to solve this?

Solution 1

Try this

<input type="textbox" name="tx1" onblur="checkValue(this)" />

function checkValue(sender) {
var value = parseInt(sender.value);
  if (value > 20) {
     sender.value = 20;
  } else if (value < 0){
     sender.value = 0;
  } else if (value == '' || isNan(value)) {
     sender.value = 0;
  } else {
     return sender.value;
  }
}

Solution 2

Re-Write your code as below. Only passing this can do the job then.

HTML

<input type="textbox" name="tx1" onblur="checkValue(this)" />
<input type="textbox" name="tx2" onblur="checkValue(this)" />
....

Javascript

function checkValue(obj) {
  if (obj.value > 20) {
     obj.value = 20;
  } else if (obj.value < 0){
     obj.value = 0;
  } else if (value == '' || isNan(obj.value)) {
     obj.value = 0;
  } 
}

Solution 3

Your script is return the value but no place you to set those values. So when the blur function invokes script surely invoked.. but the value is not set any where.

Solution 4

"isNan()" is not a function but "isNaN()" is, send input elemment, not only element's value, for update the input value.

<script>
    function checkValue(input) {
    console.log(input.value);
  if (input.value > 20) {
     return input.value = 20;
  } else if (input.value < 0){
     return input.value = 0;
  } else if (input.value == '' || isNaN(input.value)) {
     return input.value = 0;
  } else {
     return input.value;
  }
}
</script>

<input type="textbox" name="tx1" onblur="checkValue(this)" />
<input type="textbox" name="tx2" onblur="checkValue(this)" />

View more solutions

Comments

[Sean Johnson]

Alternatively, set the onblur event handlers through javascript so that "this" in the function references the input. Inline javascript is about as tacky as inline styles.