how to disable button after single click in outsystems

Hi Team,

Can any one help me how to disable button after single click immediately as need to restrict the user after first click .


any help is appreciated.


Thanks,

Sattibabu Vatti.

Best way to accomplish this is with a tiny javascript code. Take a look at this fiddle:

https://jsfiddle.net/joaomelont/0kLzhy1s/5/

Hi Sattibabu Vatti,

You can use javascript as João Melo said. But I would suggest you to use a forge component if your button is with a Submit method. Please find the link below of forge component:


https://www.outsystems.com/forge/component-overview/2579/button-locker


Regards,

Manthan Shah.

Solution

Hi Sattibabu Vatti,

Use below event in onClick event under extended properties of button.

"var e=this;setTimeout(function(){e.disabled=true;},0);return true;"

  

Hope this helps.


Sravan

Solution

Hi Sattibabu Vatti,

Another simple approach to this other then the JS is :

1- Create a local Boolean flag variable on Screen & set it to true by Default.

2- Add this variable to Button Enable Property.

3- Add onClick Listener on Button

4- Under OnClick Action set the local Boolean flag variable to False.


Hope it helps,

Assif

assif_tiger wrote:

Hi Sattibabu Vatti,

Another simple approach to this other then the JS is :

1- Create a local Boolean flag variable on Screen & set it to true by Default.

2- Add this variable to Button Enable Property.

3- Add onClick Listener on Button

4- Under OnClick Action set the local Boolean flag variable to False.


Hope it helps,

Assif

@assif_tiger, this will not restrict the button at all... for any kind of restriction to take place you would also need to:

  • set the Button's Name property;
  • set the Button's Method property to Ajax Submit;
  • add an Ajax Refresh to the OnClick handler to also refresh the Button.

And this will only restrict clicks after the server processes the request. Definitely not what the OP was asking.

As far as I know there is no way of restricting clicks without some sort of Javascript, either directly embedded, like João Melo's and Sravan Vanteru's approaches or by using a component that does it for you behind the scenes.


Jorge Martins wrote:

assif_tiger wrote:

Hi Sattibabu Vatti,

Another simple approach to this other then the JS is :

1- Create a local Boolean flag variable on Screen & set it to true by Default.

2- Add this variable to Button Enable Property.

3- Add onClick Listener on Button

4- Under OnClick Action set the local Boolean flag variable to False.


Hope it helps,

Assif

@assif_tiger, this will not restrict the button at all... for any kind of restriction to take place you would also need to:

  • set the Button's Name property;
  • set the Button's Method property to Ajax Submit;
  • add an Ajax Refresh to the OnClick handler to also refresh the Button.

And this will only restrict clicks after the server processes the request. Definitely not what the OP was asking.

As far as I know there is no way of restricting clicks without some sort of Javascript, either directly embedded, like João Melo's and Sravan Vanteru's approaches or by using a component that does it for you behind the scenes.


Thanks, Jorge for Correcting me :)

But my answer was more often for the Mobile, as I didn't get a clear picture from the question of whether it is for mobile or web.



Sravan Vanteru wrote:

Hi Sattibabu Vatti,

Use below event in onClick event under extended properties of button.

"var e=this;setTimeout(function(){e.disabled=true;},0);return true;"

  

Hope this helps.


Sravan

Thanks Sravan.. your solution working as expected to me. :)