Cannot Pass InputBox String value From HTML To Google Apps Script
Question
I created a sidebar for a Google Document that takes in user input. I'd like to use the collected data to update some fields on my document, but for now, I am just trying to display the data collected on screen via an alert to test if my code is working. Unfortunately, I am stuck and not sure what I am doing wrong.
There are two problems I am running into, but due to my limited knowledge of app script and coding as a whole, I just can't seem to resolve my issue. The problems I am having are, 1) my eventListener may not be be firing and 2) I can't seem to access the data collected from the input boxes.
Could someone assist me with this problem? I've been searching through the forum for an answer for a few days now, but again, my knowledge is very limited so it's possible I've come across the answer a few times, but just don't understand it. The code I am using is below and a link to my document is here .
App Script Code:
function onOpen() {
// Add a custom menu to the document.
var ui = DocumentApp.getUi(); // Or SpreadsheetApp or SlidesApp or FormApp.
ui.createMenu('Menu')
.addItem('Sidebar', 'showSidebar')
.addToUi();
}
function showSidebar() {
// Create HTML template from a file
var html = HtmlService.createHtmlOutputFromFile('userform')
.setTitle("TEST FORM")
.setWidth(300);
DocumentApp.getUi()
.showSidebar(html);
}
function appendData(data) {
DocumentApp.getUi().alert(data.f + ' ' + data.l);
}
HTML code
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div class="container">
<div>
<input id="firstName" type="text" name="firstName" placeholder="Enter first name">
</div>
<div>
<input id="lastName" type="text" name="lastName" placeholder="Enter last name">
</div>
<div>
<input type="button" value="SUBMIT" onClick="submitData();"/>
</div>
</div> <!-- End of container div -->
<script>
function submitData() {
var fName = document.getElementById('firstName').value;
var lName = document.getElementById('lastName').value;
var data {
f: fName,
l: lName
};
google.script.run.appendData(data);
}
</script>
</body>
</html>
1 answers
solution1
1 2019-11-22 20:52:18
Try this:
function submitData() {
var first=document.getElementById('firstname').value;
var last=document.getElementById('lastname').value;
var data={f:first,l:last};
google.script.run.appendData(data);
}
for simplicity you could also change this <button id="btn">Submit</button> to this <input type="button" value="Submit" onClick="submitData();" /> <input type="button" value="Submit" onClick="submitData();" />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.