I want to set the values of 2 variables in a gs code to be the text value in 2 text areas on the HTML file.
sidebar.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<input type="button" value="go go go!" onclick="google.script.run.mainFunction();"/>
<strong>Text Area 1</strong>
<textarea id="textarea1" rows="2" cols="35">Text1</textarea>
<strong>Text Area 2</strong>
<textarea id="textarea2" rows="3" cols="35">Text2</textarea>
</body>
</html>
code.gs:
mainFunction() {
var textArea1Value = ???; // should be "Text1"/user's input
var textArea2Value = ???; // should be "Text2"/user's input
// some code
}
How do I achieve this? (what should I write instead of the "???" in the gs code?)
I've tried searching for a solution, but wasn't sure how to implement what I've found as the answers were too specific
Thanks
You need to pass the values as paramaters from the clientside to serverside
For this, obtain the textareas by id within a Javascript code part and pass their values to google.script.run
Sample modification o your code:
sidebar.html:
<input type="button" value="go go go!" onclick="myJSFunction()"/>
<strong>Text Area 1</strong>
<textarea id="textarea1" rows="2" cols="35">Text1</textarea>
<strong>Text Area 2</strong>
<textarea id="textarea2" rows="3" cols="35">Text2</textarea>
<script>
function myJSFunction(){
var text1 = document.getElementById("textarea1").value;
var text2 = document.getElementById("textarea2").value;
google.script.run.mainFunction(text1, text2);
}
</script>
code.gs:
function mainFunction(text1, text2) {
var textArea1Value = text1;
var textArea2Value = text2;
// some code
}
Related
I have a code like this:
<!DOCTYPE html>
<html>
<head>
<script>
function replace(){
var text = document.getElementById("textarea").value;
var a = text.replace("a", "11");
var b = text.replace("b", "12");
var c = text.replace("c", "13");
document.getElementById("textarea").value = abc;
}
</script>
</head>
<body>
<textarea rows="4" cols="50" id="textarea"></textarea>
<button id="button" onclick="replace();">replace</button>
</body>
</html>
I'd like to replace letters with numbers, but I don't know how can I repair this script - only first "var" works or it doesn't work at all.
I think the problem is here:
document.getElementById("textarea").value = abc;
Thank you.
This is a correct way, you need to
<!DOCTYPE html>
<html>
<head>
<script>
function replace(){
var text = document.getElementById("textarea").value;
text = text.replace("a", "11");
text = text.replace("b", "12");
text = text.replace("c", "13");
document.getElementById("textarea").value = text;
}
</script>
</head>
<body>
<textarea rows="4" cols="50" id="textarea"></textarea>
<button id="button" onclick="replace();">replace</button>
</body>
</html>
replace does not change the text
"concatenation" abc didn't make too much sense, but you rather wanted to apply in a sequence 3 transformations
and here is (for a historical reasons :) ) an external playground for you: https://jsfiddle.net/mPrinC/ds9482zn/3/
I am trying to validate user input against field on spreadsheet. Not sure if I am using withFailureHandler correctly. I have an output field defined in the form and this would show 'duplicate entry' if the entry is already present on the spreadsheet. I tried the following code for just testing to see if the form will display any output and this does not seem to be working.
code.gs
function sendItem() {
var form = HtmlService.createHtmlOutputFromFile('test');
SpreadsheetApp.getUi().showSidebar(form);
}
function getTest(sometext) {
return false;
}
test.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div>
<input type="text" id="amount" name="amount" placeholder="serving in gms"><br>
<button class="myStyle" onclick="sendTest()">🫒</button>
</div>
<div id="output" placeholder=" any errors will appear here"></div>
</body>
</html>
<script>
function sendTest(){
var amount = document.getElementById("amount").value;
google.script.run.getTest(amount)
.withFailureHandler(onFailTest);
document.getElementById("amount").value = "";
}
function onFailTest() {
var output = document.getElementById("output");
text = "duplicate entry retry";
output.innerHTML = text;
}
</script>
I'd do the html like this:
html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div>
<input type="text" id="amount" name="amount" placeholder="serving in gms"><br>
<button class="myStyle" onclick="sendTest()">🫒</button>
</div>
<div id="output"></div>
<script>
function sendTest(){
var amount = document.getElementById("amount").value;
google.script.run
.withFailureHandler(function(){output.innerHTML = "duplicate entry retry";})
.getTest(amount);
document.getElementById("amount").value = "";
}
</script>
</body>
</html>
But I'd use withSuccessHandler to handle the getTest return onFailureHandler will handle errors not false returns, I think.
I'm trying to add a "Sign Up" link to a Google Calendar Event where upon clicking the user is prompted via HtmlService to submit their email address. Their email address is then added to the event.
Here's a similar example. What I'd like to do differently is use HtmlService to have the user input their email address, which then is passed back to GAS to be added to the Calendar Event in question. That way they can choose the email they want (instead of whatever Session.getActiveUser().getEmail() returns) to sign up with. (and by sign up, I mean get added to the guest list - they still have to accept the invite, but that's fine).
Is this possible? I'm not seeing any examples of this so maybe there's a better way?
I am starting to tear out what little hair I have. I've included my latest sample code, where I pass the event object into the HTML template. It's not throwing an error, but it's not working either. Thank you in advance!!
Code.gs:
function doGet(event) {
// // shorten the event parameter path;
var param = event.parameter;
// // get the calendar event id passed in the query parameter
var eventId = param.eId;
var calId = param.calId;
var cal = CalendarApp.getCalendarById(calId);
var t = HtmlService.createTemplateFromFile('Index');
t.eObj = cal.getEventById(eventId);
return t.evaluate();
}
function addEmail(emObj,myForm){
var guestEmail = myForm.user;
emObj.addGuest(guestEmail)
}
and Index.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function update() {
alert("Success!");
}
</script>
</head>
<body>
<form id="myForm">
<input id="userEmail" name="user" type="text" />
<input type="button" value="Submit" onClick="google.script.run.withSuccessHandler(update).addEmail(eObj,this.form)" />
</form>
</body>
</html>
You don't have scriptlets in your html file, so you don't need to evaluate a template. I've added another 2 input fields for the calId and eventId. They get replaced in the HTML before being served. Then the event ID and Cal ID are passed back in the form object.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function update() {
alert("Success!");
}
</script>
</head>
<body>
<form id="myForm">
<input id="userEmail" name="user" type="text" />
<input name="calId" type="text" style="display:none"
value="zzz_calID_zzz"/>
<input name="eventId" type="text" style="display:none"
value="zzz_eventID_zzz"/>
<input type="button" value="Submit" onClick="google.script.run
.withSuccessHandler(update)
.addEmail(this.form)" />
</form>
</body>
</html>
doGet:
function doGet(event) {
// // shorten the event parameter path;
var param = event.parameter;
// // get the calendar event id passed in the query parameter
var eventId = param.eId;
var calId = param.calId;
var t = HtmlService.createHtmlOutputFromFile('Index').getContent();
t = t.replace('zzz_calID_zzz',calId);
t = t.replace('zzz_eventID_zzz',eventID);
return HtmlService.createHtmlOutput(t);
}
Server code:
function addEmail(myForm){
var cal = CalendarApp.getCalendarById(myForm.calId);
var event = cal.getEventById(myForm.eventId);
var guestEmail = myForm.user;
event.addGuest(guestEmail)
}
Using and spreadsheet, I have an HTML web that fills some text boxes and create some google charts when a csv file is dropped (this is not a Form)
I need to make a function that let me parse the value of the text boxes in order to fill a spreadsheet, this is my code so far:
Tablas.html (I am trying to pass all the document object as a parameter)
<input id="cmd" onclick="formSubmit()" type="button" value="Descargar SnapShot">
<script type="text/javascript">
function formSubmit() {
google.script.run.getValuesFromForm(document);
}
And the gs Script: (With the document as a parameter, i am trying to recover a text box named "modequ" to fill a new row in the Spreadsheet)
function getValuesFromForm(document){
var ssID = "12GvIStMKqmRFNBM-C67NCDeb89-c55K7KQtcuEYmJWQ",
sheet = SpreadsheetApp.openById(ssID).getSheets()[0],
modequ = document.getElementById("modequ").value;
sheet.appendRow([modequ]);
}
Is there any way to connect the all the document objects in the page made with the spreadsheet so i can append and process it? I though if maybe if i pass the all the document object this would be possible.
Regards
The document.getElementById() method returns a reference from the id attribute from your HTML, it needs to be inside your formSubmit() function:
function formSubmit() {
var modequ = document.getElementById('modequ').value;
google.script.run.getValuesFromForm(modequ);
}
This way you can get all the values individually and then pass them as parameter e.g. google.script.run.getValuesFromForm(modequ, tipmoto, smr)
However, if you want to pass all the form elements and then get them by name, you can do something like this:
HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form id="form" name="form">
<input name="modequ" type="text">
<input name="tipmoto" type="text">
<input name="series" type="text">
<input id="cmd" onclick="formSubmit()" type="button" value="Descargar SnapShot">
</form>
</body>
</html>
<script type="text/javascript">
function formSubmit(){
google.script.run.getValuesFromForm(document.forms[0]);
}
</script>
GS:
function getValuesFromForm(res){
var ssID = '12GvIStMKqmRFNBM-C67NCDeb89-c55K7KQtcuEYmJWQ',
sheet = SpreadsheetApp.openById(ssID).getSheets()[0];
sheet.appendRow([res.modequ, res.tipmoto, res.series]);
}
I am medical researcher, and I am creating a database of my patients, I have a form in html and want the variables obtained were stored in a spreadsheet of google, so far I have only this:
spreadsheet:
my spreadsheet in google
code.gs:
function addProduct() {
var sheet = SpreadsheetApp.getActiveSheet();
sheet.appendRow(['name', 'age']);
}
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index.html')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
index.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
Name and age!
<input type=text name=name id=name>
<input type=number name=age id=age>
<input type=submit onclick=google.script.run.addProduct()>
</body>
</html>
I dont know how to link the variables in the html form, to the code.gs to enter the answers in a new row with the sheet.appendRow
I will appreciate your help,
thanks
Your input tags are not in a form, so you can't get the form element as a whole. Which you don't need to do, but it's worth mentioning because there are multiple ways you can structure things.
You can use what's called the DOM to get the values out of the input tags.
<body>
Name and age!
<input type=text name=name id=name>
<input type=number name=age id=age>
<input type=submit onclick="myClientSideJavaScriptFunction()">
</body>
<script>
function myClientSideJavaScriptFunction() {
var inputOneValue = document.getElementById('name').value;
var inputTwoValue = document.getElementById('age').value;
google.script.run
.addProduct(inputOneValue, inputTwoValue);
};
</script>
Code.gs
function addProduct(x1, anythingYouWantToNameIt) {
var myArray = [];
myArray.push(x1);
myArray.push(anythingYouWantToNameIt);
var sheet = SpreadsheetApp.getActiveSheet();
sheet.appendRow(myArray);
};