Hide a 'Clear' button until the 'Apply' button clicked

Question

I have a form where i have buttons below my filters (Apply Filter & Clear Filter) i am trying to display the 'Clear' when the 'Apply' button is clicked and hide the 'Clear' button when it is clicked.

The code below if what I have for my table:

<dl class="filterlist" style="margin-top: 0px">
        <dt>
            <label for="Environment">Environment</label>
        </dt>
        <dd>
            @Html.DropDownList("EnvironmentDD", (IEnumerable<SelectListItem>)ViewBag.Environment, "- - All Environments - -", 
                new { @class = "ddstyle", @id = "Environment", @title = "Filter the table below by environment." })
        </dd>
        <dt>
            <label for="Product">Product</label>
        </dt>
        <dd>
            @Html.DropDownList("ProductDD", (IEnumerable<SelectListItem>)ViewBag.Product, "- - All Products - -", 
                new { @class = "ddstyle", @id = "Product", @title = "Filter the table below by product." })
        </dd>
        <dt>
            <label for="TestType">Test Type</label>
        </dt>
        <dd>
            @Html.DropDownList("TestTypeDD", (IEnumerable<SelectListItem>)ViewBag.TestType, "- - All Test Types - -", 
                new { @class = "ddstyle", @id="TestType", @title="Filter the table below by test type." })
        </dd>
        <dt>
            <label for="TestScenario">Test Scenario</label>
        </dt>
        <dd>
            @Html.DropDownList("ScenarioDD", (IEnumerable<SelectListItem>)ViewBag.Scenario, "- - All Test Scenarios - -", 
                new { @class = "ddstyle", @id="TestScenario", @title="Filter the table below by test scenario." })
        </dd>
        <dt>&nbsp;</dt>
        <dd>
            <button class="butstyle" id="ApplyFilter" type="submit" title="Click to apply any filters selected above.">
                Apply Filter(s) <i class="fa fa-filter"></i>
            </button>
            <button class="butstyle" id="ClearFilters" title="Click to reset any filters set." style="display:none">
                Clear Filter(s) <i class="fa fa-eraser"></i>
            </button>
        </dd>
    </dl>

How can I do this or what's the best way to as I cant seem to get my head around it. I am using HTML5 & MVC5.

By default the button is set to:

style="display:none">

You could use the 'checkbox hack'. [link](http://stackoverflow.com/questions/11166580/css3-transitions-is-there-an-on-click-option-without-using-jquery) — RobinvdA, Mar 25 '14 at 15:45
Could someone please provide jquery for this as I have found that using this would be the best option. The one provided by AJ doesn't seem to work. Even in the fiddle they provided — murday1983, Mar 26 '14 at 10:00
Let me see if i understand you correctly. You want to show the 'Apply' button by default, and when that one is clicked, hide it and show the 'Clear' button. Then, when the 'Clear' button is clicked, hide it? Here's a slightly modified version of AJ's code (removed 1 line) http://jsfiddle.net/x3PMX/4/. Or, if you don't want to hide the 'Apply' button: http://jsfiddle.net/x3PMX/5/ — RobinvdA, Mar 26 '14 at 10:27
@RobinvdA - Thanks for the reply. no the 'Apply' button will be displayed when the page loads, then if the user selects a filter from one of my 4 dropdowns and clicks the apply button, a 'Clear' button will then be displayed along side the 'Apply' button then if the 'Clear' button is clicked, it is then hidden — murday1983, Mar 26 '14 at 11:08
@RobinvdA - I have the same issue as i did with AJ's answer, it doesn't display the 'Clear' button but upon investigation it appears that the code you proved does not work in IE10 which i am using. It needs to work in IE from IE8 to current. It works fine in FF. Also the 'Clear' button flashes because the page re-loads when the 'Apply' button is clicked as it has to action the options selected from the dropdown lists I have. — murday1983, Mar 26 '14 at 11:51
Hm, the problem with IE10 seems to be solved if you use jquery 1.11.0. If your page reloads, you have to use asp.net to show/hide the button. With that i can't help you because i have no knowledge of asp.net. An alternative could be using Ajax to load the results, so you don't have to reload the page: https://api.jquery.com/jQuery.ajax/ — RobinvdA, Mar 26 '14 at 12:18

score 1 · Answer 1 · answered Mar 25 '14 at 15:39

1

I do not think this can be done without the use of javascript/jquery Use jQuery .. Is this what you are looking for

$("#ApplyFilter").click(function(){
$("#ClearFilters").toggle();
    $(this).toggle();
});
$("#ClearFilters").click(function(){
$("#ApplyFilter").toggle();
    $(this).toggle();
});

check this fiddle i made out of your html.

answered Mar 25 '14 at 15:39

A J

2,112
15
24

1

You apparently didn't read his comment about "I would prefer o do this without java/jquery if possible". – VtoCorleone Mar 25 '14 at 15:40
@AnanthanUnni : I have mentioned it in my answer that its not possible to achieve the requirement without a script! or is your comment to the user who asked the question? – A J Mar 25 '14 at 15:47
@AnanthanUnni : okay .. but this should be posted to the question please. – A J Mar 25 '14 at 18:26
@Antony : was this helpful? – A J Mar 25 '14 at 18:27
Thanks for your reply but it doesn't work when I check the fiddle you supplied – murday1983 Mar 26 '14 at 08:49

score 1 · Accepted Answer · answered Mar 25 '14 at 15:46

1

Without JQuery:

<button onclick="document.getElementById('ClearFilters').style.display='block';" class="butstyle" id="ApplyFilter" type="submit" title="Click to apply any filters selected above.">
    Apply Filter(s) <i class="fa fa-filter"></i>
</button>
<button onclick="document.getElementById('ClearFilters').style.display='none';" class="butstyle" id="ClearFilters" title="Click to reset any filters set." style="display:none">
    Clear Filter(s) <i class="fa fa-eraser"></i>
</button>

The only other method is to have the page reload when the buttons are pressed and do a check on which button has been pressed...

answered Mar 25 '14 at 15:46

Jamie Barker

8,145
3
29
64

This is what i'm looking for but it worked the first time (displayed the clear button) then removed it but when I tried clicking the apply button again the clear button flashes then hides. – murday1983 Mar 25 '14 at 16:24
There must be something else causing that then, because this [fiddle](http://jsfiddle.net/56Exs/) works... – Jamie Barker Mar 25 '14 at 16:36

score 0 · Answer 3 · answered Mar 27 '14 at 09:05

0

It has been decided that although hiding the 'Clear' button would be a 'nice to have', it shall be displayed at all times and possibly a future fix to hide it once the application is up and running.

Thanks for all the comments/help.

answered Mar 27 '14 at 09:05

murday1983

3,806
14
54
105

Hide a 'Clear' button until the 'Apply' button clicked

3 Answers3