Disable button after click

Asked

Viewed 5,883 times

4

I have a form that sends likes to my database by clicking the button.

<form action="envia_curtir.php" method="post">
   <button class="icones icone-polegares-para-cima" id="botao"></button>
   <?=$curtida['curtidas'];?>
</form>

What can I do to disable the button after clicking? Because I don’t want the button to be triggered more than once.

3 answers

5

Using pure Javascript, you can do it using:

<button onclick="this.disabled = true;">Curtir</button>
  • I’m using pure javascript, but the way you put the button is disabled always and not only after it has been clicked.

  • @Francisvagnerdalight the button will only be disabled after it has been clicked. Hence the event onclick. You want the button to be enabled again after the form has been submitted?

  • So Daniel, but I put code here and the button was disabled even before clicking

3

There are several ways to do this, but you basically need to capture the click event and use the disabled property.

https://www.w3schools.com/tags/att_input_disabled.asp

function desabilitaBotao(){
     document.getElementById("BtnCurtir").disabled = true;
}

$("#BtnCurtir2").on("click", function(){
  $(this).prop("disabled", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Existem diversas formas de você fazer isso -->
<button onclick="this.disabled = true;">Curtir</button>
<button onclick="desabilitaBotao()" id="BtnCurtir">Curtir</button>
<button id="BtnCurtir2">Curtir</button>

  • Yes Caique, that’s exactly what I need, but you know how to do it without using jquery?

  • I demonstrated 3 examples where only the last one is with Jquery.

  • A yes, sorry to...

  • So @Caiqueromero don’t know what’s going on here, but it’s not working, I don’t know why.... this is my button: <button class="icon-thumbs-to-top" id="button" onclick="disabled disabled = true; } </script> But it doesn’t work... can identify some error?

  • There is an easier way for you to identify the error, press F12 in the browse it open the screen "developer tools" in it there is a tab written console. If your code has an error in Javascript this tab will show you.

  • so... I checked the console... it shows no error at all..... I have also opened and closed the browser, changed browser and did not work. What happens is that the button is already disabled. I also tried using Jquery but did not give... Arg!!

  • face tries to update your question by including more of your code so we can assist you

Show 2 more comments

0

Suppose you use Jquery:

<button onclick="dasabilitaBotao(this)">Curtir</button>
<script> 
    function desabilitaBotao(element){
    $(element).prop('disabled', true)
    }
</script>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.