Home/ Questions/Q 8747535
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T12:22:19+00:00

As described here: https://developers.google.com/apps-script/html_service#GoogleScriptAPI I am using a little form in my google app

  • 0

As described here:

https://developers.google.com/apps-script/html_service#GoogleScriptAPI

I am using a little form in my google app scripts html interface template to allow submission of data:

<form id='myForm'><input type='button' onclick='google.script.run.processForm(this.parentNode)'></form>

This hits a function in my script that updates a spreadsheet cell like so:

function processForm(params) {
  var ss = SpreadsheetApp.openById(XXXXXXXXX);
  var email_sheet = ss.getSheetByName('Week '+(parseInt(params['week'],10)+1)+' Assignments');
  var range = colName(parseInt(params['assignment'],10)+1) + (parseInt(params['match'],10)+1);
  var existing_val = email_sheet.getRange(range).getValue()
  email_sheet.getRange(range).setValue(existing_val+ params['submission']);
}

Lots of things a bit specific to my larger system there, but what this does is allow students in my classes to submit assignment info, which is dumped into a place in the spreadsheet that corresponds with their google login, and when they refresh the page, the html interface updates to indicate receipt of submission. The interface looks like this:

htmlinstance interface using google app script form submissions

Just having got this to work I am popping the champagne, since it will hugely simplify managing student submissions, but at the moment the interface would be much more intuitive if when the user hit the submit button that there would be an immediate update removing the form, and switching from the red cross to the green tick. At the moment the user must reload the entire page.

From reading the docs:

https://developers.google.com/apps-script/html_service#Caja

it seems like jqueryUI might be the way to do something like this, but I’m not clear if jqueryUI will play well with the google app script form submission. I’m going to be studying the jqueryUI in much detail, but I wondered if anyone knew if these two will even mix.

From searching around the subject, I see JQueryUI will not mix with google app scripts UIInstance

How to mix jQuery and a UiInstance for generating GUIs

however I am working with htmlinstance, so jquery should be fine right? Or am I barking up the wrong tree completely?

Many thanks in advance

p.s. I really need to work out how to better style the submit buttons, and also if you hit return in the text files it seems like a full form submit takes place and gives this error “this webpage is not available
The server at 9f9e682e-25ca-4eae-b4f9-6cac8db35390.foo.bar can’t be found, because the DNS lookup failed. DNS is the network service that translates a website’s name to its Internet address.” – I’ve searched that error online, but to no joy – hopefully again JQueryUI can help me fix this, even with Caja sanitization … just would love to get input on whether I should cut my losses with the interface I got so far …

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use jQuery and jQueryUI normally with HtmlService, it does not interfere with your form submission part of the script. The looks of a page, form or its does not affect the handling of their values.

    But, from your description, what you really need to make this ‘icon switching’ and ‘hiding the input and button’ is just some good old javascript. jQuery can make it easier (less code), but if you’re not comfortable with plain javascript, it will probably just give you more trouble to set up. The same applies to jQueryUI, which makes it easier to build beautiful interfaces, but yours seems somewhat simple and jQueryUI may be an overkill.

    Hope this helps.

    • 0