setfocus()

[trancecommunity]

Hi

I can seem to figure out how to set the focus back on a form box with an invalid entry.

function isFilledNum(number) {

	var number = parseInt(number.value)
	

if( number< 0 || number > 100 || isNaN(number) == true) 

{
alert("Enter a number between 0 and 100 ");
setfocus(document.getElementById(this));

}

I get the error "Uncaught TypeError: Cannot call method 'focus' of null".

[WolfShade]

document.getElementById(this).focus(); might do it. I rarely use this for anything.

[trancecommunity]

Originally Posted by WolfShade

document.getElementById(this).focus(); might do it. I rarely use this for anything.

Returns

Uncaught TypeError: Cannot call method 'focus' of null

If i type in an invalid number.

[xelawho]

what is "this" meant to be referring to in your code?

and why not

document.getElementById("whatever_the_actual_id_of_the_input_is").focus();

?

[WolfShade]

Yeah, it really should be the actual id of the element. Pass it along as an argument.

[trancecommunity]

Would this still apply if i have several boxes that need verifying using the same function. i.e different test results. As each box is filled and clicked out of it calls the function to verify.

What would the id be in this case as it changes every box as far as i know?

I see it always reverts back to the 1st id used even if the 3rd or 4th box is wrong. Any way of making it change depending on box tested?

[Philip M]

1 <input type ="text" id = "text1" onblur = "check(this)";><br>
2 <input type ="text" id = "text2" onblur = "check(this)";><br>
3 <input type ="text" id = "text3" onblur = "check(this)";><br>

<script type = "text/javascript">
function check (which) {
var box = which.id;
var val = which.value;
// check that val is a number within a certain range
alert ("You have checked box " + box + " whose value is " + val);
if (val != "OK") {
document.getElementById(box).focus();
}
}
</script>

var number = parseInt(number.value); // two variables with the same name! In any case it is not a good idea to use the word number which can be confused with Number().
should be
var num = Math.floor(number.value);

parseInt() is used to convert numbers from one base to another, and if you use it you need to specify the radix (10).

[trancecommunity]

Cheers for the reply but that doesnt setfocus back to the wrong box.

edit. sorry i see what you mean there when it just alerts where the problem is but it needs to setfocus.

[trancecommunity]

Might help if i add this.

<label for="mark1">Mark One</label>
 <input type="text" name="mark1" id="mark1" size="3" maxlength ="3" value="0" onblur="isFilledNum(this)">
</div>
<div>
<label for="mark2">Mark Two</label>
 <input type="text"  name="mark2" id="mark2" size="3" maxlength ="3" value="0" onblur="isFilledNum(this)" >
</div>
<div>
<label for="mark3">Mark Three</label>
<input type="text"  name="mark3" id="mark3" size="3" maxlength ="3" value="0" onblur="isFilledNum(this)">
</div>
<div>
<label for="mark4">Exam Mark</label>
<input type="text"  name="mark4" id="mark4" size="3" maxlength ="3" value="0" onblur="isFilledNum(this)">
</div>

function isFilledNum(number) {

	var number1 = parseInt(number.value)
	

if( number1< 0 || number1 > 100 || isNaN(number1) == true) {

var box = number.id;
var val = number.value;

alert ("You have checked box " + box + " whose value is " + val);
}

[Philip M]

Use this:-

<div>
<label for="mark1">Mark One</label>
 <input type="text" name="mark1" id="mark1" size="3" maxlength ="3" value="0" onfocus = "this.value = '' "onkeyup="if(/\D/g.test(this.value) || (this.value>100)) {alert('Only integer numbers from 0-100 are valid in this box.  '); this.value = ''; this.focus()}" />
</div>

<div>
<label for="mark2">Mark Two</label>
<input type="text" name="mark2" id="mark2" size="3" maxlength ="3" value="0" onfocus = "this.value = '' "onkeyup="if(/\D/g.test(this.value) || (this.value>100)) {alert('Only integer numbers from 0-100 are valid in this box.  '); this.value = ''; this.focus()}" />
</div>

<div>
<label for="mark3">Mark Three</label>
<input type="text" name="mark3" id="mark3" size="3" maxlength ="3" value="0" onfocus = "this.value = '' "onkeyup="if(/\D/g.test(this.value) || (this.value>100)) {alert('Only integer numbers from 0-100 are valid in this box.  '); this.value = ''; this.focus()}" />
</div>

<div>
<label for="mark4">Exam Mark</label>
<input type="text" name="mark4" id="mark4" size="3" maxlength ="3" value="0" onfocus = "this.value = '' "onkeyup="if(/\D/g.test(this.value) || (this.value>100)) {alert('Only integer numbers from 0-100 are valid in this box.  '); this.value = ''; this.focus()}" />
</div>

The advantage of this approach is that the validity of the entry can vary with textbox, i.e. one box may have a limit of 100, another a limit of 20 etc.

[trancecommunity]

Great stuff. Cheers

[Philip M]

Add to each input

onblur= "if(this.value == ''){this.value = 0}"

[trancecommunity]

Originally Posted by Philip M

Add to each input

onblur= "if(this.value == ''){this.value = 0}"

With the rest of the code you gave?

[Philip M]

Originally Posted by trancecommunity

With the rest of the code you gave?

Yes, that's what I meant by "add to each input". To spell it out:-

<div>
<label for="mark1">Mark One</label>
 <input type="text" name="mark1" id="mark1" size="3" maxlength ="3" value="0" onfocus = "this.value = '' "onkeyup="if(/\D/g.test(this.value) || (this.value>100)) {alert('Only integer numbers from 0-100 are valid in this box.  '); this.value = ''; this.focus()}" onblur= "if(this.value == ''){this.value = 0}"/>
</div>

That means that the field must have a value in it whether one is entered by the user or not.