Question

How do I go about making this button disappear after a user submits the vote?

      <p id="button_<%= review.id %>"><%= f.submit "vote" %></p>

Answer 1

I’d disable the button instead of hiding; creates a less confusing interface.

You can do this most easily by just adding an onclick attribute:

<p id="button_<%= review.id %>" onclick="this.disabled=true;"><%= f.submit "vote" %></p>

But if you want to hide it, you can use this.style.display='none'; instead. (If I can remember vanilla JS)

If you’re already using jQuery though (or are going to be doing a lot of stuff like this):

$('#button_<%= review.id %>').click(function() {
    $(this).remove(); // or $(this).hide();
}

edit: this shows the difference between Dr.Dredel’s and my solution

---

onsubmit version to make RobG happy (you have to put it on the <form>)

<form ... onsubmit="document.getElementById('button_<%= review.id %>').disabled=true;">

He’s right that it makes more sense to do it onsubmit; there are other ways to submit a form such as by pressing enter. Presumably you would still want to button to get disabled in such scenarios (which if I’m not mistaken will also prevent you from submitting twice via enter)

edit: why yes, it does http://jsfiddle.net/mnbayazit/9Snna/2/