SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    South Florida
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I hide a button after i click it?

    i have a button that initiates an ajax response and i want that content to replace the button, so instead of just hiding the button i want it to completely go away so the the div that holds the ajax response can go in its place.

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <style type="text/css">
    .hidden {
        display: none;
    }
    </style>
    Code JavaScript:
    var button = document.getElementById("theButton");
     
    button.onclick = function() {
        doSomething();
        this.className = "hidden";
    };

  3. #3
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the button is in a container that can hold a div (div,fieldset,li,etc) you can use replaceChild-

    button.parentNode.replaceChild(div,button);

    If the button's parent cannot contain a block,
    you can button.parentNode.removeChild(button) to lose the button and append the div to an appropriate parent.

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bit of overkill to just hide a button though?

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    South Florida
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks

    this good, it gives me a lot of insight into how to do this. i dont know enough javascript yet to do what mrhoo suggested and i tried what pepejeria said but it didnt work, and i think its because my button already has an onclick event on it -
    onclick="ajaxFunction"
    does this in fact cause a problem? is there a different event handler we can use? the page will be used mainly by user with touchscreens.

  6. #6
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is usually better to set event handlers via JavaScript rather than in the elements onclick attribute.

    You could of course call both function in the onclick like this
    Code HTML4Strict:
    <input type="button" onclick="ajaxFunction(); this.style.display='none'">

  7. #7
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,629
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Or add the button hide code to the end of the AJAX function (so that the button only hides if the AJAX call is successful).
    Ian Anderson
    www.siteguru.co.uk

  8. #8
    SitePoint Enthusiast
    Join Date
    May 2008
    Location
    South Florida
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    awesome it works! thank you!

  9. #9
    John 8:24 JREAM's Avatar
    Join Date
    Sep 2007
    Location
    Florida
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pepejeria View Post
    It is usually better to set event handlers via JavaScript rather than in the elements onclick attribute.

    You could of course call both function in the onclick like this
    Code HTML4Strict:
    <input type="button" onclick="ajaxFunction(); this.style.display='none'">
    I thought event handlers had to be in the xhtml, and the properties of the event defined in the javascript.

    ie: function dothis() {alert("Hey");}
    <input type="button" onmouseclick="dothis();" />

    Is there a shorter way?

  10. #10
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JREAM View Post
    I thought event handlers had to be in the xhtml, and the properties of the event defined in the javascript.
    No.
    Quote Originally Posted by JREAM View Post
    ie: function dothis() {alert("Hey");}
    <input type="button" onmouseclick="dothis();" />

    Is there a shorter way?
    Optimal solution would be to attach the event handlers with JavaScript and not to have any onxxxx in the html code.

  11. #11
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    FYI though, in most cases this isn't very nice for user accessibility.

    Case in point: hotmail.com. Sometimes when I enter my email/pass, hit enter, realize that i typed something incorrectly, hit escape, i can't hit submit again. i have to reload.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •