Javascript 从Web应用程序向google工作表收集数据_Javascript_Google Apps Script_Web Applications_Jsignature

Javascript 从Web应用程序向google工作表收集数据

javascript google-apps-script web-applications

Javascript 从Web应用程序向google工作表收集数据,javascript,google-apps-script,web-applications,jsignature,Javascript,Google Apps Script,Web Applications,Jsignature,我有一个带有jSignature代码的基本工作表，可以在发布时从webapp收集数据。我想在此基础上添加，因此我创建了另一张图纸，并遵循相同的布局。诚然，我只是一个复制和粘贴编码器在这个时候。我知道我正在读的很多东西，但有些东西我还没有意识到。我一辈子都搞不懂为什么第一张有效，第二张无效*我相信，工作表只适用于放入的文件夹id，所以您必须替换它以下是工作表的链接（希望所有人都能查看）：还有一个没有：如果出于任何原因这些链接不起作用，以下是代码片段：工作守则 function showD

我有一个带有jSignature代码的基本工作表，可以在发布时从webapp收集数据。我想在此基础上添加，因此我创建了另一张图纸，并遵循相同的布局。诚然，我只是一个复制和粘贴编码器在这个时候。我知道我正在读的很多东西，但有些东西我还没有意识到。我一辈子都搞不懂为什么第一张有效，第二张无效*我相信，工作表只适用于放入的文件夹id，所以您必须替换它

以下是工作表的链接（希望所有人都能查看）：

还有一个没有：

如果出于任何原因这些链接不起作用，以下是代码片段：

工作守则

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

<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/></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>
<body>
<form id="customerForm">
Please sign your name in the pad below: <br>
Full Name: <input type="text" name="username"><br>
Employee Number: <input type="employeenumber" name="useremployeenumber"><br><br>
Signature:
<div id="signature"></div><br>
<img id="rendered" src="" style="display:none">
<input type="Submit" value="Save" onclick="renderSignature();saveImage();"/>
</form>
</body>
<script>
  document.getElementById("signature").style.border = "1px solid black";

  $("#signature").jSignature({
    'background-color': 'transparent',
    'decor-color': 'transparent'
  });

  function renderSignature(){
    $("img#rendered").attr("src",$('#signature').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 = {
      username: document.getElementsByName('username')[0].value,
      useremployeenumber: document.getElementsByName('useremployeenumber')[0].value
    };
    google.script.run.saveImage(bytes, sign);
    return
  } 
  window.onload=function(){
  google.script.run
.withSuccessHandler(function(){google.script.host.close();})
.saveImage(bytes, sign);
}

</script>
</html>

非工作html

<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=2, maximum-scale=1, user-scalable=0"/></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>
body {
  font-family: Arial;
}

input[type=text], select {
  width: 100%;
  height: 100px;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 2em;
}
input[type=number], select {
  width: 100%;
  height: 100px;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 2em;
}
input[type=date], select {
  width: 100%;
  height: 100px;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 2em;
}

input[type=time], select {
  width: 100%;
  height: 100px;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 2em;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
}
input[type=radio] {
  width: 80px;
  height: 80px;
}

input[type=submit]:hover {
  background-color: #45a049;
}

#signature {
  width: 100%;
  height: 300px;
  border: 2px solid #ccc;
  border-radius: 4px;
  }
#Inspection th, #Inspection td {
  border: 2px solid #ddd;
  font-size: 30px;
  font-weight: bold;
  }
#Inspection td {
  width: 60%;
  }
#Inspection th {
  width: 20%;
  }
#customerForm {
  font-size: 2em;
  font-weight: Bold;
  }
  ::placeholder {
  font-size: 1em;
  }

</style>
<body>
<center><h1><big><big>DRIVER VEHICLE INSPECTION REPORT</big></big></h1>
<h5>AS REQUIRED BY THE D.O.T. FEDERAL MOTOR CARRIER SAFETY REGULATIONS</h5></center><br>
<form id="customerForm">
<div class="container">
  <form action="/action_page.php">
  <label for="carrier">Carrier:</label>
    <select id="carrier" name="carrier" required>
      <option value="My Company">My Company</option>   
      </select><br>
      <label for="address">Address:</label>
    <select id="address" name="address" required>
      <option value="" disabled selected>Select your location</option>
      <option value="PDX">PDX</option>
      <option value="SEA">SEA</option>
      <option value="SFO">SFO</option>
      </select><br>
      <label for="Driver name">Driver Performing Inspection:</label>
  <input type="text" id="dname" name="drivername" placeholder="Your full name" required><br>
  <label for="Driver Employee ID number">Driver's Employee Number:</label><br>
  <input type="number" id="dnum" name="drivernumber" placeholder="Your employee number" required><br><br>
  <label for="Date">Date Performed:</label><br>
  <input type="date" id="date" name="date" required><br><br>
  <label for="Time">Time Performed:</label><br>
  <input type="time" id="time" name="time" value="now" required><br><br>
  <label for="Tractor/Truck#">Tractor / Truck #:</label><br>
  <input type="number" id="tractor/truck" name="tractor/truck" placeholder="Your vehicle number" required><br><br>
  <label for="Odometer">Odometer Reading:</label><br>
  <input type="number" id="odom" name="odometer reading" placeholder="Vehicle odometer reading" required><br><br>
  <center><h3>Tractor / Truck Inspection:</h3><br></center>
  <table id= "Inspection">
  <tr>
  <td></td>
  <th>Satisfactory</th>
  <th>Unsatisfactory</th>
  </tr>
  <tr>
  <td><label for="Air Compressor">Air Compressor</label></td>
  <th><input type="radio" id="air compressor" name="air compressor" value="Sat" required></th>
  <th><input type="radio" id="air compressor" name="air compressor" value="Unsat" required></th>
  </tr>
  <tr>
  <td><label for="Air Lines">Air Lines</label></td>
  <th><input type="radio" id="air lines" name="air lines" value="Sat" required></th>
  <th><input type="radio" id="air lines" name="air lines" value="Unsat" required></th>
  </tr>
  <tr>
  <td><label for="Battery">Battery</label></td>
  <th><input type="radio" id="Battery" name="Battery" value="Sat" required></th>
  <th><input type="radio" id="Battery" name="Battery" value="Unsat" required></th>
  </tr>
  <tr>
  <td><label for="Belts and Hoses">Belts and Hoses</label></td>
  <th><input type="radio" id="Belts and Hoses" name="Belts and Hoses" value="Sat" required></th>
  <th><input type="radio" id="Belts and Hoses" name="Belts and Hoses" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Body">Body</label></td>
  <th><input type="radio" id="Body" name="Body" value="Sat"required></th>
  <th><input type="radio" id="Body" name="Body" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Brake Accessories">Brake Accessories</label></td>
  <th><input type="radio" id="Brake Accessories" name="Brake Accessories" value="Sat"required></th>
  <th><input type="radio" id="Brake Accessories" name="Brake Accessories" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Brakes, Parking">Brakes, Parking</label></td>
  <th><input type="radio" id="Brakes, Parking" name="Brakes, Parking" value="Sat"required></th>
  <th><input type="radio" id="Brakes, Parking" name="Brakes, Parking" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Brakes, Service">Brakes, Service</label></td>
  <th><input type="radio" id="Brakes, Service" name="Brakes, Service" value="Sat"required></th>
  <th><input type="radio" id="Brakes, Service" name="Brakes, Service" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Clutch">Clutch</label></td>
  <th><input type="radio" id="Clutch" name="Clutch" value="Sat"required></th>
  <th><input type="radio" id="Clutch" name="Clutch" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Coupling Devices">Coupling Devices</label></td>
  <th><input type="radio" id="Coupling Devices" name="Coupling Devices" value="Sat"required></th>
  <th><input type="radio" id="Coupling Devices" name="Coupling Devices" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Defroster/Heater">Defroster/Heater</label></td>
  <th><input type="radio" id="Defroster/Heater" name="Defroster/Heater" value="Sat"required></th>
  <th><input type="radio" id="Defroster/Heater" name="Defroster/Heater" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Drive Line">Drive Line</label></td>
  <th><input type="radio" id="Drive Line" name="Drive Line" value="Sat"required></th>
  <th><input type="radio" id="Drive Line" name="Drive Line" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Engine">Engine</label></td>
  <th><input type="radio" id="Engine" name="Engine" value="Sat"required></th>
  <th><input type="radio" id="Engine" name="Engine" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Exhaust">Exhaust</label></td>
  <th><input type="radio" id="Exhaust" name="Exhaust" value="Sat"required></th>
  <th><input type="radio" id="Exhaust" name="Exhaust" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Fifth Wheel">Fifth Wheel</label></td>
  <th><input type="radio" id="Fifth Wheel" name="Fifth Wheel" value="Sat"required></th>
  <th><input type="radio" id="Fifth Wheel" name="Fifth Wheel" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Fluid Levels">Fluid Levels</label></td>
  <th><input type="radio" id="Fluid Levels" name="Fluid Levels" value="Sat"required></th>
  <th><input type="radio" id="Fluid Levels" name="Fluid Levels" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Frame and Assembly">Frame and Assembly</label></td>
  <th><input type="radio" id="Frame and Assembly" name="Frame and Assembly" value="Sat"required></th>
  <th><input type="radio" id="Frame and Assembly" name="Frame and Assembly" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Front Axle">Front Axle</label></td>
  <th><input type="radio" id="Front Axle" name="Front Axle" value="Sat"required></th>
  <th><input type="radio" id="Front Axle" name="Front Axle" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Fuel Tanks">Fuel Tanks</label></td>
  <th><input type="radio" id="Fuel Tanks" name="Fuel Tanks" value="Sat"required></th>
  <th><input type="radio" id="Fuel Tanks" name="Fuel Tanks" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Horn">Horn</label></td>
  <th><input type="radio" id="Horn" name="Horn" value="Sat"required></th>
  <th><input type="radio" id="Horn" name="Horn" value="Unsat"required></th>
  </tr>
  <tr>
  <td><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></td>
  <th><input type="radio" id="Lights" name="Lights" value="Sat"required></th>
  <th><input type="radio" id="Lights" name="Lights" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Mirrors">Mirrors</label></td>
  <th><input type="radio" id="Mirrors" name="Mirrors" value="Sat"required></th>
  <th><input type="radio" id="Mirrors" name="Mirrors" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Muffler">Muffler</label></td>
  <th><input type="radio" id="Muffler" name="Muffler" value="Sat"required></th>
  <th><input type="radio" id="Muffler" name="Muffler" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Oil Pressure">Oil Pressure</label></td>
  <th><input type="radio" id="Oil Pressure" name="Oil Pressure" value="Sat"required></th>
  <th><input type="radio" id="Oil Pressure" name="Oil Pressure" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Radiator">Radiator</label></td>
  <th><input type="radio" id="Radiator" name="Radiator" value="Sat"required></th>
  <th><input type="radio" id="Radiator" name="Radiator" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Rear End">Rear End</label></td>
  <th><input type="radio" id="Rear End" name="Rear End" value="Sat"required></th>
  <th><input type="radio" id="Rear End" name="Rear End" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Reflectors">Reflectors</label></td>
  <th><input type="radio" id="Reflectors" name="Reflectors" value="Sat"required></th>
  <th><input type="radio" id="Reflectors" name="Reflectors" value="Unsat"required></th>
  </tr>
  <tr>
  <td><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></td>
  <th><input type="radio" id="Safety Equipment" name="Safety Equipment" value="Sat"required></th>
  <th><input type="radio" id="Safety Equipment" name="Safety Equipment" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Starter">Starter</label></td>
  <th><input type="radio" name="Starter" value="Sat"required></th>
  <th><input type="radio" name="Starter" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Steering">Steering</label></td>
  <th><input type="radio" id="Steering" name="Steering" value="Sat"required></th>
  <th><input type="radio" id="Steering" name="Steering" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Suspension System">Suspension System</label></td>
  <th><input type="radio" id="Suspension System" name="Suspension System" value="Sat"required></th>
  <th><input type="radio" id="Suspension System" name="Suspension System" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Tire Chains">Tire Chains</label></td>
  <th><input type="radio" id="Tire Chains" name="Tire Chains" value="Sat"required></th>
  <th><input type="radio" id="Tire Chains" name="Tire Chains" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Tires">Tires</label></td>
  <th><input type="radio" id="Tires" name="Tires" value="Sat"required></th>
  <th><input type="radio" id="Tires" name="Tires" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Transmission">Transmission</label></td>
  <th><input type="radio" id="Transmission" name="Transmission" value="Sat"required></th>
  <th><input type="radio" id="Transmission" name="Transmission" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Trip Recorder">Trip Recorder</label></td>
  <th><input type="radio" id="Trip Recorder" name="Trip Recorder" value="Sat"required></th>
  <th><input type="radio" id="Trip Recorder" name="Trip Recorder" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Wheels and Rims">Wheels and Rims</label></td>
  <th><input type="radio" id="Wheels and Rims" name="Wheels and Rims" value="Sat"required></th>
  <th><input type="radio" id="Wheels and Rims" name="Wheels and Rims" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Windows">Windows</label></td>
  <th><input type="radio" id="Windows" name="Windows" value="Sat"required></th>
  <th><input type="radio" id="Windows" name="Windows" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Windshield Wipers">Windshield Wipers</label></td>
  <th><input type="radio" id="Windshield Wipers" name="Windshield Wipers" value="Sat"required></th>
  <th><input type="radio" id="Windshield Wipers" name="Windshield Wipers" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Other">Other</label></td>
  <th><input type="radio" id="Other" name="Other" value="Sat"required></th>
  <th><input type="radio" id="Other" name="Other" value="Unsat"required></th>
  </tr>
  </table><br>
<b><big>Signature:</big></b>
<div id="signature"></div><br>
<img id="rendered" src="" style="display:none">
<input type="submit" value="Submit and close" onclick="renderSignature();saveImage();"/>
</form>
</div>
</body>
<script>

  $("#signature").jSignature({
    'background-color': 'transparent',
    'decor-color': 'transparent',
  });

  function renderSignature(){
    $("img#rendered").attr("src",$('#signature').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: document.getElementsByName('address')[0].value,
      dname: document.getElementsByName('dname')[0].value,
      dnum: document.getElementsByName('dnum')[0].value,
      date: document.getElementsByName('date')[0].value,
      time: document.getElementsByName('time')[0].value,
      tractortruck: document.getElementsByName('tractor/truck')[0].value,
      odom: document.getElementsByName('odom')[0].value,
      aircompressor: document.getElementsByName('air compressor')[0].value,
      airlines: document.getElementsByName('air lines')[0].value,
      BeltsandHoses: document.getElementsByName('Belts and Hoses')[0].value,
      Body: document.getElementsByName('Body')[0].value,
      BrakeAccessories: document.getElementsByName('Brake Accessories')[0].value,
      BeltsandHoses: document.getElementsByName('Belts and Hoses')[0].value,
      BrakesParking: document.getElementsByName('Brakes, Parking')[0].value,
      BrakesService: document.getElementsByName('Brakes, Service')[0].value,
      Clutch: document.getElementsByName('Clutch')[0].value,
      CouplingDevices: document.getElementsByName('Coupling Devices')[0].value,
      DefrosterHeater: document.getElementsByName('Defroster/Heater')[0].value,
      DriveLine: document.getElementsByName('Drive Line')[0].value,
      Engine: document.getElementsByName('Engine')[0].value,
      Exhaust: document.getElementsByName('Exhaust')[0].value,
      FifthWheel: document.getElementsByName('Fifth Wheel')[0].value,
      FluidLevels: document.getElementsByName('Fluid Levels')[0].value,
      FrameandAssembly: document.getElementsByName('Frame and Assembly')[0].value,
      FrontAxle: document.getElementsByName('Front Axle')[0].value,
      FuelTanks: document.getElementsByName('Fuel Tanks')[0].value,
      Horn: document.getElementsByName('Horn')[0].value,
      Lights: document.getElementsByName('Lights')[0].value,
      Mirrors: document.getElementsByName('Mirrors')[0].value,
      Muffler: document.getElementsByName('Muffler')[0].value,
      OilPressure: document.getElementsByName('Oil Pressure')[0].value,
      Radiator: document.getElementsByName('Radiator')[0].value,
      RearEnd: document.getElementsByName('Rear End')[0].value,
      Reflectors: document.getElementsByName('Reflectors')[0].value,
      SafetyEquipment: document.getElementsByName('Safety Equipment')[0].value,
      Starter: document.getElementsByName('Starter')[0].value,
      Steering: document.getElementsByName('Steering')[0].value,
      SuspensionSystem: document.getElementsByName('Suspension System')[0].value,
      TireChains: document.getElementsByName('Tire Chains')[0].value,
      Tires: document.getElementsByName('Tires')[0].value,
      Transmission: document.getElementsByName('Transmission')[0].value,
      TripRecorder: document.getElementsByName('Trip Recorder')[0].value,
      WheelsandRims: document.getElementsByName('Wheels and Rims')[0].value,
      Windows: document.getElementsByName('Windows')[0].value,
      WindshieldWipers: document.getElementsByName('Windshield Wipers')[0].value,
      Other: document.getElementsByName('Other')[0].value
    };
    google.script.run.saveImage(bytes, sign);
    return
  }
  window.onload=function(){
  google.script.run
.withSuccessHandler(function(){google.script.host.close();})
.saveImage(bytes, sign);
}
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});
  });
});
</script>
</html>


身体{
字体系列：Arial；
}
输入[类型=文本]，选择{
宽度：100%；
高度：100px；
填充：12px 20px；
利润率：8px0；
显示：块；
边框：1px实心#ccc；
边界半径：4px；
框大小：边框框；
字号：2em；
}
输入[类型=编号]，选择{
宽度：100%；
高度：100px；
填充：12px 20px；
利润率：8px0；
显示：块；
边框：1px实心#ccc；
边界半径：4px；
框大小：边框框；
字号：2em；
}
输入[类型=日期]，选择{
宽度：100%；
高度：100px；
填充：12px 20px；
利润率：8px0；
显示：块；
边框：1px实心#ccc；
边界半径：4px；
框大小：边框框；
字号：2em；
}
输入[类型=时间]，选择{
宽度：100%；
高度：100px；
填充：12px 20px；
利润率：8px0；
显示：块；
边框：1px实心#ccc；
边界半径：4px；
框大小：边框框；
字号：2em；
}
输入[类型=提交]{
宽度：100%；
背景色：#4CAF50；
颜色：白色；
填充：14px 20px；
利润率：8px0；
边界：无；
边界半径：4px；
光标：指针；
字号：1em；
}
输入[类型=收音机]{
宽度：80px；
高度：80px；
}
输入[类型=提交]：悬停{
背景色：#45a049；
}
#签名{
宽度：100%；
高度：300px；
边框：2个实心#ccc；
边界半径：4px；
}
#检验th，#检验td{
边框：2px实心#ddd；
字体大小：30px；
字体大小：粗体；
}
#检查td{
宽度：60%；
}
#检验{
宽度：20%；
}
#顾客表演{
字号：2em；
字体大小：粗体；
}
：：占位符{
字号：1em；
}
司机车辆检查报告
根据D.O.T.联邦汽车承运人安全条例的要求

承运人：
我的公司


地址:
选择您的位置
PDX
大海
SFO


执行检查的驾驶员：


司机员工编号：




执行日期：




执行时间：




拖拉机/卡车：




里程表读数：




拖拉机/卡车检查：

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


签名：


$（“#签名”）.j签名({
“背景色”：“透明”，
“装饰颜色”：“透明”，
});
函数renderSignature（）{
$（“img#rendered”）.attr（“src”，$（“#signature”）.jSignature（'getData'，'default'））；
}
函数saveImage（e）{//这会将图像src发送到saveImages函数
var bytes=document.getElementById（'rendered'）.src；
console.log（字节）；
变量符号={
承运商：document.getElementsByName（'carrier'）[0]。值，
地址：document.getElementsByName（'address'）[0]。值，
dname:document.getElementsByName（'dname'）[0]。值，
dnum:document.getElementsByName（'dnum'）[0]。值，
日期：document.getElementsByName（'date'）[0]。值，
时间：document.getElementsByName（'time'）[0]。值，
拖拉机卡车：document.getElementsByName（“拖拉机/卡车”）[0]。值，
odom:document.getElementsByName（'odom'）[0]。值，
空气压缩机：document.getElementsByName（'air compressor'）[0]。值，
airlines:document.getElementsByName（'airlines'）[0]。值，
安全带和软管：document.getElementsByName（“安全带和软管”）[0]。值，
正文：document.getElementsByName（'Body'）[0]。值，
制动器附件：document.getElementsByName（'Brake Accessories'）[0]。值，
安全带和软管：document.getElementsByName（“安全带和软管”）[0]。值，
BrakesParking:document.getElementsByName（'Brakes，Parking'）[0]。值，
BrakeService:document.getElementsByName（'Brakes，Service'）[0]。值，
离合器：document.getElementsByName（'离合器'）[0]。值，
耦合设备：document.getElementsByName（“耦合设备”）[0]。值，
除霜器加热器：document.getElementsByName（'除霜器/加热器'）[0]。值，
传动系：document.getElementsByName（'Drive Line'）[0]。值，
引擎：document.getElementsByName（'Engine'
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=2, maximum-scale=1, user-scalable=0"/></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>
body {
  font-family: Arial;
}

input[type=text], select {
  width: 100%;
  height: 100px;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 2em;
}
input[type=number], select {
  width: 100%;
  height: 100px;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 2em;
}
input[type=date], select {
  width: 100%;
  height: 100px;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 2em;
}

input[type=time], select {
  width: 100%;
  height: 100px;
  padding: 12px 20px;
  margin: 8px 0;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 2em;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
}
input[type=radio] {
  width: 80px;
  height: 80px;
}

input[type=submit]:hover {
  background-color: #45a049;
}

#signature {
  width: 100%;
  height: 300px;
  border: 2px solid #ccc;
  border-radius: 4px;
  }
#Inspection th, #Inspection td {
  border: 2px solid #ddd;
  font-size: 30px;
  font-weight: bold;
  }
#Inspection td {
  width: 60%;
  }
#Inspection th {
  width: 20%;
  }
#customerForm {
  font-size: 2em;
  font-weight: Bold;
  }
  ::placeholder {
  font-size: 1em;
  }

</style>
<body>
<center><h1><big><big>DRIVER VEHICLE INSPECTION REPORT</big></big></h1>
<h5>AS REQUIRED BY THE D.O.T. FEDERAL MOTOR CARRIER SAFETY REGULATIONS</h5></center><br>
<form id="customerForm">
<div class="container">
  <form action="/action_page.php">
  <label for="carrier">Carrier:</label>
    <select id="carrier" name="carrier" required>
      <option value="My Company">My Company</option>   
      </select><br>
      <label for="address">Address:</label>
    <select id="address" name="address" required>
      <option value="" disabled selected>Select your location</option>
      <option value="PDX">PDX</option>
      <option value="SEA">SEA</option>
      <option value="SFO">SFO</option>
      </select><br>
      <label for="Driver name">Driver Performing Inspection:</label>
  <input type="text" id="dname" name="drivername" placeholder="Your full name" required><br>
  <label for="Driver Employee ID number">Driver's Employee Number:</label><br>
  <input type="number" id="dnum" name="drivernumber" placeholder="Your employee number" required><br><br>
  <label for="Date">Date Performed:</label><br>
  <input type="date" id="date" name="date" required><br><br>
  <label for="Time">Time Performed:</label><br>
  <input type="time" id="time" name="time" value="now" required><br><br>
  <label for="Tractor/Truck#">Tractor / Truck #:</label><br>
  <input type="number" id="tractor/truck" name="tractor/truck" placeholder="Your vehicle number" required><br><br>
  <label for="Odometer">Odometer Reading:</label><br>
  <input type="number" id="odom" name="odometer reading" placeholder="Vehicle odometer reading" required><br><br>
  <center><h3>Tractor / Truck Inspection:</h3><br></center>
  <table id= "Inspection">
  <tr>
  <td></td>
  <th>Satisfactory</th>
  <th>Unsatisfactory</th>
  </tr>
  <tr>
  <td><label for="Air Compressor">Air Compressor</label></td>
  <th><input type="radio" id="air compressor" name="air compressor" value="Sat" required></th>
  <th><input type="radio" id="air compressor" name="air compressor" value="Unsat" required></th>
  </tr>
  <tr>
  <td><label for="Air Lines">Air Lines</label></td>
  <th><input type="radio" id="air lines" name="air lines" value="Sat" required></th>
  <th><input type="radio" id="air lines" name="air lines" value="Unsat" required></th>
  </tr>
  <tr>
  <td><label for="Battery">Battery</label></td>
  <th><input type="radio" id="Battery" name="Battery" value="Sat" required></th>
  <th><input type="radio" id="Battery" name="Battery" value="Unsat" required></th>
  </tr>
  <tr>
  <td><label for="Belts and Hoses">Belts and Hoses</label></td>
  <th><input type="radio" id="Belts and Hoses" name="Belts and Hoses" value="Sat" required></th>
  <th><input type="radio" id="Belts and Hoses" name="Belts and Hoses" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Body">Body</label></td>
  <th><input type="radio" id="Body" name="Body" value="Sat"required></th>
  <th><input type="radio" id="Body" name="Body" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Brake Accessories">Brake Accessories</label></td>
  <th><input type="radio" id="Brake Accessories" name="Brake Accessories" value="Sat"required></th>
  <th><input type="radio" id="Brake Accessories" name="Brake Accessories" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Brakes, Parking">Brakes, Parking</label></td>
  <th><input type="radio" id="Brakes, Parking" name="Brakes, Parking" value="Sat"required></th>
  <th><input type="radio" id="Brakes, Parking" name="Brakes, Parking" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Brakes, Service">Brakes, Service</label></td>
  <th><input type="radio" id="Brakes, Service" name="Brakes, Service" value="Sat"required></th>
  <th><input type="radio" id="Brakes, Service" name="Brakes, Service" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Clutch">Clutch</label></td>
  <th><input type="radio" id="Clutch" name="Clutch" value="Sat"required></th>
  <th><input type="radio" id="Clutch" name="Clutch" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Coupling Devices">Coupling Devices</label></td>
  <th><input type="radio" id="Coupling Devices" name="Coupling Devices" value="Sat"required></th>
  <th><input type="radio" id="Coupling Devices" name="Coupling Devices" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Defroster/Heater">Defroster/Heater</label></td>
  <th><input type="radio" id="Defroster/Heater" name="Defroster/Heater" value="Sat"required></th>
  <th><input type="radio" id="Defroster/Heater" name="Defroster/Heater" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Drive Line">Drive Line</label></td>
  <th><input type="radio" id="Drive Line" name="Drive Line" value="Sat"required></th>
  <th><input type="radio" id="Drive Line" name="Drive Line" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Engine">Engine</label></td>
  <th><input type="radio" id="Engine" name="Engine" value="Sat"required></th>
  <th><input type="radio" id="Engine" name="Engine" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Exhaust">Exhaust</label></td>
  <th><input type="radio" id="Exhaust" name="Exhaust" value="Sat"required></th>
  <th><input type="radio" id="Exhaust" name="Exhaust" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Fifth Wheel">Fifth Wheel</label></td>
  <th><input type="radio" id="Fifth Wheel" name="Fifth Wheel" value="Sat"required></th>
  <th><input type="radio" id="Fifth Wheel" name="Fifth Wheel" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Fluid Levels">Fluid Levels</label></td>
  <th><input type="radio" id="Fluid Levels" name="Fluid Levels" value="Sat"required></th>
  <th><input type="radio" id="Fluid Levels" name="Fluid Levels" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Frame and Assembly">Frame and Assembly</label></td>
  <th><input type="radio" id="Frame and Assembly" name="Frame and Assembly" value="Sat"required></th>
  <th><input type="radio" id="Frame and Assembly" name="Frame and Assembly" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Front Axle">Front Axle</label></td>
  <th><input type="radio" id="Front Axle" name="Front Axle" value="Sat"required></th>
  <th><input type="radio" id="Front Axle" name="Front Axle" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Fuel Tanks">Fuel Tanks</label></td>
  <th><input type="radio" id="Fuel Tanks" name="Fuel Tanks" value="Sat"required></th>
  <th><input type="radio" id="Fuel Tanks" name="Fuel Tanks" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Horn">Horn</label></td>
  <th><input type="radio" id="Horn" name="Horn" value="Sat"required></th>
  <th><input type="radio" id="Horn" name="Horn" value="Unsat"required></th>
  </tr>
  <tr>
  <td><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></td>
  <th><input type="radio" id="Lights" name="Lights" value="Sat"required></th>
  <th><input type="radio" id="Lights" name="Lights" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Mirrors">Mirrors</label></td>
  <th><input type="radio" id="Mirrors" name="Mirrors" value="Sat"required></th>
  <th><input type="radio" id="Mirrors" name="Mirrors" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Muffler">Muffler</label></td>
  <th><input type="radio" id="Muffler" name="Muffler" value="Sat"required></th>
  <th><input type="radio" id="Muffler" name="Muffler" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Oil Pressure">Oil Pressure</label></td>
  <th><input type="radio" id="Oil Pressure" name="Oil Pressure" value="Sat"required></th>
  <th><input type="radio" id="Oil Pressure" name="Oil Pressure" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Radiator">Radiator</label></td>
  <th><input type="radio" id="Radiator" name="Radiator" value="Sat"required></th>
  <th><input type="radio" id="Radiator" name="Radiator" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Rear End">Rear End</label></td>
  <th><input type="radio" id="Rear End" name="Rear End" value="Sat"required></th>
  <th><input type="radio" id="Rear End" name="Rear End" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Reflectors">Reflectors</label></td>
  <th><input type="radio" id="Reflectors" name="Reflectors" value="Sat"required></th>
  <th><input type="radio" id="Reflectors" name="Reflectors" value="Unsat"required></th>
  </tr>
  <tr>
  <td><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></td>
  <th><input type="radio" id="Safety Equipment" name="Safety Equipment" value="Sat"required></th>
  <th><input type="radio" id="Safety Equipment" name="Safety Equipment" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Starter">Starter</label></td>
  <th><input type="radio" name="Starter" value="Sat"required></th>
  <th><input type="radio" name="Starter" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Steering">Steering</label></td>
  <th><input type="radio" id="Steering" name="Steering" value="Sat"required></th>
  <th><input type="radio" id="Steering" name="Steering" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Suspension System">Suspension System</label></td>
  <th><input type="radio" id="Suspension System" name="Suspension System" value="Sat"required></th>
  <th><input type="radio" id="Suspension System" name="Suspension System" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Tire Chains">Tire Chains</label></td>
  <th><input type="radio" id="Tire Chains" name="Tire Chains" value="Sat"required></th>
  <th><input type="radio" id="Tire Chains" name="Tire Chains" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Tires">Tires</label></td>
  <th><input type="radio" id="Tires" name="Tires" value="Sat"required></th>
  <th><input type="radio" id="Tires" name="Tires" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Transmission">Transmission</label></td>
  <th><input type="radio" id="Transmission" name="Transmission" value="Sat"required></th>
  <th><input type="radio" id="Transmission" name="Transmission" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Trip Recorder">Trip Recorder</label></td>
  <th><input type="radio" id="Trip Recorder" name="Trip Recorder" value="Sat"required></th>
  <th><input type="radio" id="Trip Recorder" name="Trip Recorder" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Wheels and Rims">Wheels and Rims</label></td>
  <th><input type="radio" id="Wheels and Rims" name="Wheels and Rims" value="Sat"required></th>
  <th><input type="radio" id="Wheels and Rims" name="Wheels and Rims" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Windows">Windows</label></td>
  <th><input type="radio" id="Windows" name="Windows" value="Sat"required></th>
  <th><input type="radio" id="Windows" name="Windows" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Windshield Wipers">Windshield Wipers</label></td>
  <th><input type="radio" id="Windshield Wipers" name="Windshield Wipers" value="Sat"required></th>
  <th><input type="radio" id="Windshield Wipers" name="Windshield Wipers" value="Unsat"required></th>
  </tr>
  <tr>
  <td><label for="Other">Other</label></td>
  <th><input type="radio" id="Other" name="Other" value="Sat"required></th>
  <th><input type="radio" id="Other" name="Other" value="Unsat"required></th>
  </tr>
  </table><br>
<b><big>Signature:</big></b>
<div id="signature"></div><br>
<img id="rendered" src="" style="display:none">
<input type="submit" value="Submit and close" onclick="renderSignature();saveImage();"/>
</form>
</div>
</body>
<script>

  $("#signature").jSignature({
    'background-color': 'transparent',
    'decor-color': 'transparent',
  });

  function renderSignature(){
    $("img#rendered").attr("src",$('#signature').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: document.getElementsByName('address')[0].value,
      dname: document.getElementsByName('dname')[0].value,
      dnum: document.getElementsByName('dnum')[0].value,
      date: document.getElementsByName('date')[0].value,
      time: document.getElementsByName('time')[0].value,
      tractortruck: document.getElementsByName('tractor/truck')[0].value,
      odom: document.getElementsByName('odom')[0].value,
      aircompressor: document.getElementsByName('air compressor')[0].value,
      airlines: document.getElementsByName('air lines')[0].value,
      BeltsandHoses: document.getElementsByName('Belts and Hoses')[0].value,
      Body: document.getElementsByName('Body')[0].value,
      BrakeAccessories: document.getElementsByName('Brake Accessories')[0].value,
      BeltsandHoses: document.getElementsByName('Belts and Hoses')[0].value,
      BrakesParking: document.getElementsByName('Brakes, Parking')[0].value,
      BrakesService: document.getElementsByName('Brakes, Service')[0].value,
      Clutch: document.getElementsByName('Clutch')[0].value,
      CouplingDevices: document.getElementsByName('Coupling Devices')[0].value,
      DefrosterHeater: document.getElementsByName('Defroster/Heater')[0].value,
      DriveLine: document.getElementsByName('Drive Line')[0].value,
      Engine: document.getElementsByName('Engine')[0].value,
      Exhaust: document.getElementsByName('Exhaust')[0].value,
      FifthWheel: document.getElementsByName('Fifth Wheel')[0].value,
      FluidLevels: document.getElementsByName('Fluid Levels')[0].value,
      FrameandAssembly: document.getElementsByName('Frame and Assembly')[0].value,
      FrontAxle: document.getElementsByName('Front Axle')[0].value,
      FuelTanks: document.getElementsByName('Fuel Tanks')[0].value,
      Horn: document.getElementsByName('Horn')[0].value,
      Lights: document.getElementsByName('Lights')[0].value,
      Mirrors: document.getElementsByName('Mirrors')[0].value,
      Muffler: document.getElementsByName('Muffler')[0].value,
      OilPressure: document.getElementsByName('Oil Pressure')[0].value,
      Radiator: document.getElementsByName('Radiator')[0].value,
      RearEnd: document.getElementsByName('Rear End')[0].value,
      Reflectors: document.getElementsByName('Reflectors')[0].value,
      SafetyEquipment: document.getElementsByName('Safety Equipment')[0].value,
      Starter: document.getElementsByName('Starter')[0].value,
      Steering: document.getElementsByName('Steering')[0].value,
      SuspensionSystem: document.getElementsByName('Suspension System')[0].value,
      TireChains: document.getElementsByName('Tire Chains')[0].value,
      Tires: document.getElementsByName('Tires')[0].value,
      Transmission: document.getElementsByName('Transmission')[0].value,
      TripRecorder: document.getElementsByName('Trip Recorder')[0].value,
      WheelsandRims: document.getElementsByName('Wheels and Rims')[0].value,
      Windows: document.getElementsByName('Windows')[0].value,
      WindshieldWipers: document.getElementsByName('Windshield Wipers')[0].value,
      Other: document.getElementsByName('Other')[0].value
    };
    google.script.run.saveImage(bytes, sign);
    return
  }
  window.onload=function(){
  google.script.run
.withSuccessHandler(function(){google.script.host.close();})
.saveImage(bytes, sign);
}
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});
  });
});
</script>
</html>

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

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

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