Я получаю сообщение об ошибке 400 при отправке формы, но данные передаются в мой Google Sheet, как и предполагалось.
Я прочитал, что может вызвать ошибку 400, но мое понимание не продвинутодостаточно, чтобы обнаружить ошибку в коде.
code.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("myFolder"); //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 imageCell = ss.getRange(ss.getLastRow()+1, 1, 1, 9).setValues([[carrier, address, dname, dnum, date, time, tractortruck, odom, url]]);
}
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>
</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" action="/action_page.php">
<div class="container">
<label for="carrier">Carrier:</label>
<select id="carrier" name="carrier" required>
<option value="My Company">My Company</option>
</select><br>
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>
<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="tractortrucknum" placeholder="Your vehicle number" required><br><br>
<label for="Odometer">Odometer Reading:</label><br>
<input type="number" id="odom" name="odometer" placeholder="Vehicle odometer reading" required><br><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();"/>
</div>
</form>
</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: $('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,
};
alert("saveImage successful");
google.script.run.saveImage(bytes, sign);
return
}
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>
В идеале, я хотел бы, чтобы форма принимала пользователяна URL при отправке. Я думаю, что смогу понять это, как только мы решим проблему 400. Если у кого-то есть совет, я бы с удовольствием его услышал.