how to disable button after single click in outsystems

Sattibabu Vatti

Solved

Question

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.

13 May 2019

Sravan Vanteru

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

See solution in context

14 May 2019

2 replies

Last reply 05 Mar 2020

Show thread

Hide thread

Sattibabu Vatti

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. :)

15 May 2019

Vaibhav phutane

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

Is there any way other than writing Javascript?
It is not recommended use seTimeout() function

05 Mar 2020

João Melo

MVP

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

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

13 May 2019

Manthan Shah

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.

14 May 2019

Sravan Vanteru

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

14 May 2019

2 replies

Last reply 05 Mar 2020

Show thread

Hide thread

Sattibabu Vatti

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. :)

15 May 2019

Vaibhav phutane

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

Is there any way other than writing Javascript?
It is not recommended use seTimeout() function

05 Mar 2020

assif_tiger

MVP

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

14 May 2019

2 replies

Last reply 15 May 2019

Show thread

Hide thread

Jorge Martins

MVP

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.

15 May 2019

assif_tiger

MVP

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.

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.

15 May 2019

assif_tiger

MVP

Hi Folks,

Alternate standard outsystems solution for restricting the spam click or allowing a single click :

- Using the Link instead button.

- Applying 'Button' css class on it, so that it will look like a button.

- Using the 'Load' css class.

Now this Load class will automatically handle spam click or give a pause to user by showing a progress on button for some seconds.

Note: This will again set the button i.e link enable to allow click.

Hope it helps,

Assif

05 Mar 2020

Rituparna Nayak

where to add the js in reactive , my onclick is set to a different action already

02 Feb 2023

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines