Make a button unclickable after one click

Question

I'm trying to create a button that becomes deactivated after the first click; however I have no clue how to do it. This is what I have now:

<input type="button" id="btnSearch" value="Search" onclick="Fuction();" />

This button will NOT submit a form. Could someone help me? I'm totally new to this. I've tried following the answer in other threads but got lost.

You forgot to post the JavaScript you tried that didn't work. — j08691, May 18 '14 at 17:10
http://stackoverflow.com/questions/3014649/how-to-disable-html-button-using-javascript — 13ruce1337, May 18 '14 at 17:12

Frinsh · Answer 1 · 2015-04-07T07:37:02.993

5

Separating javascript from HTML:

HTML:

<input type="button" value="Click me!" id="form-button"/>

Javascript:

document.getElementById('form-button').onclick = function () {
    this.disabled = true;
}

edited Apr 07 '15 at 07:37

answered May 18 '14 at 17:27

Frinsh

score 4 · Accepted Answer · answered May 18 '14 at 17:21

4

Not the preferred way of course, but this will get you the result you are after.

function Fuction() {
  document.getElementById('btnSearch').disabled = 'disabled';
}

answered May 18 '14 at 17:21

Tommy Ivarsson

Why the downvote? This answer make an unnecessary DOM look-up, but it works nonetheless. – Pavlo May 18 '14 at 17:28
2

The major problem with this is that a user would need to define one function for every button they want to apply it to, which isn't exactly a good idea. – Meredith May 18 '14 at 17:29
Of course. That's why I said it's not the preferred way. However it does work and it is very simple. I may be mistaken but I gathered OP was a beginner and beginners need trivial solutions to problems in order to get going. – Tommy Ivarsson May 18 '14 at 17:34
1

It comes down to if you want to teach beginners _a solution_ or if you want to teach them _a good solution_. – Meredith May 18 '14 at 17:36
@Meredith IMO, SO isn't a programming language course, and no solution is without a downside. What he should be doing is explaining why exactly this is "not the preferred way" – Pavlo May 18 '14 at 17:47
@Pavlo I'd be ok with that – Meredith May 18 '14 at 17:51
1

I'd say that most often it's more sensible to teach them a solution they can understand at the level they are at. – Tommy Ivarsson May 18 '14 at 18:30

score 2 · Answer 3 · answered May 18 '14 at 17:14

2

Set disabled attribute in the end of your handler:

function Fuction(button) {
    // your code

    button.disabled = true;
}

Markup:

<input type="button" id="btnSearch" value="Search" onclick="Fuction(this);" />

answered May 18 '14 at 17:14

Pavlo

Not quite. Don't forget that the `this` keyword _doesn't_ refer to the button element. (It applies to the window object when `Function()` is attached in the manner shown in the question) – enhzflep May 18 '14 at 17:18
Bingo! That's more like it. :) – enhzflep May 18 '14 at 17:19

score 0 · Answer 4 · answered May 18 '14 at 17:16

0

Just call event.preventDefault() in the functions implicitly added event variable to first stop the propagation. To disable it afterwards just call setAttribute("disabled", true); on the element. Something like

function aMeaningfulName(e) {
    e.preventDefault();
    e.target.setAttribute("disabled", true);

    // your logic here
}

answered May 18 '14 at 17:16

nietonfir

`e.target.setAttribute("disabled", true);` – why not `e.target.disabled = true`? – Pavlo May 18 '14 at 17:22
@Pavlo For no apparent reason… ;-) – nietonfir May 18 '14 at 19:29

4 Answers4