permanently disable the button after submit

Question

Is there any way by which we can disable/remove a button permanently after it is being clicked. Here is the code

<a href="send.php?id=<?php echo $row['issue_book_id'];?>">
  <button onclick="this.disabled='disabled';" style="margin-top:5px !important;" type="button" class="btn btn-warning btn-lg">
    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Send Msg
  </button>
</a>

Yes using jquery, this question is already available on stackoverflow and maybe in hundred thousand of other websites. Should be closed — Anyone_ph, May 02 '17 at 07:17
You could set a cookie and check for it's existence on each page load. If the cookie exists do not display or disable the button — Professor Abronsius, May 02 '17 at 07:17
Possible duplicate of [Disable/enable an input with jQuery?](http://stackoverflow.com/questions/1414365/disable-enable-an-input-with-jquery) — Anyone_ph, May 02 '17 at 07:17
Otherwise (even if similar to @RamRaider) you can store this data in Session or in database :) — Goikiu, May 02 '17 at 07:18
Your HTML is invalid. You cannot have a `button` inside an `a`. — Rory McCrossan, May 02 '17 at 07:18
`onclick="this.disabled='true';` may work... But the wrapping anchor to send.php... lol Funny. — Louys Patrice Bessette, May 02 '17 at 07:28

score 1 · Answer 1 · answered May 02 '17 at 07:24

Call a function onclick of button. Disable the button from that function.

Hope this snippet will be useful

HTML

<button onclick="updateState(this)" style="margin-top:5px;" type="button" class="btn btn-warning btn-lg">
    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Send Msg
  </button>

JS

function updateState(context){
     context.setAttribute('disabled',true)
    }

Beside a button inside an anchor tag is not valid html 5. Also inline styles does not need !important as it comes with higest specificity

DEMO

So you just left out the ` – Louys Patrice Bessette May 02 '17 at 07:32 — Louys Patrice Bessette, May 02 '17 at 07:32

score 0 · Answer 2 · answered May 02 '17 at 07:35

You may want something like this:

<a href="#" class="btn btn-warning btn-lg" onclick="this.className += ' disabled';" style="margin-top:5px !important;">
    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Send Msg
</a>

Notice that I've changed the button tag to an anchor tag. This is ok in Bootstrap you are using.

Louys Patrice Bessette · Answer 3 · 2017-05-02T08:05:50.297

Since you tagged jQuery to this question....

You mess with 4 languages...

One is PHP on which we have no idea what you intend to do with.
I suppose you want to send an id to server-side...
How will it be handled? and what is the expected answer?
(out of scope)

But the 3 others should be managed like this:

CSS:

#mybutton{
  margin-top:5px !important;
}

HTML:

<button id="mybutton" class="btn btn-warning btn-lg" data-book-id="<?php echo $row['issue_book_id'];?>">
  <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Send Msg
</button>

jQuery:

$("#mybutton").on("click",function(){
  $(this).attr('disabled',true);

  $.ajax({
    url: "send.php",
    type: "POST",
    data: "id="+$(this).data("book-id"),    // the id sent in POST.
    cache: false,
    success: function(html) {
      // Success message
      console.log("Ajax worked! Now What do I do with it!?!");
      console.log("Ho!... Here is the html: \n\n" + html);
    },
    error: function(jqXHR,textStatus,errorThrown) {
      console.log("Error: "+errorThrown);
    }
  });
});

permanently disable the button after submit

3 Answers3