Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by William J. Terrell
William J. Terrell
17,403 Points

Using jQuery to Show and Hide Tables on a Form

I am trying to get a form to display different tables based on which item is selected from a radio-button list. The options are:

Business Card

Envelopes

Letterhead

Other

This is the code I have...

<script>
            $("#business_cards").hide();
            $("#envelopes").hide();
            $("#letterhead").hide();

    $('[name="stationery_needed"]').change( function () {
        if ($('[name="stationery_needed"]:checked').val() == "Business Cards" ) {
            $("#business_cards").show();
            $("#envelopes").hide();
            $("#letterhead").hide();
        } else if ($('[name="stationery_needed"]:checked').val() == "Envelopes" ) {
            $("#business_cards").hide();
            $("#envelopes").show();
            $("#letterhead").hide();
        } else if ($('[name="stationery_needed"]:checked').val() == "Letterhead") {
            $("#business_cards").hide();
            $("#envelopes").hide();
            $("#letterhead").show();
        } else {
            $("#business_cards").hide();
            $("#envelopes").hide();
            $("#letterhead").hide();
        }
    });
</script>

I'm fairly certain that this breaks the DRY Principle... Is there a better way of doing this?

Thanks!

1 Answer

Eric Buchmann
Eric Buchmann
15,080 Points

Some ideas would be adding a click event to your page on whatever people are clicking to show / hide the different areas. Then in there you could add a class to all three of your areas to hide them and then based on which item they clicked on you can add a class to show just that one. That way whenever they click on any of the three elements it hides everything and shows the one you want. That should give you some idea on how to make it more DRY.

William J. Terrell
William J. Terrell
17,403 Points

Ultimatley, the Senior Developer at the company that we're working in conjunction with devised this code:

function hideAll() {
              $("#business_cards").hide();
              $("#envelopes").hide();
              $("#letterhead").hide();
            }

                // hide on initial load
                hideAll();

                $('[name="stationery_needed"]').change( function () {
                  hideAll();
                  switch($('[name="stationery_needed"]:checked').val()) {
                    case "Business Cards":
                      $("#business_cards").show();
                      break;
                    case "Envelopes":
                      $("#envelopes").show();
                      break;
                    case "Letterhead":
                      $("#letterhead").show();
                      break;
                    default: 
                      console.log("default -- no action");
                  }
                });

Though if anyone could provide more insight into the mechanics of how this works, that would be great. :)

I can tell that it uses the hideAll function to hide all of the elements at first, and then starts another function (with the hideAll function inside of it) that applies to the input with the name of "stationery_needed". Does it then just "listen" for the value of "stationery_needed" to be "switched", and then checks for "In the case of it being switched to Business Cards, show the Business Cards table" (and so on and so forth for the other values)?

Thanks!