Tab order with a twist 2

[PaulBricker]

I've got a form with three date fields (along with many other fields). Next to each date textbox I have a hyperlink that opens a popup calendar the user selects a date from. This automatically inserts the date in the textbox. If I don't adjust the TabIndex property, then the hyperlink receives the focus the same as each textbox as the user moves thru the form. If I use TabIndex = -1 for each link, then the link doesn't receive the focus, but if I click the link, the tab order shifts back to the beginning and the user has to tab thru all the original fields again. I would like the focus to move to the next textbox in the tab order once the user has filled in the date (either using the calendar or manually putting in a date). Is there some way to use the Click event inside these link tags

<a href="#" onClick="getCalendarFor(document.setupform.dateofevent);return false">

to set the focus to the date field so that the tab order stays intact. Or any other thoughts.
Thanks

Paul

 

[mwolf00]

Try This:

<a href="#" onClick="[b]setIndex(this);[/b]getCalendarFor(document.setupform.dateofevent);return false" tabIndex=-1>

<script>
function setIndex(inObj){
  inObj.tabIndex = inObj.previousSibling.tabIndex + 1
}
</script>

I've never tried this before, but this is the general idea. If this doesn't work, I can try similar solutions for you.

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

 

[PaulBricker]

Thanks for the suggestion mwolf00. I've been out on campus for a few hours and am just catching up with this. It did not do anything that I could detect. It seemed to run exactly the same way except the link doesn't get the focus at this point. I played with the function a little by taking out the +1 and trying a couple other things but it didn't help.
If you have any other thoughts I'd be happy to try them out.

Paul

 

[BillyRayPreachersSon]

Surely in your getCalendarFor function, you would just give focus to the next datebox... something like:

document.getElementById('idOfNextDateBox').focus();

Dan

 

[PaulBricker]

Sorry Dan, I'm just catching up with your suggestion. I'm not sure where I would insert it, but I can play with that a little. The issue would be that the date fields do not follow one another in the tab order so I can't just insert a hard value like 7. I have tried

document.getElementById(this)+1.focus();

to see if I could just move to the next field in question but it didn't work. Can you tell me if this is in the right direction. If it is, then I can probably find the right place to put the expression.

Thanks

Paul

 

[BillyRayPreachersSon]

If you give all of your date boxes a unique ID, then it doesn't matter what order they are in.

In your function, you can detect which one you are currently on (via the ID), and set focus to the next one (again, via the ID).

Dan

 

[PaulBricker]

Good thought but that would confuse the faculty. It's a fairly long form and it's designed to mimic an existing paper form we have (can't teach an old teacher new tricks). The date fields are not visible from each other without scrolling so I need to keep the tab order stepping according to the form structure. So my question is 'can I modify your expression to just go to the next ID and if using the (this) keyword is viable in this situation?

Thanks

Paul

 

[BillyRayPreachersSon]

I suggest building an "if" statement... So you'd have your 3 date boxes (or however many), each with their own IDs.. and in whatever order they need to be. Then use something like this:

<a href="#" onClick="getCalendarFor(document.setupform.dateofevent);return false">

And at the end of "getCalendarFor":

function getCalendarFor(element)
{
   ...

   var focusObj = '';
   if (element.name == 'dateofevent') focusObj = 'nextElementToThisOne1';
   if (element.name == 'otherdate1') focusObj = 'nextElementToThisOne2';
   if (element.name == 'otherdate2') focusObj = 'nextElementToThisOne3';
   if (focusObj != '') document.getElementById(focusObj).focus();
}

You know what the order of the date boxes is, you know where you want the cursor to go, so you can control the flow with the if statements.

Hope this helps,
Dan

 

[PaulBricker]

Sorry Dan, no joy. Once I click the calendar, it seems all bets are off. It may be the location in the Calendar script where I put the code (I put it at the end of the getCalendarfor function) that is throwing it off. I'm not familiar enough with JavaScript yet to be sure what or where the issue might be. It's sure a lot easier in a VBA module where you can step thru the code and see exactly what is happening along the way.
For the time being I'm going to pull the calendar and let the staff type in the date. I do appreciate both you and mwolf00 trying to get this thing working and I will continue to plug in the expressions you offered in various places to see if I happen on a solution.

Thanks again.

Paul

 

[BillyRayPreachersSon]

> It's sure a lot easier in a VBA module where you can step thru the code and see exactly what is happening along the way.

You can do this with Javascript, too... Either install the Microsoft Script debugger, or better still, Visual Interdev.

Dan

 

[PaulBricker]

You mean there is something more sophisticated than notepad??? I will definately look into one of those. Thanks again. I'll post back when I come up with something.

Paul