Google Apps Script – Disable Enable Submit Button in Sidebar

Google Apps Script, Javascript, Jquery, HTML

I was working on a Google Apps Script project lately in Google Sheets that set up parameters in a sidebar and then ran the process once the user clicked the “Submit” button. The problem was that the process was taking a while and that “Submit” Button was ripe to be clicked multiple times by the impatient user before the server-side code could even finish its operation.

To fix this I needed to disable the submit button once it had been clicked and then enable it again once the server-side process was complete. Here, I need to:

  1. Disable the button and get the data from the client-side Javascript inside my sidebar’s HTML file.
  2. Do something awesome with it server-side.
  3. Upon the completion of the server-side awesome, call back to the HTML file and enable the button again.

The Example

I have a very simple Google Sheets Side Bar with a “Submit” and “Cancel” button. When the “Submit” button is clicked it calls the function submittington (can he get any more creative? No. No he can’t).

This function then disables the “Submit” button sends a variable to the client-side and displays it stylishly in the sheet multiple times for the users viewing pleasure. After the function is executed, it calls back to the client-side submittington function and enables the button.

Behold!!! The example:

Disable Enable Button in Sidebar Google Apps Script

The Code

Let’s take a look at the whole code and then we will break it down.

index.html onOpen() and coolSidebar()

When the file opens, the user will be greeted with a menu option created with the onOpen function ( lines 10-15). Once clicked the coolSidebar function ( lines 18-23) is called upon to create the sidebar from the index.html.

More on this here:

index.html Submit button 

Action Button Class - Google Apps Scriptaction button class disabled



Line 13 of the index.html creates the button code:

<input class="action" id="submit" type="button"value="Submit"  onmouseup="submittington()" >

When the mouse clicks the button and releases, it calls the submittington() function.  The class "action" is specific to Google Apps Script custom CSS and enables the button to be formatted in such a striking and desirable blue that clicking the button is literally the only thing you can think about. We’ll also use the id, "submit", to disable and re-enable the button.

index.html submittington()

As soon as the submittington function is called, we use the following piece of handy-dandy Jquery code to disable the button (index.html line 20):


The hash (#) identifies the id of the button. Then it sets the properties, prop, to disable as true.

?You can support me for free by using this Amazon affiliate link in your next tech purchase :Computers & Stuff! ?

The in line 21 we do some Javascript stuff, in our case, the highly technical task of creating a…variable – gasp!!! You could put whatever you need to process client-side here.


Jumping down to index.html line 32 we run our callback. First, we declare the JavaScript API class Let’s take a look at the whole line of code and break it down.;

This code really runs in reverse to the way it is displayed. Once it is run. It takes the object – in this case, theWord variable – and makes it an argument for the processForm(input) function in, line 26-29.

Once processForm has done it’s magic server-side, and successfully might I add, it calls the nested enable() function back in the index.html, line 24-26.


The enable() function then runs our familiar jquery:


This references the "submit" id again and then access its properties setting disabled  this time to false.

Create and Publish Google Workspace Add-ons with Apps Script Course 300px

processForm and timeWaster

The processForm(input) function takes the input from the index and calls the timeWaster(text) that does exactly what the function describes: creates a bunch of silly on the screen so that we can see that the submit button is disabled while it’s doing its thing.


Disabling and enabling buttons and functionality while server-side processes occur can be done in the same way by referencing the div id and using the Jquery property call to change its values.

The withSuccessHandler(function) is a callback extension to the Javascript API class.  Once the server-side operation is complete, it calls back to the HTML file Javascript to execute a client-side function.

Create and Publish a Google Workspace Add-on with Apps Script Course

Need help with Google Workspace development?

My team of experts can help you with all of your needs, from custom app development to integrations and security. We have a proven track record of success in helping businesses of all sizes get the most out of Google Workspace.

Schedule a free consultation today to discuss your needs and get started or learn more about our services here.

Leave a Reply