Question

I have a form which allows a user to filter a set of products. When they click a radio button it will automatically submit the form to another section of the page via ajax, which means the page and the form is never refreshed. I have 3 sets of radio selections. I want to show the label of each current selection in another div so they can see the current filters applied at a glance. Here is what I have right now:

<form id="myform" action="blah.php">
  <label for="allprice">
    <input type="radio" name="cat[price]" id="allprice" value="1" />
    All Price Ranges</label>
  <label for="m-150-300">
    <input type="radio" name="cat[price]" id="m-150-300" value="2" />
    $150 - $300</label>
  <label for="m-300-700">
    <input type="radio" name="cat[price]" id="m-300-700" value="3" />
    $300 - $700</label>
  <br />
  <br />
  <label for="allmaterial">
    <input type="radio" name="cat[material]" id="allmaterial" value="4" />
    All Materials</label>
  <label for="straw">
    <input type="radio" name="cat[material]" id="straw" value="5" />
    Straw</label>
  <label for="felt">
    <input type="radio" name="cat[material]" id="felt" value="6" />
    Felt</label>
  <br />
  <br />
  <label for="allcolor">
    <input type="radio" name="cat[color]" id="allcolor" value="4" />
    All Colors</label>
  <label for="blue">
    <input type="radio" name="cat[color]" id="blue" value="5" />
    Blue</label>
  <label for="green">
    <input type="radio" name="cat[color]" id="green" value="6" />
    Green</label>
</form>

<div class="filters">
Current Filters: <span class="current-filters">Straw, Green</span>
</div>

Where it says “Current Filters” is where I want to list the current radio boxes selected. Additionally I want it to be ignored if “All” anything is selected.

How can I grab the label of selected radio boxes and display them elsewhere in a logical sense to comma separate except the last and ignore if “All” is selected? Furthermore if only “All” is selected for all of them how could I set it to say “No filters applied” Is this possible with jQuery?

Answer 1

I’d suggest the following

1. Wrap each section into a wrapper with a class (example below has div.control-group)
2. For your “all” radio buttons, add an data attribute to distinguish from non-all items (example below uses data-all="all")

HTML:

<form id="myform" action="blah.php">
    <div class="control-group">
        <label for="allprice">
            <input type="radio" name="cat[price]" id="allprice" value="1" data-all="all" />
            All Price Ranges</label>
        <label for="m-150-300">
            <input type="radio" name="cat[price]" id="m-150-300" value="2" />
            $150 - $300</label>
        <label for="m-300-700">
            <input type="radio" name="cat[price]" id="m-300-700" value="3" />
            $300 - $700</label>
    </div>
    <br />
    <br />
    <div class="control-group">
        <label for="allmaterial">
            <input type="radio" name="cat[material]" id="allmaterial" value="4" data-all="all"/>
            All Materials</label>
        <label for="straw">
            <input type="radio" name="cat[material]" id="straw" value="5" />
            Straw</label>
        <label for="felt">
            <input type="radio" name="cat[material]" id="felt" value="6" />
            Felt</label>

    </div>
    <br />
    <br />
    <div class="control-group">
        <label for="allcolor">
            <input type="radio" name="cat[color]" id="allcolor" value="4" data-all="all"/>
            All Colors</label>
        <label for="blue">
            <input type="radio" name="cat[color]" id="blue" value="5" />
            Blue</label>
        <label for="green">
            <input type="radio" name="cat[color]" id="green" value="6" />
            Green</label>

    </div>
</form>

<div class="filters">
Current Filters: <span class="current-filters"></span>
</div>

<button id="filter-me">Filter</button>

Javascript (triggered on #filter-me button click):

<script language="JavaScript">
    $('#filter-me').click(function(){
        var newarr = [];
        $('#myform .control-group input:checked').each(function(){
            if ($(this).attr('data-all') !== 'all') {
                newarr.push($(this).closest('label').text());
            };
        });
        $('.current-filters').text(newarr.join(', '));
    });
</script>