Posted By

touffies on 11/11/10

Tagged

phone
jquery

Versions (?)

Last Edited at 11/11/10 11:54pm

Statistics

Viewed 976 times

Favorited by 0 user(s)

Related snippets

Split single Phone Field into 3 fields

/ Published in: jQuery

Split a single phone number input field into 3 small input fields and create an hidden field for validation and keep server side variable name.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

/*  ------------------------------------------------------------------
    Split Phone field in 3 fields ------------------------------------ */
    $.fn.splitPhone = function() {
        function phone_split(phoneId){
            var html_split = '<input type="text" name="'+phoneId+'[]" id="'+phoneId+'1" class="inp_small" value="" size="4" maxlength="3" tabindex="0" /><span class="sep_phone"> - </span>';
                html_split += '<input type="text" name="'+phoneId+'[]" id="'+phoneId+'2" class="inp_small" value="" size="4" maxlength="3" tabindex="1" /><span class="sep_phone"> - </span>';
                html_split += '<input type="text" name="'+phoneId+'[]" id="'+phoneId+'3" class="inp_smallLast" value="" size="5" maxlength="4" tabindex="2" />';
            return html_split;
        }
 
        this.each(function() {
            var $this = $(this);
            if (!($this.is(':text') || $this.is(':hidden'))) { return; }
            var tabIndex = $this.attr("tabindex") ? $this.attr("tabindex") : 0;
 
            //Custom new fields
            var $arrInput = $(phone_split($this.attr("id"))).filter("input");
            $arrInput.each(function(){ $(this).attr("tabindex", tabIndex++) }).bind("blur", function(){ $this.val($arrInput[0].value+$arrInput[1].value+$arrInput[2].value) }).end().insertBefore($this);
 
            //hide fields
            $this.attr("Type", "hidden").removeAttr("tabindex").hide();
        });
 
        return this;
    };