How to hide elements after button click in Javascript

Question

I am unable to hide a list on button click on partial view. This is what I am trying to do, but the following code does nothing. Can anyone please help me with this?

<script>       
     $(document).ready(function () {
        $('#resultBtn').onclick(function (e) {
            e.preventDefault();
            $('#List').hide();
            commit();
        })
      });
</script>

Cohars · Accepted Answer · 2014-09-09T23:54:17.227

0

We might need a JSFiddle, the script seems to be good, but I guess the problem comes from your HTML5 code actually. Anyway, here are some advice that might help.

#resultBtn is written in camelCase, so #List should be #list. Plus, if you have a problem, try to console.log('something') in the click callback function to see if something happen.

Oh, I finally spotted the problem, you should easily find it if you open the console of your browser. You can not do onclick() on a jQuery element, it's only click. A good habit could be to use edit on() (or bind()), you might find it useful someday.

$(function() {
    $('#resultBtn').on('click', function(e) {
        e.preventDefault();
        $('#list').hide();
        commit();
    });
});

Hope this helped!

edited Sep 09 '14 at 23:54

answered Sep 09 '14 at 23:48

Cohars

3,822
1
29
50

1

as of jquery 1.7, bind has been deprecated, you should use on, see: http://api.jquery.com/on/ – Zeb Rawnsley Sep 09 '14 at 23:49
I did as you suggested, but the table hides only for a couple of seconds, and as soon as the page loads on submission the list is displayed back again. – SamV Sep 09 '14 at 23:54
@ZebRawnsley yes thank you. Are you sure it's deprecated, I still use use because sometimes I find unbind() useful. – Cohars Sep 09 '14 at 23:55
@SamViq of course, every time the page loads, the state will be reset. Basically, you can't save JS state between two pages. What you can do is use a bit a back-end code (I you post some data for instance) or maybe you can get some get parameters in the URL to know wether or not the list should be displayed. – Cohars Sep 09 '14 at 23:57
1

@Cohars it still works but could be removed at any point you decide to update your jQuery reference, the new preferred version of unbind() is off() – Zeb Rawnsley Sep 10 '14 at 00:38
@SamViq Don't forget to check an answer as we think at least one of us gave the good answer to your question :) – Cohars Sep 10 '14 at 16:54
@Cohars None of the answers worked because all the values are being reset once the page is submitted. I tried to work it on the controller side, by retaining the results but i encountered another problem. Seems like i have to work with PostBack. Thanks for all your effort. – SamV Sep 10 '14 at 20:45
@SamViq So you should change the question. Because I assure you that we answered it. that's a front-end JS question. Of course everything is reset one the page is submitted, this is static. Nothing is saved. – Cohars Sep 10 '14 at 20:50
@Cohars i might post a new one if i need to. But i think it would be good to keep this question as it might help others. – SamV Sep 10 '14 at 20:54
Yes, sure :) But be careful to be clear in the question. What you want is not to hide a button when the user clicks on it, because you know how to do. What you should ask for is how to save data and use them in the front-end, to know wether or not you should show/hide a button. – Cohars Sep 10 '14 at 21:05

tomysshadow · Answer 2 · 2014-09-11T01:24:38.290

0

Make the element invisible, but treat it as if it is still there:

document.getElementById("resultBtn").onclick = function() {
document.getElementById("List").style.visibility = "hidden";
return false;
}

Hide the element and treat it as if it is non-existent:

document.getElementById("resultBtn").onclick = function() {
document.getElementById("List").style.display = "none";
return false;
}

edited Sep 11 '14 at 01:24

answered Sep 09 '14 at 23:50

tomysshadow

870
1
8
23

There is also `document.getElementById("List").hidden = true;` in modern browsers at least. :-) – RobG Sep 10 '14 at 00:09
@RobG I think he want's to use jQuery I wouldn't recommend it neither but it might be useful to keep it simple if he want's to solve the problems he mentioned in the comments. Anyway, you forgot the `return false`. Please don't down-vote the good answers just to get yours in the top. – Cohars Sep 10 '14 at 16:53
@Cohars—not my down vote, not my answer. I was just suggesting another way to hide the element for **this** answer. – RobG Sep 10 '14 at 22:59
I never downvoted any of the other answers... not that I'd know what I'm doing since I know very little jQuery at all. I will add return false as well. (you're right, I forgot that part) – tomysshadow Sep 11 '14 at 01:24

score -1 · Answer 3 · answered Sep 09 '14 at 23:36

-1

You can set display property to none to hide the element

$(document).ready(function () {
            $('#resultBtn').onclick(function (e) {
                e.preventDefault();
                $('#List').css('display','none'); //<--- like here
                commit();
            })
          });

answered Sep 09 '14 at 23:36

Cute_Ninja

4,742
4
39
63

@SamViq - see here http://stackoverflow.com/questions/3582619/how-to-change-css-display-none-or-block-property-using-jquery – Cute_Ninja Sep 10 '14 at 00:44
This is an alternate way to achieve what you are trying to do. What exactly happens when you set display property to none? – Cute_Ninja Sep 10 '14 at 00:45
@Ishita the list hides onclick but is displayed back once the page is submitted. – SamV Sep 10 '14 at 20:47
aah.. well.. i can see Cohor has answered your question. But, make sure to be more clear and include all the details when you ask the question :) – Cute_Ninja Sep 11 '14 at 00:49

How to hide elements after button click in Javascript

3 Answers3