RationalRabbit
asked on
Prevent onKeyUp from triggering onBlur?
I have some rather complicated Zip Code input fields. The user may enter a zip code, a city name or a city/state. onKeyUp is used to do a search by zip (after 5 chrs if numeric) - At 6 or more chars, it checks for Canadian zip or city, or city state. The result may show a single entry on an exact match, or a select list on multiple matches.
This all works fine except that it allows the user to exit the field with a "not found" entry, and I cannot figure out how to do a final check when they have left the field.
My first thought was to use onBlur. I quickly discovered that onBlur (as well as onFocus) is triggered with each onKeyUp. Somehow, I need to be able to do a final check on field exit and produce an error message on no match.
Hoping someone has a bright idea here.
This all works fine except that it allows the user to exit the field with a "not found" entry, and I cannot figure out how to do a final check when they have left the field.
My first thought was to use onBlur. I quickly discovered that onBlur (as well as onFocus) is triggered with each onKeyUp. Somehow, I need to be able to do a final check on field exit and produce an error message on no match.
Hoping someone has a bright idea here.
Dave Baldwin
In my forms, onKeyUp does not by itself trigger onBlur. It must be what you are doing after that that is triggering it. Of course if you put up text in another field that will probably do it too.
ASKER
Are you sure of this?
I have stripped it down:
After your comment, I created this simple file:
If you add onFocus to the mix, this will also be triggered with each keypress, which says to be that, in order for onKeyUp to work, it must lose focus.
I have stripped it down:
<input id="OriZip" type="text" name="OriZip" value="" onKeyUp="alert('KeyUp')" onBlur="alert('blur')" />The blur is triggered before the onKeyUp.
After your comment, I created this simple file:
<!DOCTYPE html>
<html>
<head><title>f</title>
</head>
<body>
<form>
<input type="text" name="SomeName" value="" onKeyUp="alert('KeyUp')" onBlur="alert('Blur')" />
</form>
</body>
</html>If you add onFocus to the mix, this will also be triggered with each keypress, which says to be that, in order for onKeyUp to work, it must lose focus.
The 'alert' is where the 'focus' is going which causes the effect of 'onBlur'. You're defeating yourself with that code. Anything you do that changes the 'focus' to another window or dialog is going to have the effect of 'onBlur'.
ASKER
Seems like there should be a way to build a condition into the onBlur, but I don't know what that would be.
?? onBlur is defined as losing Focus. And new window or dialog will cause that.
All this speculation is vry nice but I don't see any live code to actually debug so with any real code all that can happen here is throwing stuff on the wall to see is something sticks.
Post a link to the page and perhaps we can find a way to do what you need done.
Cd&
Post a link to the page and perhaps we can find a way to do what you need done.
Cd&
ASKER
I guess the simplest thing to do would be to just re-check the fields with the Ajax routine on submit. There is no way within that routine to produce a "not found" unless you know the user has completed the entry.
Thanks for the input.
Thanks for the input.
We don't know what you are doing so it's hard to help you. I have an AJAX routine that displays choices from a database as you type in the right column on this page: http://www.dibsplace.com/webdev/ndxv1.php Is that what you are trying to do?
ASKER
I don't want to waste your time, but I guess I didn't explain it well enough.
There are two zip code fields - Origin and Destination.
In either of those fields, the user may enter a U.S. or Canadian Zip Code OR a city, or a city & state.
The Ajax routine is in place and working fine. onKeyUp, it aborts if there are less than 5 characters in the field.
At five characters, it checks to see if the string is numeric and, if so, checks for a U.S. zip code.
If a singular zip code is found, that city, state and zip are entered into the input box.
If multiple entries are found, the input changes to a select box and displays the choices.
If more than 5 characters are entered, and the length is 6, it will first look for a Canadian Zip Code. If not found, or the string is longer than 6 characters, it will look for any cities beginning with that string.
I'm not "trying" to do this. This all works and, to me, for a number of reasons, is preferable to popping up a list with every keystoke.
So, if the user puts in "99205", or "N8N1A1", it will immediately find the proper city (or cities) and state (or Province).
If the user enters "Clover", it will find any city starting with the word "Clover" and allow the user to select.
Where the problem comes in is if the user enters "junkname", and goes on to the next field, I cannot immediately tell them that was not found and send them back to the field.
The Ajax routine produces a "not found", but it is ignored when received, and it waits for the next input. If the user exits the field, the incorrect entry is left behind.
So, for lack of a better solution, I guess what I will do is run the Ajax routine again at form submit, with a parameter telling it to react to a "not found"., displaying an error message at that time and sending the user back to the field. It would be nice if this could be done upon exiting the field in the first place, but a wrong entry cannot be determined until the field is exited.
There are two zip code fields - Origin and Destination.
In either of those fields, the user may enter a U.S. or Canadian Zip Code OR a city, or a city & state.
The Ajax routine is in place and working fine. onKeyUp, it aborts if there are less than 5 characters in the field.
At five characters, it checks to see if the string is numeric and, if so, checks for a U.S. zip code.
If a singular zip code is found, that city, state and zip are entered into the input box.
If multiple entries are found, the input changes to a select box and displays the choices.
If more than 5 characters are entered, and the length is 6, it will first look for a Canadian Zip Code. If not found, or the string is longer than 6 characters, it will look for any cities beginning with that string.
I'm not "trying" to do this. This all works and, to me, for a number of reasons, is preferable to popping up a list with every keystoke.
So, if the user puts in "99205", or "N8N1A1", it will immediately find the proper city (or cities) and state (or Province).
If the user enters "Clover", it will find any city starting with the word "Clover" and allow the user to select.
Where the problem comes in is if the user enters "junkname", and goes on to the next field, I cannot immediately tell them that was not found and send them back to the field.
The Ajax routine produces a "not found", but it is ignored when received, and it waits for the next input. If the user exits the field, the incorrect entry is left behind.
So, for lack of a better solution, I guess what I will do is run the Ajax routine again at form submit, with a parameter telling it to react to a "not found"., displaying an error message at that time and sending the user back to the field. It would be nice if this could be done upon exiting the field in the first place, but a wrong entry cannot be determined until the field is exited.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Dave - Yeah, this is what I came around to thinking. Then, on submit, I can check the contents of the div if it still hasn't been corrected.
Both of these are good suggestions. Either one would still mean I would have to check on submit, but better than having to run the Ajax routine again. Dave's suggestion at least allows me to notify the user while they are still in that section of the form.
Thanks!
Both of these are good suggestions. Either one would still mean I would have to check on submit, but better than having to run the Ajax routine again. Dave's suggestion at least allows me to notify the user while they are still in that section of the form.
Thanks!
You can attach a focusout event to the input and run your check immediately before you even get to the submit. The focusout only triggers when the element loses focus which means clicking anywhere else or tabbing out of the element
http://api.jquery.com/focusout/
But after reading thru the question again you never mention jquery so may not be the solution.
http://api.jquery.com/focusout/
But after reading thru the question again you never mention jquery so may not be the solution.
ASKER
Thanks for mentioning that. Good to know. Not using jQuery on this site, though. (Except for JQ Mobile)