PDA

View Full Version : Setting focus to field after check

Crashin
10-31-2002, 09:38 PM
I'm doing some form checking and in numeric fields I'm calling a function during the onchange event to verify that the field is only numeric. If not, I'd like to give an alert and then return focus and select the field's contents. My function is below:

function check_num(field) {
var numField = field;
var numValue = "";
numValue = numField.value;
if (!numbersOnly(numValue)) {
alert("Field must be entirely numeric!");
numField.focus();
numField.select();
return false;
}
else
return true;
}

My function call looks like:

onchange='check_num(this)'

As you can see, I'm using another function to perform the actual number check. It works fine with the exception that it doesn't set focus and select the contents of the field in question. It just moves on to the next field after the user clicks "OK" in the alert. Any ideas? Thanks!
beetle
10-31-2002, 10:46 PM
Boolean return values from the function do you no good unless you return them to the event (so it will cancel if false)

onchange="return check_num(this)"
Crashin
10-31-2002, 10:51 PM
That worked PERFECTLY! Thank you!! :) If you have a moment I'd like to understand what using "return" is doing there? What is it doing that it wasn't doing before?
beetle
10-31-2002, 11:06 PM
Well, to cancel an event that can be cancelled (not all can) you need to send a false value to it (we send it with the return keyword). For example...<a href="http://www.google.com" onClick="return false;">link</a>This link won't do anything, beacause we are cancelling the click event which is responsible for firing the default action. In this case, linking us to Google. So, nothing happens.

A popular application of this is a disclaimer type link. For example<a href="secure.htm" onclick="return confirm('Are you sure?');">Enter</a>Since the built-in function confirm() will return a true/false value based on what the user clicks...the link may or may not be successful.

Now, your function, check_num(), provides a boolean return value as well (just like confirm()). So, if the validation fails, false is returned, so, in effect, the event sees this:onchange="return false;"Which cancels the event, and subsequently, the change too.

Got it?
Crashin
10-31-2002, 11:12 PM
Yes, I understand perfectly! :thumbsup: Thank you for explaining that. I really appreciate it! That cleans up a lot of what I've been working on...
Stoffel
02-02-2003, 09:43 PM
Hiya,

Can this be used to on a submit button
if yes, what do I have to change?

I use a onClick event.
When someone presses the submit button, it checks if all the text is right and then it has to go to the next page.

But when I get the alert that something is wrong and I press ok, the focus will go back to that textbox and then it directly goes to the next page before I can change the textbox

PS: what stands the .select for?
I made a script like this without it, and it worked fine
arnyinc
02-02-2003, 11:03 PM
You can do it with a submit button and validate the form with an onsubmit event or with a regular button and an onclick event. The first one will still let people without javascript submit the form, and the second one will check the input more strictly.


<html>
<head>
<script language="javascript">
function validate(buh){
if (buh.yourname.value==''){
alert('enter something');
return false;
}
else
return true;
}
</script>
</head>
<body>
<form name="myform" onsubmit="return validate(this);" method="get" action="moo.htm">
Name: <input type="text" name="yourname">
<br>
<input type="submit" value="submit">
</form>
</body>
</html>



<html>
<head>
<script language="javascript">
function validate(buh){
if (buh.yourname.value=='')
alert('enter something');
else
buh.submit();
}
</script>
</head>
<body>
<form name="myform" method="get" action="moo.htm">
Name: <input type="text" name="yourname">
<br>
<input type="button" value="submit" onclick="validate(this.form);">
</form>
</body>
</html>
Stoffel
02-03-2003, 08:43 AM
Thnx,

But the script still doesn't stop.

I'll give u a part of the code


function Next() {
if ( document.form.titel.options[document.form.titel.selectedIndex].value == "" ) {
alert("wrong name");
document.form.titel.focus();
document.form.titel.select();
return false }


then a part of the form itself

[CODE]
<form name="form" action="next.html" onsubmit="return Volgende()" method="get">
<input type="text" name="titel">
<input type="submit">
</form>
Stoffel
02-03-2003, 08:54 AM
Found the error,
A <select ...> can't work with a document.....selectname.select()

See ya