Split single Phone Field into 3 fields


/ Published in: jQuery
Save to your folder(s)

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.


Copy this code and paste it in your HTML
  1. /* ------------------------------------------------------------------
  2.   Split Phone field in 3 fields ------------------------------------ */
  3. $.fn.splitPhone = function() {
  4. function phone_split(phoneId){
  5. 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>';
  6. 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>';
  7. html_split += '<input type="text" name="'+phoneId+'[]" id="'+phoneId+'3" class="inp_smallLast" value="" size="5" maxlength="4" tabindex="2" />';
  8. return html_split;
  9. }
  10.  
  11. this.each(function() {
  12. var $this = $(this);
  13. if (!($this.is(':text') || $this.is(':hidden'))) { return; }
  14. var tabIndex = $this.attr("tabindex") ? $this.attr("tabindex") : 0;
  15.  
  16. //Custom new fields
  17. var $arrInput = $(phone_split($this.attr("id"))).filter("input");
  18. $arrInput.each(function(){ $(this).attr("tabindex", tabIndex++) }).bind("blur", function(){ $this.val($arrInput[0].value+$arrInput[1].value+$arrInput[2].value) }).end().insertBefore($this);
  19.  
  20. //hide fields
  21. $this.attr("Type", "hidden").removeAttr("tabindex").hide();
  22. });
  23.  
  24. return this;
  25. };

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.