I am not seeing where the issue is in my code, that prevents it from returning the success message. I want to give me the message that the submission has been successful and to refresh the screen. While the data is being successfully submitted to the google sheet, I am getting the generic message that the script is completed but didn’t return anything.
var ss = SpreadsheetApp.openById('XXXXX');
var sheet = ss.getSheetByName('Messages');
var thisDocumentURL =ss.getUrl();
var ShtAdmin = "[email protected]";
function doPost(e){
// Replace with your spreadsheet's ID.
// name, phone_number and e-mail are form elements.
var area = e.parameter.area;
var assembly = e.parameter.assembly;
var pass = e.parameter.pass;
var line = e.parameter.line;
var operator = e.parameter.operator;
var shift = e.parameter.shift;
var issueDescription = e.parameter.issueDescription;
var personNotified = e.parameter.personNotified;
var actionTaken = e.parameter.actionTaken;
var personTakingAction = e.parameter.personTakingAction;
var problemCorrected = e.parameter.problemCorrected;
var approvalToContinue = e.parameter.approvalToContinue;
var issueCategory = e.parameter.issueCategory;
var id = getRandom();
var timestamp = new Date(); // current date as epoch number
sheet.appendRow(
[id,timestamp,area,assembly,pass,line,operator,shift,issueDescription,personNotified,actionTaken,personTakingAction,problemCorrected,approvalToContinue,issueCategory,message]
);
var subject = "PEP Log Update";
var header = "<p> This is an Automated mailer. All Responses are directed to " + ShtAdmin+",</p>";
var message = "<p><b>There has been an addition to the PEP log on "+ timestamp + ". </b></p>"+
"<p><b>Associated with "+assembly +" running on Line " + line + ", "+pass+" pass. </p></b>";
MailApp.sendEmail({
to: ShtAdmin,
noReply: true,
subject: subject,
htmlBody: header + message
})
onSuccess(message);
var pubUrl = ScriptApp.getService().getUrl();
} //end of doPost Function
function getSuccessMessage(message){
//Logger.log(data);
return("PEP Successfully submitted.");
}
function onSuccess(){
getSuccessMessage();
var message = "You have successfully submitted the PEP. Please refresh screen to reset form.";
return message;
}
HTML Portion
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=chrome">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/ css/add-ons1.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous" ></script>
<title>Google Apps Script Tester</title>
</head>
<body>
<form method="post" action= "<?= pubUrl ?>" >
<form id="myForm">
<label for="area">Select Area:</label>
<select name="area" id="area">
<option value="AOI">AOI</option>
<option value="SMT">SMT</option>
</select>
<br><br>
Assembly: <input type="assembly" name="assembly" value=""><br><br>
<label for="pass">Pass:</label>
<select name="pass" id="pass">
<option value="1st">1st</option>
<option value="2nd">2nd</option>
<option value="Single">Single</option>
</select><br><br>
<label for="line">Line:</label>
<select name="line" id="line">
<option value="Line 1/2">Line 1/2</option>
<option value="Line 3">Line 3</option>
<option value="Line 4">Line 4</option>
<option value="Line 7">Line 7</option>
<option value="Line 8">Line 8</option>
<option value="Line 10">Line 10</option>
</select>
<br><br>
Employee Number: <input type="operator" name="operator" value=""><br><br>
<label for="shift">Shift:</label>
<label for="problemCorrected">Issue Corrected:</label>
<select name="problemCorrected" id="problemCorrected">
<option value="Yes">Yes Continue to Run</option>
<option value="No-Escalate to Supervisor">No - Escalate to Supervisor</option>
<option value="No-Conintue to Run with Approval">No - Continue to run with Approval</option>
</select><br><br>
Approval to run w/o resolving issue: <input type="approvalToContinue" name="approvalToContinue" value=""><br><br>
<label for="issueCategory">Issue Category:</label>
<select name="issueCategory" id="issueCategory">
<option value="Material Problem">Material Problem</option>
<option value="Equipment Issue">Equipment Issue</option>
<option value="Human Error">Human Error</option>
<option value="Other">Other</option>
</select><br><br>
<br><br><br>
<p>Please Click to submit data.</p>
<button type="submit" id="mySubmit" onClick="">Send Data</button>
<p id="response_message"></p>
<script>
const scriptURL = <?= pubUrl ?>
const form = document.forms['myForm']
google.script.run.withSuccessHandler(onSuccess);
function onSuccess(message){
var div = document.getElementById('response_message');
}
return response_message;
form.addEventListener('submit', e => {
e.preventDefault()
var response_message = document.getElementById("response_message");
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => response_message.innerHTML = "Success! Refresh screen for new form")
.catch(error => response_message.innerHTML = "Error!")
}
})
</script>
</form>
</form>
</body></html>