about html <button> tag

Question

I am trying to use the HTML button tag. But I have a doubt :

The button should not always appear but appear only if some condition is satisfied. How can I implement this ?

Specifically:

The user searches my database. The records which are in the result are shown as a table. These records are event listings and the user can register only for some of the events depending upon some condition. Registration of any event is made possible by a button click "Register". How can I make the button appear next to only the records for which that user is eligible to register ?

Answer 1

var condition = ("foo" != "bar") ? true : false; 
                                          /* 
                                          change the part in parentheses
                                          to the condition
                                          that tests if user is eligible 
                                          to register for an event
                                          */
if (!condition) {
    document.getElementById("button").style.display = "none";
};

<button id="button">Register</button>

If the condition is true (like the snippet above), the button doesn't hide, and the user can click it.

var condition = ("foo" == "bar") ? true : false; 
                                          /* 
                                          Change the part in parentheses
                                          to the condition
                                          that tests if user is eligible 
                                          to register for an event 
                                          */
if (!condition) {
    document.getElementById("button").style.display = "none";
};

<button id="button">Register</button>

In this snippet, the condition is false, so the button hides, and the user can't click it.

---

In this question, I was assuming that you meant to hide the button if the user was not eligible. Looking at other people's comments, you may want to disable the button instead. To do that, just replace the line document.getElementById("button").style.display = "none";
with
document.getElementById("button").setAttribute("disabled", "").
If you want to re-enable the button (if you disable it) when the user is eligible, write code using
document.getElementById("button").setAttribute("disabled", "")
in which setAttribute("disabled", "") is replaced with removeAttribute("disabled").

If you used the hiding method instead, write code using document.getElementById("button").style.display = "none"; in which none is replaced to the previous state that you have set the display attribute to (block, inline-block, flexbox, etc.)

---

Seems like your post is from 2011 and you have talked to other answerers. Please mark an answer as accepted if you found one that solved your question

Answer 2

I'd use an input tag if it's going to be used to submit a form. You have the option of either hiding it conditionally on the server side depending on what language you're using, or hiding it through JavaScript on the browser side.

Server side is preferable because the condition is being generated on that side. It also prevents the user from tampering with things browser side. I'd also make sure that subsequent stages verifies eligibility, and doesn't just rely on the presence of a button.

Answer 3

If you can determine whether the user can register for the event on the server, then only emit the <button> in that case.

If you can only determine this on the client side for some reason (eg: their eligibility is based on some other information they've entered) then you could programmatically set the CSS display property to none to make the button disappear, though it might make more sense to simply disable the button in that case.

Answer 4

You should display or not the button while you generate the html page, namely on the server side. Don't forget to check later on the server side if the user is authorized to register before doing the actual registration.