Accessing nested object literal object undefined?

Question

So I'm very new at object literal pattern but really excited about this pattern and the organization it provides.

What I'm trying to do is update the phone number form field on-the-fly to format as users type (###-###-####). However, I want to make the formatting functionality a sort of reusable utility so I can assign it accordingly to other inputs without rewriting the function's functionality every time...all the while trying to use the Object Literal pattern

I have a fiddle setup http://jsfiddle.net/JF3Vh/3/

Here's what I have thus far...Caution learning in progress...

HTML

<div id="contactPage">
  <form>

    <label id="lblPhone" for="txtPhone">Your Phone Number:</label>
    <input id="txtPhone" name="phone" type="tel"/>                      

  </form>
</div>

JavaScript using jQuery

var appMobile = {

    utilities: {

        formatPhone : function(){
            alert( "formatPhone is running" );
            $( this ).val().replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
        }

    },
    page: {
    home : {function()
       //Some Page specific functions here
    },
    contactForm: function () {
            $( '#txtPhone' ).onchange(function() {
                $(this).appMobile.utilities.formatPhone();
            });
        },
    products : {function()
       //Some Page specific functions here
    },


    }


};


$( document ).ready( function () {

    /*--initialize Scheduling page function--*/
    if ( $( '#contactPage' ) ) { appMobile.page.contactForm(); }

} );

Set me straight and thanks! :)

WizzyBoom

Answer 1

I do believe this is what you were going for:

var appMobile = {
    utilities: {
        formatPhone: function(){
            alert( "formatPhone is running" );
            $( this ).val().replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
        }
    },
    page: {
        home: function() {
           //Some Page specific functions here
        },
        contactForm: function () {
            $('#txtPhone').on('change', appMobile.utilities.formatPhone);
        },
        products: function() {}
           //Some Page specific functions here
        }
    }
};

$(function () {
    if ($('#contactPage').length) { 
        appMobile.page.contactForm(); 
    }
});

Also, you may be interested in this masked edit plugin.