Aaron Scherer's Blog

jQuery: Roll to Next Input

Introduction

user

Aaron Scherer


jQuery, javascript, Javascript, programming

jQuery: Roll to Next Input

Posted by Aaron Scherer on .
Featured

jQuery, javascript, Javascript, programming

jQuery: Roll to Next Input

Posted by Aaron Scherer on .

I was looking for a way to have an input, that when you change, would roll to the next input. The project I'm working on has a page based system, so each page has its own fieldset. When the last field is completed, I wanted it to automatically roll to the next page. I also wanted functionality for zip code, and phone number fields, that would roll to the next input after 5 digits on zip, or roll to the next piece of the phone number field.

The Solution

Starting off with the binds

$( document ).on( 'keyup click', ':input.rollToNext', rollToNext );

Then, the actual function

function rollToNext( event ) {  
    switch( event.type ) {
        case 'click':
            if( !$( this ).is( 'select' ) ) return false;
            break;
        case 'keyup':
            var code = event.keyCode ? event.keyCode : event.which;
            if( $( this ).is( 'select' ) && code != 13 && code != 9 ) return false;
            break;
    }

    // If the function has made it here, we should run the roll to next logic
    var fieldset = $( 'fieldset:visible' ),
        fields = fieldset.find( ':input:visible' ),
        empty = fields.filter(function() { return !$( this ).val().length } ).length;

        if( !empty && fieldset.find( ':input#form_validate' ).length == 0 ) {
            // Show the next page here (Our own custom function)
        }

        // Now for the logic that rolls to the next input on zipcode and phone
        if( $( this ).attr( 'maxlength' ) !== undefined ) {

            //Making sure it was actually a character that was typed
            var inp = String.fromCharCode( event.keyCode );
            if( !(/[a-zA-Z0-9-_ \.]/.test( inp )) ) return true;

            if( $( this ).val().length == $( this ).attr( 'maxlength' ) ) {
                $( this ).blur();

                for( var i in fields ) {
                    var index = fields[ i ];
                    if( typeof previous != 'undefined' ) return $( index ).focus();
                    if( index == this ) var previous = index;
                }
            }
        }
}

End

Voila, your rollToNext function is there. All you need to do, is pull a rollToNext class on your input. If you need any help implementing this, hit me up in the comments.

user

Aaron Scherer

http://aaronscherer.me