In google sheets I created a menu to add a new employee. It opens a modalDialog using html file (NewEmployee.html) that has a form inside collecting name, starting date, radio buttons (2) and salary (per hour).
HTML Code:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function closeForm(){
google.script.host.close();};
function submitForm(){
google.script.run.getInfoFromSubmitForm(document.getElementById("employeeForm"));};
</script>
</head>
<style type="text/css">
.submit-button{
float: right;}
.cancel-button{
float: left;}
</style>
<body>
<div id="myForm">
<form id="employeeForm" class="form">
<label for="employeeName">Employee Name  </label>
<input
type="text"
id="employeeName"
name="employeeName"
employeeName="employeeName"
placeholder="This will also be the name of the Sheet"
style="width: 230px;"><br><br>
<label for="date">Please select start Date    </label>
<input type="date" id="date" name="date"><br><br>
<label for="employeeType">Please Select Employee Type</label><br>
<input type="radio" id="W2" name="employeeType" value="W2">
<label for="W2">W2</label><br>
<input type="radio" id="W9" name="employeeType" value="W9">
<label for="W9">W9</label><br><br>
<label for="salary">Please enter the Salary(per hour)  </label>
<input type="text" id="salary" name="salary" aria-required="true"><br><br>
<input type="button" class="cancel-button" value="Cancel" onclick="closeForm()">
<input type="button" class="submit-button" value="Submit Form" onclick="submitForm();">
</form>
</div>
</body>
</html>
Menu Code:
function onOpen() {
var ui = SpreadsheetApp.getUi();
ui.createMenu('Driver Menu')
.addItem('Add Employee', 'showNewEmployeeDialog')
.addToUi();`
};
function handling submission:
function showNewEmployeeDialog() {
var widget = HtmlService.createHtmlOutputFromFile("DatePicker.html");
SpreadsheetApp.getUi().showModalDialog(widget, "Enter Employee Information");
}
const getInfoFromSubmitForm = (form) => {
return form;
}
When I click on menu selection, it opens the modalDialog with all fields visible, but script finishes running. I struggle to collect the info and pass it to the function that would store it as object, and that object would be accessible by other functions in the app script (probably global object declaration, but I need it to be cleared, before it updated, so the new employee info overrides it.) I think, I'm missing proper onSubmit function and/or eventListener. Goal is to continue running the script until the form is submitted, make sure all inputs are filled and at least one radio button is clicked. Then send the object {name: value, date: value, employeeType: value (based on which radio button is clicked), and salary value. Once the form is submitted, the dialog closes and global object or function should return the object when function is called.