title: Splitting one text-field into two with Javascript, validate it, then merge it back again
body: <p>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.</p>
  
  <p>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). </p>
  
  <p>I'm thus thinking the best answer might be to do the following:</p>
  
  <ol>
  <li>Using Javascript, replace the single text field with two text fields.</li>
  <li>These then become merged back into the original text field when the user clicks the submit button.</li>
  <li>Bonus marks if there's a way to separate that field back into two again when it's read from the database (I.e., 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.</li>
  </ol>
  
  <p>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?</p>
  
  <p>I also need to validate it as a valid phone number at some point, but I can figure that out myself.</p>