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.
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
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.
RationalRabbitAuthor Commented:
Are you sure of this?
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>
      <input type="text" name="SomeName" value="" onKeyUp="alert('KeyUp')" onBlur="alert('Blur')" />

Open in new window

The results are the same. Tested in latest FireFox and IE9.
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.
Dave BaldwinFixer of ProblemsCommented:
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'.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

RationalRabbitAuthor Commented:
Seems like there should be a way to build a condition into the onBlur, but I don't know what that would be.
Dave BaldwinFixer of ProblemsCommented:
??  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.

RationalRabbitAuthor Commented:
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.
Dave BaldwinFixer of ProblemsCommented:
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:  Is that what you are trying to do?
RationalRabbitAuthor Commented:
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.
Create a global var to hold 0 (zero)
Once a correct value has been entered either through a valid entry or selecting from the dropdown (don't know how you validate an entry since you have not posted any code) change the var to 1.  Then you can use that to know whether the field is valid or not and force focus back to the input if they try to leave it (jquery focusout function)
Dave BaldwinFixer of ProblemsCommented:
You could have the AJAX 'not found' routine put up a message in a <div> beside the <input> that says 'Not Found' until a usable zip or name is found.  Putting a message in a <div> will not change the focus because there is no user entry there.  That's what I'm doing on the demo page I posted a link to above.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RationalRabbitAuthor Commented:
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.

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

But after reading thru the question again you never mention jquery so may not be the solution.
RationalRabbitAuthor Commented:
Thanks for mentioning that. Good to know. Not using jQuery on this site, though. (Except for JQ Mobile)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.