Disable link and button after clicking

Asked

Viewed 518 times

-2

I have already researched here and other sites but I have not found an answer that applies correctly to my scenario. The idea is the following I have two pages one with a link and the other with a button a link calls a php page that runs a connection on a linux and within linux runs some scripts, until then everything ok. The page with the button has a form using the method post with blank action to call itself, inside this page I have an if that checks if the variable _POST is true if it connects in linux and runs another script. In both cases it is working perfectly, however when the user clicks the page starts to load and only after connecting to linux and running the script it shows the output on the screen, the browser starts to load right however some users who have no patience are clicking multiple times on the link and button.

My idea is as follows, when the user click on the link or the button need to remove or disable them from the page to prevent the user from clicking again.

Preferably I wanted to do this with javascript but if there is some other way that has the same result is also valid.

This would be the doubt, as I do to disable or remove the link and button of the page after the click of the user without interrupting the natural execution of the page?

php button link

  • cannot simply add the attribute "disabled" or the style "display:None" or "visibility: Hidden"?

2 answers

1


A suggestion, which I think best, to let the user know that there is an action in progress, would not be to remove or hide the page element, but to change its behavior and the text.

When clicking on the element, be it a link <a> or button, you can disable it and change the text to something like "Enviando...", "Aguarde..." or "Processando...".

You can do it using onclick. In the case of links <a>, you can disable the click using the property pointer-events: none, and in the case of buttons, adding the attribute disabled.

It would look like this in both cases:

<a href="#" onclick="this.style.pointerEvents = 'none'; this.textContent = 'Enviando...'">Link</a>
<br>
<button onclick="this.disabled = true; this.textContent = 'Enviando...'">Enviar</button>

Note that after the first click, both elements are disabled for new clicks. In href of the link put the hash # just for example. You will put the normal destination URL on it.

  • Excellent! The <a> I got it right now the problem is with the button, because it is inside a form if I do the way you told me it disables the button but does not send the form.

  • I tried to do with onsubmit="" but the same thing doesn’t send the form =/

  • Try putting a setTimeout: <button onclick="setTimeout('this.disabled = true', 10); this.textContent = 'Enviando...'">Enviar</button>

  • Ball show, worked perfectly, you’re fucking Sam.

-2

You can set a COOKIE (via Javascript) and then set a setINterval that will check if the cookie exists, if it exists you disable the elements you want.

Browser other questions tagged php button link

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