Auto tab to next form field

J

Joe Wall

Member
Hi

I was wondering if anyone could help me to implement something like the java script example that can be seen via the following link:

http://www.javascriptsource.com/forms/auto-tab.html

I have a form on which the user has to enter into 18 integer fields so I would like to help make this easier for them by them not having to tab to the next field. I am not proficient with java script at all so would need a bit of idiots guidance. Also would it be possible to vary the maxlength as follows:

If number entered into a field = 1 then maxlenth = 2 else maxlength = 1

Any guidance on how to appoach this would be much appreciated

--Joe
 
You'd have to include what they tell you to put in the HEAD into a ./components/com_fabrik/js/X.js file (where X is your numeric form ID). Then you'd need to add a keyup JS event to each of your elements, which calls the main autoTab() function.

But ... I need to work out what you would need as arguments to the autoTab() function, so bump this if I don't get back to you today. I'm on vacation in England, and am trying to shoehorn work in around visiting with friends.

-- hugh
 
Hi Hugh

Thanks for responding - interested to hear you are in England - my locale. If you are near Staffordshire I would be happy to buy you a pint or two ! I'm also off to Penrith at the weekend visiting friends if you are near there.
Regards
--Joe
 
Hugh

Shame but have a good trip anyway.

V. excited as I'm off to do a USA Coast to Coast rail journey soon - starting in San Francisco ending in New York 3 weeks later.

Hoping by tomorrow to get this golf site live so will send you a link and log on details via PM - you can let me know what you think. I am sure you will spot lot's of improvements but I do not think it is too bad for my first attempt.

Later, I can add to it including that auto tab feature

Regards
--Joe
 
Hi Joe Wall,
I've been following your posts carefully as you and I have a very similiar goals for functionality. For example, I found your threads on ranks and scores very helpful. Your site is about golf, mine is about pool/billiards (mypoolstats.com). I would like to check out your site as well once it goes live if you don't mind sharing.
 
Hi rackem

Thanks for the kind words and yes I will do you a PM too so you can have a look. Had a look at yours - impressive. May I use amended versions of your privacy and terms of service to create similar for my site?
--Joe
 
try using this in a X.js file in components/com_fabrik/js where X is your form id:

Code: 
(function () {
    window.addEvent('load', function () {
        is = document.getElements('input.fabrikinput[type=text]');
        is.each(function (i, x) {
            i.addEvent('keyup', function (e) {
                if (i.get('value').length >= i.get('maxlength')) {
                    var next = inc(x);
                    next.focus();
                }
            });
        });
    });
    
    inc = function(x) {
        var next = x + 1 > is.length ? 0 : x + 1;
        var nextField = is[next];
        if (nextField.get('readonly') || nextField.hasClass('autocomplete-trigger')) {
            next ++;
            return inc(next);
        }
        return nextField;
    } 
}());
 
Hi Rob

Thank you - I will try that. Does it or would it be possible to vary the maxlength as follows:

If number entered into a field = 1 then maxlenth = 2 else maxlength = 1

Regards
--Joe
 
Hi Rob

Sorry - not used this type of thing before - I suspect I need to put some keyup action JS code in each element that I want to auto-tab when using the form but I do not know what - any advice?

Joe
 
You must log in or register to reply here.

Useful links

  • Create a Fabrik Account (Downloads)
  • Create a Forum Account
  • Fabrik Wiki
  • Fabrik 4 Changelog /Install /Upgrade
    • We are in need of some funding.
    More details.

    Thank you.

    Members online

    Total: 136 (members: 1, guests: 135)
    Back
    Top