Student Feedback system - HTML form - part 2

Continuing from Student Feedback system - HTML form - part 1 we now look at the form itself. We have the relevant data from the getValues function wrapped up in a suitable json string that can be 'parse'd back into JavaScript via the HTML.

2. htmlForm

HTML Student Feedback Form

Above is a snippet of the form which picks up the students' name and then creates two boxes, one for each tutor. There are dropdown boxes for three of the fields and then a free-text field for comments to be added. Each tutor can see the feedback from the other - as this was a requirement in order to encourage collaboration. They are however unable to modify each others feedback through the form - only administrators can do this as you will see later in the script (or if you access the sheet directly).

In terms of the code (embedded below) the htmlForm begins with some styling to better structure the form - this was very much trial and error to achieve fitting it all within tables to keep it neat and aligned. Moving onto the script tag we create individual field values that we can use later in elements of the form ('getElementById'). For the likes of tutor names we use 'innerHTML' as these are a set values from the spreadsheet not to be changed.

An if statement determines which elements are disabled based on which tutor the user is (from the getActiveUser function). This was added retrospectively when I realised that without this feature any feedback from one tutor was inadvertently overwritten by another due to the writeBack function detailed in the next blog post, which would write the whole row of data back including any blanks (or null) values. If a user is not identified as a tutor then no fields are disabled - this was configured for administrators to use the form unhindered.

The main body of the HTML forms the structure of the tables and calls the required 'id' for an HTML element. A 'select' tag is used to create the dropdown boxes and a 'textarea' for the comments. The submit button runs the writeBack function with data from the form as its input parameter.