•  0
    JavaScript

    Custom input in HTML using Javascript and JQuery

      Asmin Jismun    115        0        Report content

    If you want to add your own style to the input such as chechkbox, radio and dropdown, you use the functions as shown below:

    For adding style in checkbox:

     
        function customCheckbox(checkboxName){
            var checkBox = $('input[name="'+ checkboxName +'"]');
            $(checkBox).each(function(){
                $(this).wrap( "" );
                if($(this).is(':checked')){
                    $(this).parent().addClass("selected");
                    $(this).parent().next('label').addClass("selected");
                }
            });
    
            $(checkBox).click(function(){
                $(this).parent().toggleClass("selected");
                $(this).parent().next('label').toggleClass("selected");
            });
        }
    

    You can customized the style class above based on your needs.
    For radio type:

        function customRadio(radioName){
            var radio = $('input[name="'+ radioName +'"]');
            $(radio).each(function(){
                $(this).wrap( "" );
                if($(this).is(':checked')){
                    $(this).parent().addClass("selected");
                    $(this).parent().next('label').addClass("selected");
                }
            });
    
            $(radio).click(function(){
                $(radio).each(function(){
                    if($(this).is(':checked')){
                        $(this).parent().addClass("selected");
                        $(this).parent().next('label').addClass("selected");
                    } else {
                        $(this).parent().removeClass("selected");
                        $(this).parent().next('label').removeClass("selected");
                    }
                });
            });
        }
    
        function customDropdown(dropdownId){
            var ddlWrapId = '#'+dropdownId+'_wrap';
            var dropdownId = '#'+dropdownId;
            var selectedInputId = '';
            var selectedTextId = '';
    
            $(document).on("click",ddlWrapId,function(){
                selectedInputId = '#'+$(ddlWrapId).find('input').attr('id');
                selectedTextId = '#'+$(ddlWrapId).find('span').attr('id');
                $(dropdownId).slideToggle();
            });
            
            $(document).on("click",ddlWrapId+" ul li",function(){
                if($(this).find('input').attr('name') === $(ddlWrapId).find('ul li input').attr('name')){
                    $(selectedInputId).val($(this).find('input').val());
                    var stateCounty = $(selectedInputId).val().split('#');
                    $(selectedTextId).text(stateCounty[0]);
                    $(selectedTextId).css("color","#333");
                    $(this).parent().find('li.selected').removeClass('selected');
                    $(this).addClass('selected');
                }
            });
    
            $('body').click(function(e){
                var clickedOn = $(e.target);
                if (!clickedOn.parents().andSelf().is(ddlWrapId)){
                    $(dropdownId).hide('200');
                }
             });
        }
    
        function customTextBox(textBoxName){
            //get default value
            var textBoxValue = $("input[name='"+textBoxName+"']").val();
            
            //set input text empty on focus
            $(document).on("focus","input[name='"+textBoxName+"']",function(){
                if(this.value == textBoxValue){
                    $(this).val('');
                    $(this).css("color","#333");
                }
            });
            var buttonClicked = false;
            $("div[name='button']").hover(
                function () { buttonClicked = true; },
                function () { buttonClicked = false; }
            );
            //restore input text with default value on focusout
            $(document).on("focusout","input[name='"+textBoxName+"']",function(){
                if($(this).val() == '' && !buttonClicked){
                    $(this).val(textBoxValue);
                    $(this).css("color","#bfbfbf");
                }
            });
        }
    

     

     


  •  


Leave a Comment

Please Login to insert comment.

 

Facebook Conversations