Gyuz.
I’m attempting to develop html code that accepts inputs on the page but stores the data in a spreadsheet using an app script. Everything works great, however when I use the SELECT tag to collect input for the gender fields, the output does not appear on the spreadsheet. All other fields do, but this one does not.
To double-check the code, I inserted select tag comments.
Forms.html
<!DOCTYPE html>
<html>
<head>
<base target="_blank">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Registration</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materia
lize.min.css">
<style>
body {
color: #fff;
background: #232526;
background: -webkit-linear-gradient(to left, #414345, #232526);
background: linear-gradient(to left, #414345, #232526);
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.disclaimer {
width: 480px;
color: #646464;
margin: 20px auto;
padding: 0 16px;
text-align: center;
font: 400 12px Roboto, Helvetica, Arial, sansserif
}
.disclaimer a {
color: #009688
}
#credit {
display: none
}
</style>
</head>
<body>
<form class="main" id="form" novalidate="novalidate" style="max-width: 480px;margin: 40px auto;">
<div id="forminner">
<div class="row">
<div class="col s12">
<h5 class="center-align teal-text">Registration</h5>
<p class="disclaimer">Fill up all fields.</p>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="name" type="text" name="Name" class="validate" required="" aria-required="true"
placeholder="Enter Your Name">
<label for="name" style="display: none;">Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" name="Email" class="validate" required="" aria-required="true"
placeholder="Enter Your Email">
<label for="email" style="display: none;">Email Address</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="tel" type="tel" name="Tel" class="validate" required="" aria-required="true"
placeholder="Enter Your Mobile Number">
<label for="tel" style="display: none;">Mobile Number</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="gender" name="gender" type="text" class="validate" required="" aria-required="true"
placeholder="Enter Your Gender" maxlength="6">
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="jd" name="jd" type="text" class="validate" required="" aria-required="true"
placeholder="Enter Your Intrested Field">
</div>
</div>
<!-- Select Tag -->
<div class="row">
<div class="input-field col s12">
<select id="position" name="position" style="display: block;">
<option value="" disabled selected>Position</option>
<option value="Head">Head</option>
<option value="Assistant">Assistant</option>
<option value="Secretary">Secretary</option>
<option value="Others">Others</option>
</select>
</div>
</div>
<div class="row">
<div class="file-field input-field col s12">
<div class="btn">
<span>Resume</span>
<input id="files" type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Upload Your Resume Here">
</div>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<button class="waves-effect waves-light btn submit-btn" type="submit"
onclick="submitForm(); return false;">Submit</button>
</div>
</div>
<div class="row">
<div class="input-field col s12" id="progress">
</div>
</div>
</div>
<div id="success" style="display:none">
<h5 class="left-align teal-text" style="color: #fff;">File Uploaded</h5>
<p style="color: #fff;">Your file has been successfully uploaded.</p>
<p class="center-align"><a class="btn btn-large" onclick="restartForm()">Restart</a></p>
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materializ e.min.js"></script>
<script>
var file, reader = new FileReader();
reader.onloadend = function (e) {
if (e.target.error != null) {
showError("File " + file.name + " could not be read.");
return;
} else {
google.script.run
.withSuccessHandler(showSuccess)
.uploadFileToGoogleDrive(e.target.result, file.name, $('input#name').val(), $('input#email').val(), $('input#gender').val(), $('input#tel').val(), $('input#jd').val(), $('input#position').val());
}
};
function showSuccess(e) {
if (e === "OK") {
$('#forminner').hide(); $('#success').show();
} else {
showError(e);
}
}
function restartForm() {
$('#form').trigger("reset"); $('#forminner').show(); $('#success').hide(); $('#progress').html("");
}
function submitForm() {
var files = $('#files')[0].files;
if (files.length === 0) {
showError("Please select a file to upload");
return;
}
file = files[0];
if (file.size > 1024 * 1024 * 5) {
showError("The file size should be < 5 MB. ");
return;
}
showMessage("Uploading file ...");
reader.readAsDataURL(file);
}
function showError(e) {
$('#progress').addClass('red-text').html(e);
}
function showMessage(e) {
$('#progress').removeClass('red-text').html(e);
}
$(document).ready(function () {
$('select').material_select();
});
</script>
</body>
</html>
Code.gs
// 1. Enter sheet name where data is to be written below
var SHEET_NAME = "Sheet1";
// 2. Run > setup
//
// 3. Publish > Deploy as web app
// - enter Project Version name and click 'Save New Version'
// - set security level and enable service (most likely execute as 'me' and access 'anyone, even anonymously)
//
// 4. Copy the 'Current web app URL' and post this in your form/script action
//
// 5. Insert column names on your destination sheet matching the
//parameter names of the data you are passing in (exactly matching case)
var SCRIPT_PROP = PropertiesService.getScriptProperties(); // new
//property service
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('forms.html').setTitle("SIPP Registrations");
// return HtmlService.createHtmlOutputFromFile('forms.html').setFaviconUrl("");
}
function uploadFileToGoogleDrive(data, file, name, email, gender, tel, jd, position) {
try {
var dropbox = "Received Files";
//var folder, folders = DriveApp.getFoldersByName(dropbox);
var folder=DriveApp.getFolderById('1JkR_IgA0sQWj4mROqozAbvWpN6GrUdjP');
/*
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
*/
/* Credit: www.labnol.org/awesome */
var contentType = data.substring(5,data.indexOf(';')), bytes = Utilities.base64Decode(data.substr(data.indexOf('base64,')+7)), blob = Utilities.newBlob(bytes, contentType, file),
file = folder.createFolder([name, email].join(" ")).createFile(blob),
filelink=file.getUrl() ;
var lock = LockService.getPublicLock();
lock.waitLock(30000); // wait 30 seconds before conceding defeat.
// next set where we write the data - you could write to multiple/alternate destinations
var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("15OLJTZm-M_nTuh15TKpbymJWbXhZY6xgjCnpn0NNFJQ"));
var sheet = doc.getSheetByName(SHEET_NAME);
// we'll assume header is in row 1 but you can override with
//header_row in GET/POST data
var headRow = 1;
var headers = sheet.getRange(1, 1, 1,
sheet.getLastColumn()).getValues()[0];
var nextRow = sheet.getLastRow()+1; // get next row
var row = [];
// loop through the header columns
for (i in headers){
if (headers[i] == "Timestamp"){ // special case if you include a'Timestamp' column
row.push(new Date());
} else if (headers[i] == "name"){
row.push(name);
} else if (headers[i] == "email"){
row.push(email);
} else if (headers[i] == "gender"){
row.push(gender);
} else if (headers[i] == "tel"){
row.push(tel);
} else if (headers[i] == "jd"){
row.push(jd);
} else if (headers[i] == "filelink"){
row.push(filelink);
} else if (headers[i] == "position"){
row.push(position);
}
}
// more efficient to set values as [][] array than individually
sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
// return json success results
//return ContentService
// .createTextOutput(JSON.stringify({"result":"success", "row": nextRow}))
// .setMimeType(ContentService.MimeType.JSON);
return "OK";
} catch (f) {
return f.toString();
} finally { //release lock
lock.releaseLock();
}
}
function setup() {
var doc = SpreadsheetApp.getActiveSpreadsheet(); SCRIPT_PROP.setProperty("15OLJTZm-M_nTuh15TKpbymJWbXhZY6xgjCnpn0NNFJQ", doc.getId());
}
Here is the code I used; everything works except the slecect tag; could you kindly assist me?
