What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    change background color if checkbox is checked or unchecked?

    Asked by burakco 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');
                    });
                });
            });
        },

    checkbox checked JotForm textarea name
  • Profile Image
    JotForm Support

    Answered by EltonCris 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

    Answered by burakco 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

    Answered by burakco 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
    JotForm Support

    Answered by EltonCris 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

    Answered by burakco on December 25, 2013 at 09:03 PM

    only one letter :) thank you very much elton

  • Profile Image
    JotForm Support

    Answered by EltonCris on December 25, 2013 at 09:08 PM

    @burakco

    Yeah, I can see that. =)

    Happy holidays!