Collecting data to a google sheet from a webapp

Question

I have a basic sheet with the jSignature code that works and collects the data from the webapp when published. I wanted to add on this so had created another sheet and followed the same layout. Admittedly, I am just a copy and paste coder at this time. I understand a lot of what I'm reading, but some things just don't register to me yet. I can't for the life of me figure out why the first sheet works and the second doesn't. *the working sheet only works with the folder id put in, I believe, so you'll have to replace that.

Here is the link to the sheet that works (hopefully all can view): https://drive.google.com/open?id=1uJk7ZkOKUp1Z8afTxVZ1uRdoTCxa08MRYQtVcOmTOAk

and the one that doesn't: https://drive.google.com/open?id=1tINd-54djeIhfOL3laLNXiohNlAPONb6MDA6Y_xQUKI

If for whatever reason those links don't work, here are the code snippets:

Working Code.gs

function showDialog() {
  var html = HtmlService.createHtmlOutputFromFile('jSignature')
    .setWidth(400)
    .setHeight(300);
   SpreadsheetApp.getUi()
  .showModalDialog(html, 'Your Signature is Required');
}

function doGet() {
  return HtmlService
      .createTemplateFromFile('jSignature')
      .evaluate();
}

function saveImage(bytes, sign){
  var ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Register');
  var dateObj = Date.now();
  var bytes = bytes.split(",")
  var blob = Utilities.newBlob(Utilities.base64Decode(bytes[1]), 'image/png');
  var fileName = blob.setName("Signature "+dateObj).getName();
  var sigFolder = DriveApp.getFolderById("myfolderid"); //replace with your folder id
  var url = sigFolder.createFile(blob).getId();
  Logger.log(url)
  var name = sign.username;
  var employeenumber = sign.useremployeenumber;
  var signature = ss.insertImage(blob,4,ss.getLastRow()+1);
  signature.setWidth(500);
  signature.setHeight(20);
  signature
  var imageCell = ss.getRange(ss.getLastRow()+1, 1, 1, 3).setValues([[Date(), name,employeenumber]]);
}

Working .html








Please sign your name in the pad below: 

Full Name: 

Employee Number: 


Signature:

non-working code.gs

function showDialog() {
  var html = HtmlService.createHtmlOutputFromFile('jSignature')
    .setWidth(400)
    .setHeight(300);
   SpreadsheetApp.getUi()
  .showModalDialog(html, 'Your Signature is Required');
}

function doGet() {
  return HtmlService
      .createTemplateFromFile('jSignature')
      .evaluate();
}

function saveImage(bytes, sign){
  var ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('FormResponse');
  var dateObj = Date.now();
  var bytes = bytes.split(",")
  var blob = Utilities.newBlob(Utilities.base64Decode(bytes[1]), 'image/png');
  var fileName = blob.setName("Signature "+dateObj).getName();
  var sigFolder = DriveApp.getFolderById("myfolderid"); //replace with your folder id
  var url = sigFolder.createFile(blob).getId();
  Logger.log(url)
  var carrier = sign.carrier;
  var address = sign.address;
  var dname = sign.dname;
  var dnum = sign.dnum;
  var date = sign.date;
  var time = sign.time;
  var tractortruck = sign.tractortruck;
  var odom = sign.odom;
  var aircompressor = sign.aircompressor;
  var airlines = sign.airlines;
  var BeltsandHoses = sign.BeltsandHoses;
  var Body = sign.Body;
  var BrakeAccessories = sign.BrakeAccessories;
  var BrakesParking = sign.BrakesParking;
  var BrakesService = sign.BrakesService;
  var Clutch = sign.Clutch;
  var CouplingDevices = sign.CouplingDevices;
  var DefrosterHeater = sign.DefrosterHeater;
  var DriveLine = sign.DriveLine;
  var Engine = sign.Engine;
  var Exhaust = sign.Exhaust;
  var FifthWheel = sign.FifthWheel;
  var FluidLevels = sign.FluidLevels;
  var FrameandAssembly = sign.FrameandAssembly;
  var FrontAxle = sign.FrontAxle;
  var FuelTanks = sign.FuelTanks;
  var Horn = sign.Horn;
  var Lights = sign.Lights;
  var Mirrors = sign.Mirrors;
  var Muffler = sign.Muffler;
  var OilPressure = sign.OilPressure;
  var Radiator = sign.Radiator;
  var RearEnd = sign.RearEnd;
  var Reflectors = sign.Reflectors;
  var SafetyEquipment = sign.SafetyEquipment;
  var Starter = sign.Starter;
  var Steering = sign.Steering;
  var SuspensionSystem = sign.SuspensionSystem;
  var TireChains = sign.TireChains;
  var Tires = sign.Tires;
  var Transmission = sign.Transmission;
  var TripRecorder = sign.TripRecorder;
  var WheelsandRims = sign.WheelsandRims;
  var Windows = sign.Windows;
  var WindshieldWipers = sign.WindshieldWipers;
  var Other = sign.Other;
  var signature = ss.insertImage(blob,47,ss.getLastRow()+1);
  signature.setWidth(500);
  signature.setHeight(20);
  signature
  var imageCell = ss.getRange(ss.getLastRow()+1, 1, 1, 46).setValues([[carrier, address, dname, dnum, date, time, tractortruck, odom, aircompressor, airlines, BeltsandHoses, Body, BrakeAccessories, BrakesParking, BrakesService, Clutch, CouplingDevices, DefrosterHeater, DriveLine, Engine, Exhaust, FifthWheel, FluidLevels, FrameandAssembly, FrontAxle, FuelTanks, Horn, Lights, Mirrors, Muffler, OilPressure, Radiator, RearEnd, Reflectors, SafetyEquipment, Starter, Steering, SuspensionSystem, TireChains, Tires, Transmission, TripRecorder, WheelsandRims, Windows, WindshieldWipers, Other]]);
}

non-working html








DRIVER VEHICLE INSPECTION REPORT
AS REQUIRED BY THE D.O.T. FEDERAL MOTOR CARRIER SAFETY REGULATIONS



  
  Carrier:
    

      Address:
    

      Driver Performing Inspection:
  

  Driver's Employee Number:

  


  Date Performed:

  


  Time Performed:

  


  Tractor / Truck #:

  


  Odometer Reading:

  


  Tractor / Truck Inspection:


  
  
  
  Satisfactory
  Unsatisfactory
  
  
  Air Compressor
  
  
  
  
  Air Lines
  
  
  
  
  Battery
  
  
  
  
  Belts and Hoses
  
  
  
  
  Body
  
  
  
  
  Brake Accessories
  
  
  
  
  Brakes, Parking
  
  
  
  
  Brakes, Service
  
  
  
  
  Clutch
  
  
  
  
  Coupling Devices
  
  
  
  
  Defroster/Heater
  
  
  
  
  Drive Line
  
  
  
  
  Engine
  
  
  
  
  Exhaust
  
  
  
  
  Fifth Wheel
  
  
  
  
  Fluid Levels
  
  
  
  
  Frame and Assembly
  
  
  
  
  Front Axle
  
  
  
  
  Fuel Tanks
  
  
  
  
  Horn
  
  
  
  
  Lights -
    Head/Stop
    Tail/Dash
    Turn Indicators
    Clearance/Marker
  
  
  
  
  Mirrors
  
  
  
  
  Muffler
  
  
  
  
  Oil Pressure
  
  
  
  
  Radiator
  
  
  
  
  Rear End
  
  
  
  
  Reflectors
  
  
  
  
  Safety Equipment -
    Fire Extinguisher
    Flags/Flares/Fusees
    Reflective Triangles
    Spare Bulbs and Fuses
    Spare Seal Beam
  
  
  
  
  Starter
  
  
  
  
  Steering
  
  
  
  
  Suspension System
  
  
  
  
  Tire Chains
  
  
  
  
  Tires
  
  
  
  
  Transmission
  
  
  
  
  Trip Recorder
  
  
  
  
  Wheels and Rims
  
  
  
  
  Windows
  
  
  
  
  Windshield Wipers
  
  
  
  
  Other
  
  
  
  


Signature:

I am looking to publish this as a webapp and be able to collect the responses in the sheet.

Thank you.

ziganotschka · Accepted Answer

There are two issues with your script:

you call

      ...
      dname: document.getElementsByName('dname')[0].value,
      dnum: document.getElementsByName('dnum')[0].value,
      ...

instead of

       ...
      dname: document.getElementsByName('drivername')[0].value,
      dnum: document.getElementsByName('drivernumber')[0].value,
      ...

but there are no elements with the names 'dname' and 'dnum' (don't mix up names with Ids...)

There are several wrong getElementsByName() calls - change them all.

You call

    google.script.run.saveImage(bytes, sign);

both within function saveImage(e) and window.onload=function()

Remove the second one - you don't need to call saveImage(bytes, sign) twice, and also within window.onload=function() bytes and sign are not defined.

Those are the error messages in the console that helped me to identify the errors:

Console logs are also very helpful for troubleshooting.

Collecting data to a google sheet from a webapp

Answers (1)

There are two issues with your script:

Related Questions