preventDefault handling?

[ginerjm]

ok - this borders on a previously posted question but I'll try to be more specific with this one.

 

I have a d/e form that collects some entries that must be valid. They get checked against an array of valid values and if wrong I must make the user repeat the entry. So - I add an 'onchange' call to each input element tag to call my js edit function. In it I do the check and if it fails I want to place the focuse back on the element and select it and popup an alert box with the problem and then let the user re-enter his value. The problem is I can't keep the focus where I want because it just naturally wants to move to the next tabstop. Here's my code:

 

<input type='text' class='sz3' name='pfld12' id='pfld12' value='$pfld12'
tabindex=4 onchange='getName(this)'>

 

And here is the js code:

function getName(elem)
{
var id = elem.id;
var key = elem.value;
var name_fld = 'name' + id.substr(-2,2);
if (key == '')
{
alert("You must provide a Roster #");
elem.focus();
elem.preventDefault();
return false;
}
if (!membs.hasOwnProperty(key))
{
alert("Invalid roster #");
elem.preventDefault();
elem.focus();
elem.select();
return false;
}
document.getElementById(name_fld).value = membs[key];
return true;
}
</script>

 

The js works fine - it's just the end result when the entry is invalid that is my problem.

 

So - how do I move the focus back to the calling element and avoid the natural tendency to move forward to the next field?

[ginerjm]

Apparently my time ran out before I could edit the first post. Please look at this instead.

 

My input elelments:

<input type='text' class='sz3' name='pfld11' id='pfld11' value='$pfld11'
tabindex=3 onchange='return getName(event,this)'
onkeypress="return moveToNextTabOnEnter(this, event)">

 

And my JS function:

function getName(e,elem)
{
var id = elem.id;
var key = elem.value;
var name_fld = 'name' + id.substr(-2,2);
if (key == '')
{
alert("You must provide a Roster #");
e.preventDefault();
elem.focus();
return false;
}
if (!membs.hasOwnProperty(key))
{
alert("Invalid roster #");
e.preventDefault();
elem.focus();
elem.select();
return false;
}
document.getElementById(name_fld).value = membs[key];
return true;
}

 

I think I'm getting the event passed to the function properly now since I no longer get messages in the debugger.

Still doesn't prevent the tab from happening though.

[requinix]

What happened to using onblur?

[ginerjm]

I found out that onblur can be (is really!) a PIA. Just leaving the page causes it to occur and trying to leave the field causes many considerations.

 

So - any ideas on why my current code won't work? It's a simple d/e screen as I may have said - type in a number and hit enter, and repeat. I just want to edit each number at the time of entry rather than have to go back and look at them all if there is an error.

[ginerjm]

Ok - solved my own problem. Instead of my html calling a routine to validate the input with an onchange call and then handling an Enter key as a Tab with an onkeypress event I consolidate my activities.

 

With an onkeydown I call my edit routine. In there I check for a tab or enter key. If it's not one I simply ignore it and return. IF the key is an Enter or Tab I perform my editing and if that fails I manage to do either a preventDefault or stopPropagaion and return false. If it passes the tests, I call my routine to handle an Enter as a Tab and then return true.

 

So now - user can do d/e and hit enter or tab when done. The screen will edit my entry and either keep me on the field or move to the next tabstopped field. Just what I need.