How to format jEditable field value after it cancels

How to format jEditable field value after it cancels

I am trying to use the "onreset" option but I am having issues. I have a
field that is meant for users to enter 10 numbers only. I want to make the
10 numbers display in a phone format ie. (310) 490-1235. So far I can do
this, and the HTML of the field gets set to 3104901235 while the text is
(310) 490-1235, but when a user cancels or goes to another field, the
current field closes, and displays the HTML (3104901235) instead of the
text (310) 490-1235.
I have a function set in the "onreset" option for it to set the text but
it doesnt apply.
//Phone field
// Set the fields 10 digits to phone format
set_phone();
function isNumeric(value) {
if (value == null || !value.toString().match(/^[-]?\d*\.?\d*$/)) return
false;
return true;
}
$('.edit-phone').editable('<?php echo base_url();
?>home_resume/builder/ajax_save_field', {
onsubmit: function(settings, td) {
rm_class();
var input = $(td).find('input');
var original = input.val().trim();
if (isNumeric(original) && original.length == 10) {
$('#notification-saved').miniNotification({opacity: 1.0});
return true;
} else {
$('#notification-phone').miniNotification({opacity: 1.0});
input.css('background-color','#c00').css('color','#fff');
return false;
}
},
type : 'text',
cancel : 'Cancel',
onreset : function(value, settings){
$(this).closest("li").removeClass("active");
// Since the HTML is now just 10 digits, set it back
to phone format with
set_phone();
},
style : 'display: inline',
select : 'true',
submit : 'OK',
event : "edit-phone",
indicator : '<img src="<?php echo base_url();
?>themes/resume-builder/images/fb-indicator.gif">'
});
$(".edit-phone-trigger").on("click", function() {
strip_phone();
$(this).closest("li").addClass('active');
var edit_id = $(this).attr("id").split("-");
$('#' + edit_id[1]).trigger("edit-phone");
return false;
});
// Format the 10 digit phone number
function set_phone() {
var num = $("#7").text();
var num_1 = num.slice(0,3);
var num_2 = num.slice(3,6);
var num_3 = num.slice(6,11);
var new_num = "("+num_1+") "+num_2+"-"+num_3;
$("#7").text(new_num);
}
// Remove characters from phone number input
function strip_phone() {
var pnum = $("#7").text();
pnum = pnum.replace(/\(/g, "");
pnum = pnum.replace(/\)/g, "");
pnum = pnum.replace(/-/g, "");
pnum = pnum.replace(/\s/g, "");
$("#7").html(pnum);
}