Simple contact web form. I cannot figure out why it does not work as intended.
On open sets up a menu, allows me to select a modal, non-modal or sidebar for form input.
I fill out the form and click submit.
It does not append data to my sheet. The form wipes it self clean (like blank - no fields). All I can to is close and reopen the form.
Here is the Apps Script
function showForm() {
// Add Custom 'CWAS Menu'
var ui = SpreadsheetApp.getUi();
ui.createMenu('CWAS Menu')
.addItem('Sidebar Form', 'showInSideBarForm')
.addItem('Modal Dialog Form', 'showInModalDialogForm')
.addItem('Modeless Dialog Form', 'showInModelessDialog')
.addToUi();
}
function showInSideBarForm() {
var userForm = HtmlService.createTemplateFromFile('form').evaluate().setTitle('New Passenger Details');
SpreadsheetApp.getUi().showSidebar(userForm);
}
function showInModalDialogForm() {
var userForm = HtmlService.createTemplateFromFile('form').evaluate().setTitle('New Passenger Details');
SpreadsheetApp.getUi().showModalDialog(userForm, 'New Passenger Details');
}
function showInModelessDialog() {
var userForm = HtmlService.createTemplateFromFile('form').evaluate().setTitle('New Passenger Details');
SpreadsheetApp.getUi().showModelessDialog(userForm, 'New Passenger Details');
}
function appendData(data) {
var ws = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Passenger Data');
ws.appendRow([data.firstName, data.lastName, data.email, data.phone]);
}
Here is the HTML
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class='container'>
<form class="col s12">
<!---- First Name ---->
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<input id="firstNameInput" type="text" class="validate" required>
<label for="firstNameInput">First Name</label>
</div>
<!---- Last Name ---->
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<input id="lastNameInput" type="tel" class="validate" required>
<label for="lastNameInput">Last Name</label>
</div>
<!---- Email ---->
<div class="input-field col s12">
<i class="material-icons prefix">email</i>
<input id="emailInput" type="email" class="validate" required>
<label for="emailInput">Email</label>
</div>
<!---- Telephone ---->
<div class="input-field col s12">
<i class="material-icons prefix">phone</i>
<input id="phoneInput" type="tel" class="validate" pattern='[0-9]{10}' required>
<label for="phoneInput">Telephone</label>
<span class="helper-text" data-error='Please enter a 10 digit phone number' data-success=''></span>
</div>
<!---- Submit Button ---->
<div class="input-field col s12">
<button class="btn waves-effect waves-light" id='submitButton'>Submit
<i class="material-icons right">send</i>
</button>
</div> <!--end submit button-->
</form>
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
console.log(firstName);
function addRecord(){
var firstName = document.getElementById('firstNameInput');
var lastName = document.getElementById('lastNameInput');
var email = document.getElementById('emailInput');
var phone = document.getElementById('phoneInput');
var data = {
firstName: firstName.value,
lastName: lastName.value,
email: email.value,
phone: phone.value
};
google.script.run.appendData(data);
//clear form
firstNameInput.value='';
lastNameInput.value='';
emailInput.value='';
phoneInput.value='';
}//End of addRecord Function
document.getElementById('submitButton').addEventListener('click', addRecord);
</script>
</body>
</html>
Comments
Post a Comment