1
\$\begingroup\$

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?

\$\endgroup\$
3
\$\begingroup\$

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");
// ...
\$\endgroup\$
4
\$\begingroup\$

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.

\$\endgroup\$
  • \$\begingroup\$ thx to all for your help, and tips \$\endgroup\$ – gidzior Feb 16 '12 at 13:18
1
\$\begingroup\$

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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.