I would like to make this code more elegant and have it written in a more standard manner, but I cannot write anything better with my current JQuery knowledge. So I would appreciate any suggestions to refactor the code below for better performance.(function ($) {    var Doc = function () {        this._init();    };    Doc.prototype = {        _init: function () {            $( document ).ready(function() {                $('#language').change(function(){                     Doc.prototype.commonMethod();                    }).change();                });                $(document).ajaxComplete(function(){                Doc.prototype.commonMethod();                });        },        commonMethod: function() {            var $prefLanguage = $('.editable-select-holder').find('#preferredLanguage').val();                if( $prefLanguage.length != 0){                    $('.editable-select-holder').find('#language').val($('.editable-select-holder').find('#' + $prefLanguage).text());                }        }     };    new Doc();})(jQuery);HTML:<form id=userInfoForm action=/service/company/user/edit.do?id=2924 method=post>   <h3 class=colored>User details</h3>   <table class=settings-edit-table>      <tbody>         <tr>            <th scope=row>E-mail </th>            <td> <input type=email name=email id=email value=ksenia.vecherinina@telema.com></td>         </tr>         <tr>            <th scope=row>Language </th>            <td>               <div class=editable-select-holder>                  <input type=text name=language id=language class=js-focus-expander readonly=>                  <button type=button class=editable-select-expander></button>                  <ul class=editable-select-options>                     <li id=en>English </li>                     <li id=et>Estonian </li>                     <li id=lv>Latvian </li>                     <li id=lt>Lithuanian </li>                  </ul>                  <input type=text name=preferredLanguage id=preferredLanguage value=en hidden=>               </div>            </td>         </tr>      </tbody>   </table></form>
Prefered language code refactor
javascript;jquery
Whitespace consistencyFollowing a standard (even if it's your own) makes code easier to read.$( document ).ready(function() {...}$(document).ajaxComplete(function(){...}Better selectionIn commonMethod you use jQuery.find() in containers for items with ids 3 times:$('.editable-select-holder').find('#preferredLanguage')$('.editable-select-holder').find('#language')$('.editable-select-holder').find('#' + $prefLanguage)Ids should be unique in a given page.Truthy/Falsy Values0 is a Falsy value making (varible).length != 0 unecesarry, unless the length property would hold another valid falsy value for any reasoncommonMethod: function() {    var $prefLanguage = $('#preferredLanguage').val();        if($prefLanguage.length){            $('#language').val($('#' + $prefLanguage).text());        }}