change background color if checkbox is checked or unchecked?

  • Profile Image
    burakco
    Asked on December 25, 2013 at 07:20 PM

    hi everybody;

    i want to change background color if checkbox is checked? actually i did it, but if i click anywhere on page, it is going to old background color. it must only change old color, if checkbox is unchecked again.

    my form code :

    <td class="urun">
     <input class="form-checkbox validate[required]" type="checkbox" id="input_38_1013" name="q38_almakIstediginiz[][id]" value="1013" />
    </td>

     

    i edited highLightLines function code for td tag which has .urun css class in jotform.js
    if i checked checkbox input, this code is change td tag class to .urun-active

    highLightLines: function(){
            // arkaplan renk değiştirme olayı burada
            // Highlight selected line
            $$('.form-line').each(function(l, i){
                l.select('input, select, textarea, div, table div, button, table td').each(function(i){
                   
                    i.observe('focus', function(){
                        if (JotForm.isCollapsed(l)) {
                            JotForm.getCollapseBar(l).run('click');
                        }
                        if(!JotForm.highlightInputs){ return; }
                        l.addClassName('form-line-active');
                        // for descriptions
                        if(l.__classAdded){ l.__classAdded = false; }
                    }).observe('blur', function(){
                        if(!JotForm.highlightInputs){ return; }
                        l.removeClassName('form-line-active');
                    });
                });
            });
           
            $$('.urun').each(function(l, i){
                l.select('input, table td').each(function(i){
                   
                    i.observe('focus', function(){
                        if (JotForm.isCollapsed(l)) {
                            JotForm.getCollapseBar(l).run('click');
                        }
                        if(!JotForm.highlightInputs){ return; }
                        l.addClassName('urun-active');
                        // for descriptions
                        if(l.__classAdded){ l.__classAdded = false; }
                    }).observe('blur', function(){
                        if(!JotForm.highlightInputs){ return; }
                        l.removeClassName('urun-active');
                    });
                });
            });
        },

  • Profile Image
    EltonCris
    Answered on December 25, 2013 at 07:52 PM

    Hi,

    Can you please give us the entire source codes please? Or, it would be a lot easier if you could provide a test page where we can check the mentioned issue.

    We'll await your reply. Thank you!

  • Profile Image
    burakco
    Answered on December 25, 2013 at 07:57 PM

    http://www.yavruluk.com/yavruluk_hediyeli/satin_al/index.html

     

    i edited jotform.js again at line 3645 :

    $$('.urun').each(function(l, i){
                l.select('input, table td').each(function(i){
                    i.observe('click', function(){
                           if(i.hasClassName('urun-active')){
                            l.removeClassName('urun-active');
                        }
                        else{
                            l.addClassName('urun-active');
                        }
                    })               
                });
            });

     

    this code change background color, but if i unchecked input it is not going to remove new css class (urun-active)

  • Profile Image
    burakco
    Answered on December 25, 2013 at 08:06 PM

    i think i found where is the problem, i added alert to code :

    $$('.urun').each(function(l, i){
                l.select('input, table td').each(function(i){
                    i.observe('click', function(){
                           if(i.hasClassName('urun-active')){
                            alert("has class name .urun-active, remove it");
                            l.removeClassName('urun-active');
                        }
                        else{
                            alert("add class name .urun-active");
                            l.addClassName('urun-active');
                        }
                    })               
                });
            });

     

    it is always run else statement. how can i fix this?

  • Profile Image
    EltonCris
    Answered on December 25, 2013 at 08:51 PM

    Hi,

    If that's the case then there's a problem with your first rule.

    I've used the following, and it seems to work fine .

    $$('.urun').each(function(l, i){

                l.select('input, table td').each(function(i){

                    i.observe('click', function(){

                        if(l.hasClassName('urun-active')){

    //alert("has class name .urun-active, remove it");

    l.removeClassName('urun-active');

    }

                        else{

    //alert("add class name .urun-active");

    l.addClassName('urun-active');

    }

                    })                

                });

            });

        },

    Demo: https://shots.jotform.com/elton/workaround/addclass.html

    Kindly check. Thanks!

  • Profile Image
    burakco
    Answered on December 25, 2013 at 09:03 PM

    only one letter :) thank you very much elton

  • Profile Image
    EltonCris
    Answered on December 25, 2013 at 09:08 PM

    @burakco

    Yeah, I can see that. =)

    Happy holidays!