Keeping labels and text on a table

Question

I have a collection of radio buttons, and when I click on one, the label and text stay on the table.

HTML - radio

<div id="par01WraperAbsolute">
                <div class="close"></div>
                <div id="par01">
                    <form id="form01">
                        <fieldset>
                            <legend>Wykԡdzina</legend>
                            <div class="inputWraper clearfix">                               
                              <input type = "radio"
                                     name = "wykladzina"
                                     id = "par01par01"
                                     value = ""
                                     checked = "checked" />
                              <label id="par01par01Label" for = "par01par01">Label 01:</label>
                              <p id="par01par01text" class="formP ">Text01</p>
                            </div>

                            <div class="inputWraper clearfix">
                              <input type = "radio"
                                     name = "wykladzina"
                                     id = "par01par02"
                                     value = "" />
                              <label id="par01par02Label" for = "par01par02">Label 02:</label>
                              <p id="par01par02text" class="formP ">Text02</p>
                            </div>

                            <div class="inputWraper clearfix">
                              <input type = "radio"
                                     name = "wykladzina"
                                     id = "par01par03"
                                     value = "" />
                              <label id="par01par03Label" for = "par01par03">Label03:</label>
                              <p id="par01par03text" class="formP"><textarea></textarea></p>
                            </div>

                            <div class="inputWraper clearfix uwagi">
                              <label for = "par01par04">Comments:</label>
                              <p id="par01par04text" class="formP "><textarea></textarea></p>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
            <div id="par02WraperAbsolute">
                <div class="close"></div>
                <div id="par02">                    
                    <form id="form02">
                        <fieldset>
                            <legend>ͣiany Dzialowe</legend>
                            <div class="inputWraper clearfix">                               
                              <input type = "radio"
                                     name = "scianyDzialowe"
                                     id = "par02par01"
                                     value = ""
                                     checked = "checked" />
                              <label id="par02par01Label" for = "par02par01">Label01:</label>
                              <p id="par02par01text" class="formP ">Text01</p>
                            </div>

                            <div class="inputWraper clearfix">
                              <input type = "radio"
                                     name = "scianyDzialowe"
                                     id = "par02par02"
                                     value = "" />
                              <label id="par02par02Label" for = "par02par02">Label02:</label>
                              <p id="par02par02text" class="formP ">Text02</p>
                            </div>

                            <div class="inputWraper clearfix">
                              <input type = "radio"
                                     name = "scianyDzialowe"
                                     id = "par02par03"
                                     value = "" />
                              <label id="par02par03Label" for = "par02par03">Label03:</label>
                              <p id="par02par03text" class="formP"><textarea></textarea></p>
                            </div>

                            <div class="inputWraper clearfix uwagi">
                              <label for = "par02par04">Comments:</label>
                              <p id="par02par04text" class="formP "><textarea></textarea></p>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
            <div id="par03WraperAbsolute">              
                <div class="close"></div>   
                <div id="par03">                    
                    <form id="form03">
                        <fieldset>
                            <legend>ͣiany systemowe</legend>
                            <div class="inputWraper clearfix">                               
                              <input type = "radio"
                                     name = "scianySystemowe"
                                     id = "par03par01"
                                     value = ""
                                     checked = "checked" />
                              <label id="par03par01Label" for = "par03par01">Label01:</label>
                              <p id="par03par01text" class="formP ">Text01</p>
                            </div>

                            <div class="inputWraper clearfix">
                              <input type = "radio"
                                     name = "scianySystemowe"
                                     id = "par03par02"
                                     value = "" />
                              <label id="par03par02Label" for = "par03par02">Label02:</label>
                              <p id="par03par02text" class="formP ">Text02</p>
                            </div>

                            <div class="inputWraper clearfix">
                              <input type = "radio"
                                     name = "scianySystemowe"
                                     id = "par03par03"
                                     value = "" />
                              <label id="par03par03Label" for = "par03par03">Label03:</label>
                              <p id="par03par03text" class="formP"><textarea></textarea></p>
                            </div>

                            <div class="inputWraper clearfix uwagi">
                              <label for = "par03par04">Comments:</label>
                              <p id="par03par04text" class="formP "><textarea></textarea></p>
                            </div>
                        </fieldset>
                    </form>
                </div>              
            </div>
        </div>

HTML - table

<table>
    <tr>
        <th colspan="2">Title01</th>
    </tr>
    <tr>
        <td id="par01Label" class="par01table">Label01:</td>
        <td id="par01Text" class="par01table">Text01</td>
        <td id="par01TextHidden" style="display: none"></td>
    </tr>
    <tr>
        <td id="par01LabelComments" class="comments">Comments:</td>
        <td id="par01TextComments" class="comments"></td>
    </tr>
    <tr>
        <th colspan="2">Title02</th>
    </tr>
    <tr>
        <td id="par02Label" class="par02table">Label02:</td>
        <td id="par02Text" class="par02table">Text02</td>
        <td id="par02TextHidden" style="display: none"></td>
    </tr>
    <tr>
        <td id="par02LabelComments" class="par02table comments">Comments:</td>
        <td id="par02TextComments" class="par02table comments"></td>
    </tr>
    <tr>
        <th colspan="2">Title03</th>
    </tr>
    <tr>
        <td id="par03Label" class="par03table">Label03:</td>
        <td id="par03Text" class="par03table">Text03</td>
        <td id="par03TextHidden" style="display: none"></td>
    </tr>
    <tr>
        <td id="par03LabelComments" class="par03table comments">Comments:</td>
        <td id="par03TextComments" class="par03table comments"></td>
    </tr>
</table>

jQuery

$("#par01par01").click(function(){
        var text = $('#par01par01Label').text();
        $("#par01Label").text(text);        
    });  
    $("#par01par02").click(function(){
        var text = $('#par01par02Label').text();
        $("#par01Label").text(text);        
    });
    $("#par01par03").click(function(){
        var text = $('#par01par03Label').text();
        $("#par01Label").text(text);        
    }); 
    $("#par01par01").click(function(){
        var text = $('#par01par01text').text();
        $("#par01Text").text(text);        
    });  
    $("#par01par02").click(function(){
        var text = $('#par01par02text').text();
        $("#par01Text").text(text);        
    });
    $("#par01par03").click(function(){
        var text = $('#par01TextHidden').text();
        $("#par01Text").text(text);        
    });


    $("#par02par01").click(function(){
        var text = $('#par02par01Label').text();
        $("#par02Label").text(text);        
    });  
    $("#par02par02").click(function(){
        var text = $('#par02par02Label').text();
        $("#par02Label").text(text);        
    });
    $("#par02par03").click(function(){
        var text = $('#par02par03Label').text();
        $("#par02Label").text(text);        
    }); 
    $("#par02par01").click(function(){
        var text = $('#par02par01text').text();
        $("#par02Text").text(text);        
    });  
    $("#par02par02").click(function(){
        var text = $('#par02par02text').text();
        $("#par02Text").text(text);        
    });
    $("#par02par03").click(function(){
        var text = $('#par02TextHidden').text();
        $("#par02Text").text(text);        
    });


    $("#par03par01").click(function(){
        var text = $('#par03par01Label').text();
        $("#par03Label").text(text);        
    });  
    $("#par03par02").click(function(){
        var text = $('#par03par02Label').text();
        $("#par03Label").text(text);        
    });
    $("#par03par03").click(function(){
        var text = $('#par03par03Label').text();
        $("#par03Label").text(text);        
    }); 
    $("#par03par01").click(function(){
        var text = $('#par03par01text').text();
        $("#par03Text").text(text);        
    });  
    $("#par03par02").click(function(){
        var text = $('#par03par02text').text();
        $("#par03Text").text(text);        
    });
    $("#par03par03").click(function(){
        var text = $('#par03TextHidden').text();
        $("#par03Text").text(text);        
    });

There will be many more of these radio buttons. Is there a way to write this shorter or more optimally?

Answer 1

I'm not sure if this would work. If it works, it seems like a very good first improvement.

But it would be much better to have a generic approach, rather than having to write all cases one by one.

function triggerDependency(trigger, target) {
  $(trigger).click(function(){
    var text = $(trigger+'Label').text();
    $(target).text(text);        
  });
}
triggerDependency("#par01par01", "#par01Label");
triggerDependency("#par02par03", "#par02Label");
// ...

Answer 2

Here is a refactoring for the first few blocks. You should be able to use the helper functions to refactor the rest yourself

$(function() { 
// immediately executing function since functions 
// are the only way of limiting variable scope in javascript

var onChangeTargetToLabelText(form, target) {
      var target = $(target); // target and form can be string selectors, jquery objects or DOM elements, all will behave the same because jquery wraps it
      $('input[type=checkbox]', form).change(function() {     
        //this function copies the text from the label following the clicked checkbox
        // to the target 
        target.text($(this).next('label').text()); //you might want to use nextAll - look up the difference
      });
   },

   onChangeCopyText = function(changeFrom, to){
      //this function abstracts away 'on change of X, copy the text of Y'
      $(changeFrom[0]).change(){$(to).text($(changeFrom[1]).text()); }
    };


onChangeTargetToLabelText('#form01', '#par01Label');
onChangeCopyText([
  ['#par01par01', '#par01par01text' ],
  ['#par01par02', '#par01par02text'],
  ['#par01par03', '#par01TextHidden']
], $('#par01Text')); //only selecting the to variable once - looking up stuff in the DOM is expensive-ish

onChangeTargetToLabelText('#form02', '#par02Label');

// ... I you can write out the rest yourself    

})();//invoke the immediately executing function

Some notes:

• You avoid id selectors most of the time, mostly because if you get 2 of the same one on the page things get wonky and very hard to debug.
• You should use the jquery context parameter to make looking up your elements faster and less bug-prone
• What you are doing here is a bit weird, are you sure that what you want to copy is the label value? It's not going to change? Consider using the checkbox's value attribute instead
• It is uncommon to suffix element names/classes/ids with the element type - element types change and people forget to update them - it is more useful to name elements after what they are being used for.
• Take this with a grain of salt, but this sounds like a very intimidating UI design. So many options all at the same time? Maybe they should be broken down into pages and sections.

Feel free to ask questions.

Answer 3

You could add a data attribute to your radio that specifies the target label. Then the jQuery would be dynamic based on your HTML.

HTML

<input type = "radio"
  name = "wykladzina"
  id = "par01par01"
  value = ""
  checked = "checked"

  data-target = "par01Label" />

<label id="par01par01Label" for = "par01par01">Label 01:</label>

jQuery

$('radio').click(function() {
  var el = $(this),

      // get the corresponding label ID
      label = el.attr('id') + 'Label',

      // grab the text
      text = $('#' + label).text(),

      // find the target label
      target = el.data('target');

  // update the target's text
  $('#' + target).text(text);
});

Note: You may need to extend the way I choose each label's ID. I just noticed that you also need to update #par01par01text as well.

---

I wouldn't recommend binding two separate click events that do relatively the same thing. It will become a pain to work with in the long run.