Javascript 将表单数据收集到谷歌表单更麻烦

上一次尝试时，我有一个脚本运行得很好，尽管后来我添加了一些东西，并使其成为多页表单。该代码似乎收集了数据，但似乎没有将其传输到google工作表。自上次工作以来，我没有更改输入的名称

代码G.gs：

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("my folder"); //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 imageCell = ss.getRange(ss.getLastRow()+1, 2, 1, 48).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,url]]);
}

HTML:

输入[类型=提交]：已禁用{
背景颜色：鲑鱼；
}
/*标记在验证时出错的输入框：*/
输入无效{
边框：2倍实心#ff0000；
盒影：0 15px 0px#ff0000插图；
}
.标签{
身高：0；
溢出：隐藏；
}
.步骤{
高度：30px；
宽度：30px；
边际：0.2px；
背景色：#bbbbbb；
边界：无；
边界半径：50%；
显示：内联块；
不透明度：0.5；
}
.step.active{
不透明度：1；
}
.一步完成{
背景色：印度红；
}
桌子{
宽度：100%；
边界塌陷：塌陷；
表格布局：自动；
触摸动作：操作；
}
td，th{
字体大小：40px；
边框：2倍纯色鬼白色；
}
th{
文本对齐：左对齐；
}
运输署{
文本对齐：居中；
}
.控制面板{
浮动：对；
}
.清除按钮{
宽度：150px；
高度：40px；
字体大小：25px；
显示：块；
左边距：自动；
}
输入[类型=提交]{
宽度：100%；
背景色：暗色；
颜色：白色；
填充：14px 20px；
利润率：8px0；
边界：无；
边界半径：4px；
光标：指针；
字号：1em；
}
.莫代尔{
宽度：100%；
边框：2个实心#ccc；
边界半径：4px；
背景色：鬼影白；
颜色：黑色；
}
.签名小组{
填充：0 20px 0 20px；
}
p{
字号：2em；
}
h3{
边框：6px红色虚线；
}
@媒体屏幕和（方向：横向）{
h3{
身高：0；
溢出：隐藏；
边界：无；
}
}
司机车辆检查报告
根据D.O.T.联邦汽车承运人安全条例

承运人：



地点：
PDX
欧盟政府
大海
SFO
执行检查的驾驶员：

司机的雇员编号：

执行日期：

执行时间：

拖拉机/卡车编号：

里程表读数：

满意的
不尽人意
空气压缩机
航空公司
电池
皮带和软管
身体
制动器附件
刹车，停车
行车制动器
离合器
耦合装置
除霜器/加热器
传动线
引擎
满意的
不尽人意
耗尽
第五轮
液位
框架和组件
前桥
油箱
喇叭
灯-
车头/停车
车尾/仪表板
转向指示灯
间隙/标记
镜子
消声器
油压
散热器
后端
满意的
不尽人意
反射器
安全设备-
灭火器
旗帜/照明弹/保险丝
反光三角形
备用灯泡和保险丝
备用密封梁
开胃菜
驾驶
悬挂系统
轮胎链
轮胎
传输
行车记录仪
车轮和轮辋
窗户
挡风玻璃刮水器
其他
*要获得最佳性能，请在横向视图中查看页面*
在下面的框中签名：



&拉阔；以前的
下一步»；
$（'.signature panel'）.jSignature（）；
$（'.clear button'）。在（'单击'）上，函数（e）{
$（'.signature panel'）.jSignature（“重置”）；
});
设date=newdate（）.toISOString（）.substr（0,10）；
document.querySelector（“#date”）。值=日期；
$（函数（）{
var d=新日期（），
h=d.getHours（），
m=d.getMinutes（）；
如果（h<10）h='0'+h；
如果（m<10）m='0'+m；
$（'input[type=“time”][value=“now”]'）。每个（函数（）{
$（this.attr（{'value'：h+'：'+m}）；
});
});
函数renderSignature（）{
$（“img#rendered”）.attr（“src”，$（“.signature panel”）.jSignature（'getData'，'default'））；
}
函数saveImage（e）{//这会将图像src发送到saveImages函数
var bytes=document.getElementById（'rendered'）.src；
console.log（字节）；
变量符号={
承运商：document.getElementsByName（'carrier'）[0]。值，
地址：$（'input[name=“address”]：checked'）.val（），
dname:document.getElementsByName（'drivername'）[0]。值，
dnum:document.getElementsByName（'drivernumber'）[0]。值，
日期：document.getElementsByName（'date'）[0]。值，
时间：document.getElementsByName（'time'）[0]。值，
tractortruck:document.getElementsByName（'tractortrucknum'）[0]。值，
odom:document.getElementsByName（'odometer'）[0]。值，
空压机：$（'input[name=“aircompressor”]：checked'）.val（），
航空公司：$（'input[name=“airlines”]：checked'）.val（），
安全带和软管：$（'input[name=“Beltsandhoothers”]：checked'）.val（），
正文：$（'input[name=“Body”]：checked'）.val（），
制动附件：$（'input[name=“BrakeAccessories”]：checked'）.val（），
BrakesParking:$（'input[name=“BrakesParking”]：选中'）.val（），
BrakesService:$（'input[name=“BrakesService”]：checked'）.val（），
离合器：$（'input[name=“Clutch”]：checked'）.val（），
CouplingDevices:$（'input[name=“CouplingDevices”]：选中'）.val（），
除霜器：$（'input[name=“DefrosterHeater”]：checked'）.val（），
动力传动系：$（'input[name=“DriveLine”]：checked'）.val（），
引擎：$（'input[name=“Engine”]：checked'）.val（），
排气：$（'input[name=“排气”]：选中'）.val（），
FifthWheel:$（'input[name=“FifthWheel”]：checked'）.val（），
FluidLevel:$（'input[name=“FluidLevel”]：选中'）.val（），
FrameandAssembly:$（'input[name=“FrameandAssembly”]：选中'）.val（），
前轴：$（'input[name=“FrontAxex”]：选中'）。val（），
燃料
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable:no"/></head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/willowsystems/jSignature/master/libs/jSignature.min.js"></script>
<style>
input[type=submit]:disabled {
    background-color: Salmon;
    }
/* Mark input boxes that gets an error on validation: */
input.invalid {
  border: 2px solid #ff0000;
  box-shadow:0 0 15px 0px #ff0000 inset;
}

.tab {
  height: 0;
  overflow: hidden;
}
.step {
  height: 30px;
  width: 30px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;  
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}
.step.finish {
  background-color: IndianRed;
}
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    touch-action: manipulation;
    }
td, th {
    font-size: 40px;
    border: 2px solid GhostWhite;
    }
th {
    text-align: left;
    }
td {
    text-align: center;
    }
.controls-panel {
    float: right;
    }
.clear-button {
    width: 150px;
  height: 40px;
  font-size: 25px;
  display: block;
  margin-left: auto;
    }
    input[type=submit] {
  width: 100%;
  background-color: DarkRed;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
}
.modal {
  width: 100%;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: GhostWhite;
  color: Black;
  }
  .signature-panel {
  padding: 0 20px 0 20px;
  }
p {
    font-size: 2em;
    }

h3 {
border: 6px dashed Red;
}

@media screen and (orientation:landscape){   
h3 {
height: 0;
overflow: hidden;
border: none;
}
}

</style>
<body>

<form id="regForm" action="/action_page.php">
  <center><h1>DRIVER VEHICLE INSPECTION REPORT</h1>
  <h5>AS  BY THE D.O.T. FEDERAL MOTOR CARRIER SAFETY REGULATIONS</h5></center><br>
   <div class="tab tab1">
  <p>Carrier:<br><br>
  <input type="text" name="carrier" value="My Company"></p>
  Location:
  <table id= "Address">
  <tr>
  <td>PDX</td>
  <td>EUG</td>
  <td>SEA</td>
  <td>SFO</td>
  </tr>
  <tr>
  <td><input type="radio" id="PDX" oninput="this.className = '';EUG.className = '';SEA.className = '';SFO.className = ''" name="Address" value="PDX"></td>

  <td><input type="radio" id="EUG" oninput="this.className = '';PDX.className = '';SEA.className = '';SFO.className = ''" name="Address" value="EUG"></td>

  <td><input type="radio" id="SEA" oninput="this.className = '';EUG.className = '';PDX.className = '';SFO.className = ''" name="Address" value="SEA"></td>

  <td><input type="radio" id="SFO" oninput="this.className = '';EUG.className = '';SEA.className = '';PDX.className = ''" name="Address" value="SFO"></td>
  </tr>
  </table>
  </div>
  <div class="tab tab2">
  Driver Performing Inspection:
<p><input type="text" oninput="this.className = ''" name="drivername" placeholder="Your full name"></p>
Driver's Employee Number:
<p><input type="number" oninput="this.className = ''" name="drivernumber" placeholder="Your employee number"></p>
Date Performed:
<p><input type="date" id="date" oninput="this.className = ''" name="date"></p>
Time Performed:
<p><input type="time" id="time" oninput="this.className = ''" name="time" value="now"></p>
  </div>
  <div class="tab tab3">
  Tractor/Truck Number:
<p><input type="number" oninput="this.className = ''" name="tractortrucknum" ></p>
Odometer Reading:
<p><input type="number" oninput="this.className = ''" name="odometer" ></p>
  </div>
  <div class="tab tab4">
  <table id="Inspection" width="100%">
  <tr><th></th>
  <td><small>Satisfactory</small></td>
  <td><small>Unsatisfactory</small></td></tr>
  <tr><th><label for="Air Compressor">Air Compressor</label></th>
  <td><input type="radio" id="aircompressor" name="AirCompressor" oninput="this.className='';aircompressor2.className=''" value="sat" ></td>
  <td><input type="radio" id="aircompressor2" name="AirCompressor" oninput="this.className='';aircompressor.className=''" value="unsat" ></td></tr>
  <tr><th><label for="Air Lines">Air Lines</label></th>
  <td><input type="radio" id="airlines" name="AirLines" oninput="this.className='';airlines2.className=''" value="sat" ></td>
  <td><input type="radio" id="airlines2" name="AirLines" oninput="this.className='';airlines.className=''" value="unsat" ></td></tr>
  <tr><th><label for="Battery">Battery</label></th>
  <td><input type="radio" id="battery" name="Battery" oninput="this.className='';battery2.className=''" value="sat" ></td>
  <td><input type="radio" id="battery2" name="Battery" oninput="this.className='';battery.className=''" value="unsat" ></td></tr>
  <tr><th><label for="Belts and Hoses">Belts and Hoses</label></th>
  <td><input type="radio" id="beltsandhoses" name="BeltsandHoses" oninput="this.className='';beltsandhoses2.className=''" value="sat" ></td>
  <td><input type="radio" id="beltsandhoses2" name="BeltsandHoses" oninput="this.className='';beltsandhoses.className=''" value="unsat"></td></tr>
  <tr><th><label for="Body">Body</label></th>
  <td><input type="radio" id="body" name="Body" oninput="this.className='';body2.className=''" value="sat"></td>
  <td><input type="radio" id="body2" name="Body" oninput="this.className='';body.className=''" value="unsat"></td></tr>
  <tr><th><label for="Brake Accessories">Brake Accessories</label></th>
  <td><input type="radio" id="brakeaccessories" name="BrakeAccessories" oninput="this.className='';brakeaccessories2.className=''" value="sat"></td>
  <td><input type="radio" id="brakeaccessories2" name="BrakeAccessories" oninput="this.className='';brakeaccessories.className=''" value="unsat"></td></tr>
  <tr><th><label for="Brakes, Parking">Brakes, Parking</label></th>
  <td><input type="radio" id="brakesparking" name="BrakesParking" oninput="this.className='';brakesparking2.className=''" value="sat"></td>
  <td><input type="radio" id="brakesparking2" name="BrakesParking" oninput="this.className='';brakesparking.className=''" value="unsat"></td></tr>
  <tr><th><label for="Brakes, Service">Brakes, Service</label></th>
  <td><input type="radio" id="brakesservice" name="BrakesService" oninput="this.className='';brakesservice2.className=''" value="sat"></td>
  <td><input type="radio" id="brakesservice2" name="BrakesService" oninput="this.className='';brakesservice.className=''" value="unsat"></td></tr>
  <tr><th><label for="Clutch">Clutch</label></th>
  <td><input type="radio" id="clutch" name="Clutch" oninput="this.className='';clutch2.className=''" value="sat"></td>
  <td><input type="radio" id="clutch2" name="Clutch" oninput="this.className='';clutch.className=''" value="unsat"></td></tr>
  <tr><th><label for="Coupling Devices">Coupling Devices</label></th>
  <td><input type="radio" id="couplingdevices" name="CouplingDevices" oninput="this.className='';couplingdevices2.className=''" value="sat"></td>
  <td><input type="radio" id="couplingdevices2" name="CouplingDevices" oninput="this.className='';couplingdevices.className=''" value="unsat"></td></tr>
  <tr><th><label for="Defroster/Heater">Defroster/Heater</label></th>
  <td><input type="radio" id="defrosterheater" name="DefrosterHeater" oninput="this.className='';defrosterheater2.className=''" value="sat"></td>
  <td><input type="radio" id="defrosterheater2" name="DefrosterHeater" oninput="this.className='';defrosterheater.className=''" value="unsat"></td></tr>
  <tr><th><label for="Drive Line">Drive Line</label></th>
  <td><input type="radio" id="driveline" name="DriveLine" oninput="this.className='';driveline2.className=''" value="sat"></td>
  <td><input type="radio" id="driveline2" name="DriveLine" oninput="this.className='';driveline.className=''" value="unsat"></td></tr>
  <tr><th><label for="Engine">Engine</label></th>
  <td><input type="radio" id="engine" name="Engine" oninput="this.className='';engine2.className=''" value="sat"></td>
  <td><input type="radio" id="engine2" name="Engine" oninput="this.className='';engine.className=''" value="unsat"></td></tr>
  </table>
  </div>
  <div class="tab tab5">
  <table id="inspection2">
   <tr><th>&nbsp;</th>
  <td><small>Satisfactory</small></td>
  <td><small>Unsatisfactory</small></td></tr>
  <tr><th><label for="Exhaust">Exhaust</label></th>
  <td><input type="radio" id="exhaust" name="Exhaust" oninput="this.className='';exhaust2.className=''" value="sat"></td>
  <td><input type="radio" id="exhaust2" name="Exhaust" oninput="this.className='';exhaust.className=''" value="unsat"></td></tr>
  <tr><th><label for="Fifth Wheel">Fifth Wheel</label></th>
  <td><input type="radio" id="fifthwheel" name="FifthWheel" oninput="this.className='';fifthwheel2.className=''" value="sat"></td>
  <td><input type="radio" id="fifthwheel2" name="FifthWheel" oninput="this.className='';fifthwheel.className=''" value="unsat"></td></tr>
  <tr><th><label for="Fluid Levels">Fluid Levels</label></th>
  <td><input type="radio" id="fluidlevels" name="FluidLevels" oninput="this.className='';fluidlevels2.className=''" value="sat"></td>
  <td><input type="radio" id="fluidlevels2" name="FluidLevels" oninput="this.className='';fluidlevels.className=''" value="unsat"></td></tr>
  <tr><th><label for="Frame and Assembly">Frame and Assembly</label></th>
  <td><input type="radio" id="frameandassembly" name="FrameandAssembly" oninput="this.className='';frameandassembly2.className=''" value="sat"></td>
  <td><input type="radio" id="frameandassembly2" name="FrameandAssembly" oninput="this.className='';frameandassembly.className=''" value="unsat"></td></tr>
  <tr><th><label for="Front Axle">Front Axle</label></th>
  <td><input type="radio" id="frontaxle" name="FrontAxle" oninput="this.className='';frontaxle2.className=''" value="sat"></td>
  <td><input type="radio" id="frontaxle2" name="FrontAxle" oninput="this.className='';frontaxle.className=''" value="unsat"></td></tr>
  <tr><th><label for="Fuel Tanks">Fuel Tanks</label></th>
  <td><input type="radio" id="fueltanks" name="FuelTanks" oninput="this.className='';fueltanks2.className=''" value="sat"></td>
  <td><input type="radio" id="fueltanks2" name="FuelTanks" oninput="this.className='';fueltanks.className=''" value="unsat"></td></tr>
  <tr><th><label for="Horn">Horn</label></th>
  <td><input type="radio" id="horn" name="Horn" oninput="this.className='';horn2.className=''" value="sat"></td>
  <td><input type="radio" id="horn2" name="Horn" oninput="this.className='';horn.className=''" value="unsat"></td></tr>

  <tr><th><label for="Lights">Lights -<br>&nbsp;&nbsp;&nbsp;&nbsp;Head/Stop<br>&nbsp;&nbsp;&nbsp;&nbsp;Tail/Dash<br>&nbsp;&nbsp;&nbsp;&nbsp;Turn Indicators<br>&nbsp;&nbsp;&nbsp;&nbsp;Clearance/Marker</label></th>
  <td><input type="radio" id="lights" name="Lights" oninput="this.className='';lights2.className=''" value="sat"></td>
  <td><input type="radio" id="lights2" name="Lights" oninput="this.className='';lights.className=''" value="unsat"></td></tr>
  <tr><th><label for="Mirrors">Mirrors</label></th>
  <td><input type="radio" id="mirrors" name="Mirrors" oninput="this.className='';mirrors2.className=''" value="sat"></td>
  <td><input type="radio" id="mirrors2" name="Mirrors" oninput="this.className='';mirrors.className=''" value="unsat"></td></tr>
  <tr><th><label for="Muffler">Muffler</label></th>
  <td><input type="radio" id="muffler" name="Muffler" oninput="this.className='';muffler2.className=''" value="sat"></td>
  <td><input type="radio" id="muffler2" name="Muffler" oninput="this.className='';muffler.className=''" value="unsat"></td></tr>
  <tr><th><label for="Oil Pressure">Oil Pressure</label></th>
  <td><input type="radio" id="oilpressure" name="OilPressure" oninput="this.className='';oilpressure2.className=''" value="sat"></td>
  <td><input type="radio" id="oilpressure2" name="OilPressure" oninput="this.className='';oilpressure.className=''" value="unsat"></td></tr>
  <tr><th><label for="Radiator">Radiator</label></th>
  <td><input type="radio" id="radiator" name="Radiator" oninput="this.className='';radiator2.className=''" value="sat"></td>
  <td><input type="radio" id="radiator2" name="Radiator" oninput="this.className='';radiator.className=''" value="unsat"></td></tr>
  <tr><th><label for="Rear End">Rear End</label></th>
  <td><input type="radio" id="rearend" name="RearEnd" oninput="this.className='';rearend2.className=''" value="sat"></td>
  <td><input type="radio" id="rearend2" name="RearEnd" oninput="this.className='';rearend.className=''" value="unsat"></td></tr>
  </table>
  </div>
  <div class="tab tab6">
  <table id="inspection3">
   <tr><th>&nbsp;</th>
  <td><small>Satisfactory</small></td>
  <td><small>Unsatisfactory</small></td></tr>
  <tr><th><label for="Reflectors">Reflectors</label></th>
  <td><input type="radio" id="reflectors" name="Reflectors" oninput="this.className='';reflectors2.className=''" value="sat"></td>
  <td><input type="radio" id="reflectors2" name="Reflectors" oninput="this.className='';reflectors.className=''" value="unsat"></td></tr>
  <tr><th><label for="Safety Equipment">Safety Equipment -<br>&nbsp;&nbsp;&nbsp;&nbsp;Fire Extinguisher<br>&nbsp;&nbsp;&nbsp;&nbsp;Flags/Flares/Fusees<br>&nbsp;&nbsp;&nbsp;&nbsp;Reflective Triangles<br>&nbsp;&nbsp;&nbsp;&nbsp;Spare Bulbs and Fuses<br>&nbsp;&nbsp;&nbsp;&nbsp;Spare Seal Beam</label></th>
  <td><input type="radio" id="safetyequipment" name="SafetyEquipment" oninput="this.className='';safetyequipment2.className=''" value="sat"></td>
  <td><input type="radio" id="safetyequipment2" name="SafetyEquipment" oninput="this.className='';safetyequipment.className=''" value="unsat"></td></tr>
  <tr><th><label for="Starter">Starter</label></th>
  <td><input type="radio" id="starter" name="Starter" oninput="this.className='';starter2.className=''" value="sat"></td>
  <td><input type="radio" id="starter2" name="Starter" oninput="this.className='';starter.className=''" value="unsat"></td></tr>
  <tr><th><label for="Steering">Steering</label></th>
  <td><input type="radio" id="steering" name="Steering" oninput="this.className='';steering2.className=''" value="sat"></td>
  <td><input type="radio" id="steering2" name="Steering" oninput="this.className='';steering.className=''" value="unsat"></td></tr>
  <tr><th><label for="Suspension System">Suspension System</label></th>
  <td><input type="radio" id="suspensionsystem" name="SuspensionSystem" oninput="this.className='';suspensionsystem2.className=''" value="sat"></td>
  <td><input type="radio" id="suspensionsystem2" name="SuspensionSystem" oninput="this.className='';suspensionsystem.className=''" value="unsat"></td></tr>
  <tr><th><label for="Tire Chains">Tire Chains</label></th>
  <td><input type="radio" id="tirechains" name="TireChains" oninput="this.className='';tirechains2.className=''" value="sat"></td>
  <td><input type="radio" id="tirechains2" name="TireChains" oninput="this.className='';tirechains.className=''" value="unsat"></td></tr>
  <tr><th><label for="Tires">Tires</label></th>
  <td><input type="radio" id="tires" name="Tires" oninput="this.className='';tires2.className=''" value="sat"></td>
  <td><input type="radio" id="tires2" name="Tires" oninput="this.className='';tires.className=''" value="unsat"></td></tr>
  <tr><th><label for="Transmission">Transmission</label></th>
  <td><input type="radio" id="transmission" name="Transmission" oninput="this.className='';transmission2.className=''" value="sat"></td>
  <td><input type="radio" id="transmission2" name="Transmission" oninput="this.className='';transmission.className=''" value="unsat"></td></tr>
  <tr><th><label for="Trip Recorder">Trip Recorder</label></th>
  <td><input type="radio" id="triprecorder" name="TripRecorder" oninput="this.className='';triprecorder2.className=''" value="sat"></td>
  <td><input type="radio" id="triprecorder2" name="TripRecorder" oninput="this.className='';triprecorder.className=''" value="unsat"></td></tr>
  <tr><th><label for="Wheels and Rims">Wheels and Rims</label></th>
  <td><input type="radio" id="wheelsandrims" name="WheelsandRims" oninput="this.className='';wheelsandrims2.className=''" value="sat"></td>
  <td><input type="radio" id="wheelsandrims2" name="WheelsandRims" oninput="this.className='';wheelsandrims.className=''" value="unsat"></td></tr>
  <tr><th><label for="Windows">Windows</label></th>
  <td><input type="radio" id="windows" name="Windows" oninput="this.className='';windows2.className=''" value="sat"></td>
  <td><input type="radio" id="windows2" name="Windows" oninput="this.className='';windows.className=''" value="unsat"></td></tr>
  <tr><th><label for="Windshield Wipers">Windshield Wipers</label></th>
  <td><input type="radio" id="windshieldwipers" name="WindshieldWipers" oninput="this.className='';windshieldwipers2.className=''" value="sat"></td>
  <td><input type="radio" id="windshieldwipers2" name="WindshieldWipers" oninput="this.className='';windshieldwipers.className=''" value="unsat"></td></tr>
  <tr><th><label for="Other">Other</label></th>
  <td><input type="radio" id="other" name="Other" oninput="this.className='';other2.className=''" value="sat"></td>
  <td><input type="radio" id="other2" name="Other" oninput="this.className='';other.className=''" value="unsat"></td></tr>
  </table>
  </div>
  <div class="tab tab7">
  <h3><center>* For optimal performance, view page in landscape. *</center></h3>
  Sign in the box below:
<div class="modal">
  <div class="controls-panel">
      <input type="button" class="clear-button" value="Clear"/>
      </div>
    <div class="signature-panel">
  </div>
  <img id="rendered" src="" style="display:none">
  </div>
  <input type="submit" class="Submit" value="Submit and close" onclick="renderSignature();saveImage();" disabled/>
</div> 
<br><br>
  <div style="overflow:auto;">
    <div class="previous" style="float:left;">
      <button type="button" id="prevBtn" onclick="nextPrev(-1)">&laquo; Previous</button>
      </div>
      <div class="next" style="float:right;">
      <button type="button" id="nextBtn" onclick="nextPrev(1)">Next &raquo;</button>
    </div>
  </div>
  <!-- Circles which indicates the steps of the form: -->
  <div style="text-align:center;margin-top:40px;">
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
  </div>
</form>

<script>
$('.signature-panel').jSignature();

  $('.clear-button').on('click', function(e) {
    $('.signature-panel').jSignature("reset");
  });

let date = new Date().toISOString().substr(0, 10);
document.querySelector("#date").value = date;

$(function(){     
  var d = new Date(),        
      h = d.getHours(),
      m = d.getMinutes();
  if(h < 10) h = '0' + h; 
  if(m < 10) m = '0' + m; 
  $('input[type="time"][value="now"]').each(function(){ 
    $(this).attr({'value': h + ':' + m});
  });
});

  function renderSignature(){
  $("img#rendered").attr("src",$('.signature-panel').jSignature('getData','default'));
  }

    function saveImage(e){ //This sends the image src to saveImages function
    var bytes = document.getElementById('rendered').src;
    console.log(bytes);
    var sign = {
      carrier: document.getElementsByName('carrier')[0].value,
      address: $('input[name="Address"]:checked').val(),
      dname: document.getElementsByName('drivername')[0].value,
      dnum: document.getElementsByName('drivernumber')[0].value,
      date: document.getElementsByName('date')[0].value,
      time: document.getElementsByName('time')[0].value,
      tractortruck: document.getElementsByName('tractortrucknum')[0].value,
      odom: document.getElementsByName('odometer')[0].value,
      aircompressor: $('input[name="AirCompressor"]:checked').val(),
      airlines: $('input[name="AirLines"]:checked').val(),
      BeltsandHoses: $('input[name="BeltsandHoses"]:checked').val(),
      Body: $('input[name="Body"]:checked').val(),
      BrakeAccessories: $('input[name="BrakeAccessories"]:checked').val(),
      BrakesParking: $('input[name="BrakesParking"]:checked').val(),
      BrakesService: $('input[name="BrakesService"]:checked').val(),
      Clutch: $('input[name="Clutch"]:checked').val(),
      CouplingDevices: $('input[name="CouplingDevices"]:checked').val(),
      DefrosterHeater: $('input[name="DefrosterHeater"]:checked').val(),
      DriveLine: $('input[name="DriveLine"]:checked').val(),
      Engine: $('input[name="Engine"]:checked').val(),
      Exhaust: $('input[name="Exhaust"]:checked').val(),
      FifthWheel: $('input[name="FifthWheel"]:checked').val(),
      FluidLevels: $('input[name="FluidLevels"]:checked').val(),
      FrameandAssembly: $('input[name="FrameandAssembly"]:checked').val(),
      FrontAxle: $('input[name="FrontAxle"]:checked').val(),
      FuelTanks: $('input[name="FuelTanks"]:checked').val(),
      Horn: $('input[name="Horn"]:checked').val(),
      Lights: $('input[name="Lights"]:checked').val(),
      Mirrors: $('input[name="Mirrors"]:checked').val(),
      Muffler: $('input[name="Muffler"]:checked').val(),
      OilPressure: $('input[name="OilPressure"]:checked').val(),
      Radiator: $('input[name="Radiator"]:checked').val(),
      RearEnd: $('input[name="RearEnd"]:checked').val(),
      Reflectors: $('input[name="Reflectors"]:checked').val(),
      SafetyEquipment: $('input[name="SafetyEquipment"]:checked').val(),
      Starter: $('input[name="Starter"]:checked').val(),
      Steering: $('input[name="Steering"]:checked').val(),
      SuspensionSystem: $('input[name="SuspensionSystem"]:checked').val(),
      TireChains: $('input[name="TireChains"]:checked').val(),
      Tires: $('input[name="Tires"]:checked').val(),
      Transmission: $('input[name="Transmission"]:checked').val(),
      TripRecorder: $('input[name="TripRecorder"]:checked').val(),
      WheelsandRims: $('input[name="WheelsandRims"]:checked').val(),
      Windows: $('input[name="Windows"]:checked').val(),
      WindshieldWipers: $('input[name="WindshieldWipers"]:checked').val(),
      Other: $('input[name="Other"]:checked').val(),
    };
    alert("saveImage successful");
    google.script.run.saveImage(bytes, sign);
    return
  }

var currentTab = 0; 
showTab(currentTab);

function showTab(n) {
  var x = document.getElementsByClassName("tab");
  x[n].style.height = "100%";
  x[n].style.overflow = "visible";
  if (n == 0) {
    document.getElementById("prevBtn").style.display = "none";
  } else {
    document.getElementById("prevBtn").style.display = "inline";
    document.getElementById("nextBtn").style.display = "inline";
  }
  if (n == (x.length - 1)) {
    document.getElementById("nextBtn").style.display = "none";landscapeCheck();
  } else {
    document.getElementById("nextBtn").innerHTML = "Next &raquo;";
  }
  fixStepIndicator(n)
}

function nextPrev(n) {
  var x = document.getElementsByClassName("tab");
  if (n == 1 && !validateForm()) return false;
  x[currentTab].style.height = "0";
  x[currentTab].style.overflow = "hidden";
  currentTab = currentTab + n;
  if (currentTab >= x.length) {
 return false;
  }
  showTab(currentTab);
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

function validateForm() {
  var x, y, i, q, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
  q = document.getElementsByClassName(" invalid");
  for (i = 0; i < y.length; i++) {
   if (y[i].type !== "radio" && y[i].value == "") {
      y[i].className += " invalid";
      valid = false;
    }
    else if (y[i].type == "radio") {
    var z = y[i].name;
    if ($('input[name="'+ z + '"]').is(':checked') == false) {
    y[i].className += " invalid";
    valid = false;
    }
   }  
  }
  // If the valid status is true, mark the step as finished and valid:
if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
else {
$('html, body').animate({
    scrollTop: ($('input.invalid').first().offset().top)
},500);
}
  return valid;
} 
function fixStepIndicator(n) {
  var i, x = document.getElementsByClassName("step");
  for (i = 0; i < x.length; i++) {
    x[i].className = x[i].className.replace(" active", "");
  }
  x[n].className += " active";
}

$(".signature-panel").bind(
    "change"
    , function(event){
        var d = $(event.target).jSignature("getData", "native")
        if ( d.length > 2 || ( d.length === 1 && d[0].x.length > 10 ) ){
            // $(event.target).unbind('change')
            $(".Submit").removeAttr("disabled")
        } else {
            $(".Submit").attr("disabled", true)
        }
    }
)


</script>

</body>
</html>