使用Javascript将一个文本字段拆分为两个文本，进行验证，然后再次合并

Question

A client is asking that a textfield containing phone-number data be split into two -- one for country code, the other for the rest of the number.

Alas, this field is pretty hard-coded into the system and all data collected thus far has been as one consolidated field (and thus saved as one column in the database).

I'm thus thinking the best answer might be to do the following:

1. Using Javascript, replace the single text field with two text fields.
2. These then become merged back into the original text field when the user clicks the submit button.
3. Bonus marks if there's a way to separate that field back into two again when it's read from the database (Ie, when an administrator views the entry). Note that the data format must be consistent -- I don't want to mix the existing string data with, say, a bunch of JSON strings.

Is this the best way to go about this? Are there any foreseeable problems (beyond the user not having JavaScript enabled) with this approach? Is there a jQuery plugin that's designed to do stuff like this?

I also need to validate it as a valid phone number at some point, but I can figure that out myself.

Answer 1

Rather than splitting the text field into two, you may use the masked input JQuery plug-in

http://digitalbush.com/projects/masked-input-plugin/

$(document).ready(function(){
   $("#phone").mask("(999)999999");                
});

Sample JS : http://jsfiddle.net/vGeMV/3/

Edit: For point 3 : If you want to really split the number into two and display it, you may split it from the right (usually 7 digits) rather than left so that even if country code is present or not, you will get the correct split.

Answer 2

If you dont want to use a plugin you can always check out this snippet I made on jsFiddle

If you want to make sure it works in the JS just change the display:'none' to display:'block'

here is my JavaScript

$(function() {
    $('#phone').css({ display:'none' });
    $('#phone').after(') <input type="text" name="phoneMainNumber" id="phoneMainNumber" />').after('(<input type="text" value="555" name="phoneAreaCode" id="phoneAreaCode" style="width:30px;" />');
    bindChange();
});

function bindChange() {
    $('#phone').val('('+$('#phoneAreaCode').val()+') ');
    $('#phoneMainNumber, #phoneAreaCode').keyup(function() {
       $('#phone').val('('+$('#phoneAreaCode').val()+') '+$('#phoneMainNumber').val());    
    });   
}