I've gone through most of the relating questions regarding this and haven't found a solution that helps me (I've applied them one by one). I have an HTML form that I am publishing as a web app through google. I need to prefill an input box with that parameter.
code.gs
function doGet() {
return HtmlService
.createTemplateFromFile('html')
.evaluate();
}
html.html
<!DOCTYPE html>
<html>
<head>
</head>
<style>
</style>
<body>
<form>
<h1><center>Verification</center></h1>
Form ID:<input type="number" name="formid" id="formid" class="formid">
</form>
</body>
</html>
As I said, I've tried many suggestions in similiar questions, but can't seem to find one that works. The id is that I can type in my url + ?formid= and have that populate in the input. How can I make this happen as described?
Thank you!
When Web Apps is accessed with the URL of url + ?formid=###, you want to put the value of ### to the text box.
The URL is like https://script.google.com/macros/s/###/exec?formid=###.
If my understanding is correct, how about this answer? Please think of this as just one of several answers.
Modification point:
In this modification, I used google.script.url.getLocation() for retrieving the query parameter.
Modified script:
Please modify html.html as follows.
<!DOCTYPE html>
<html>
<head>
</head>
<style>
</style>
<body>
<form>
<h1><center>Verification</center></h1>
Form ID:<input type="number" name="formid" id="formid" class="formid">
</form>
<script>
google.script.url.getLocation(function(location) {
document.getElementById("formid").value = location.parameters.formid[0];
});
</script>
</body>
</html>
By above modification, when you accessed to Web Apps with https://script.google.com/macros/s/###/exec?formid=12345, 12345 is put to the text box.
Reference:
getLocation(function)
If I misunderstood your question and this was not the direction you want, I apologize.
Using Jquery:
<script>
$(function(){
google.script.run
.withSuccessHandler(function(v){
$('#formid').val(v);
})
.getTheValueOfV();
});
</scrip>
With Regular JavaScript
<script>
window.onload=function(){
google.script.run
.withSuccessHandler(function(v){
document.getElementById('formId').value=v;
})
.getTheValueOfV();
};
</script>
Code.gs:
function getTheValueOfV() {
var ss=SpreadsheetApp.getActive();
return ss.getRangeByName("TheRangeWhereYouFindtheValueofv").getValue();
}
You can put the script in the head or in the body your choice. If you use JQuery you need something like this in the head.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Related
Having trouble getting a parameter from the URL of a Web App deployed from Google App Script, passing it through a HTML template, and then getting it again as a parameter for a JS function when a user clicks on a button in the Web App.
Specifically, in the code below, I am having trouble passing the variable "username" from the html back to a JS function defined in my original Google App Script when the user clicks on the button "approveTC"...
Here is the Google Apps Script
function doGet(e) {
if(e.parameters.name === undefined){
var tmp = HtmlService.createTemplateFromFile('entername')
return tmp.evaluate();
} else {
var tmp = HtmlService.createTemplateFromFile('timecard')
tmp.username = e.parameters.name
return tmp.evaluate();
}
}
function timecardApproved(name){
return signAndSendTc(name)
}
And here is the HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include("timecard-css"); ?>
</head>
<body>
<div>
<h1>Hello <?!= username?></h1>
</div>
<div>
<iframe src=<?!= getTcJpg(username); ?> width="80%" height="800px" frameborder="0"></iframe>
</div>
<div>
<br>
<button id="approveTC">Approve Timecard</button>
</div>
<script>
document.getElementById("approveTC").addEventListener("click",approveTC);
function approveTC(username){
google.script.run.timecardApproved(username);
}
</script>
</body>
</html>
When you assign the templated value to a variable in your script, make sure that you pass it stringified
This works for me:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div>
<h1>Hello <?!= username?></h1>
</div>
<div>
</div>
<div>
<br>
<button id="approveTC">Approve Timecard</button>
</div>
<script>
var uname = "<?!= username ?>"
document.getElementById("approveTC").addEventListener("click",approveTC);
function approveTC() {
console.log(uname)
}
</script>
</body>
</html>
After a lot of experimenting, this was the solution that ended up working for me... very close to what #ziganotschka suggested. Except, when I tried #ziganotschka's method earlier, the variable didn't pass through correctly to my Google Apps Script. This code does work for me, though...
<script>
var username = <?= username ?>
document.getElementById("approveTC").addEventListener("click",approveTC);
function approveTC(){
google.script.run.timecardApproved(username);
}
</script>
Below is my HTML file in Google App Script.
It creates a dialogue box on a spreadsheet. When the ok button is pressed I want it to run a function that I have created in App script and also close the dialogue box.
When I am clicking OK the app script code is not running. What can I do better?
Thanks.
<!DOCTYPE html>
<html>
<head>
<h3>Welcome</h3>
<meta charset="utf-8">
<title>SEOMango</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<input type="button" value="Ok" class="create ok_button"
onclick="close1();" id="ok_button"/>
<!--JQUERY-->
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
function close1()
{
google.script.host.close();
google.script.run.withSuccessHandler.doSomething();
}
</script>
</body>
</html>
try something like this:
function close1()
{
google.script.run.withSuccessHandler(end).doSomething();
}
function end()
{
google.script.host.close();
}
You first need to execute you function on google side doSomethingthen if it is successful call end() function with google.script.host.close() inside of it to close your sidebar/dialog box.
as #tehhowch mentionned it you are here closing your Html page before executing your function doSomething().
I am trying to get the value of the date which the user selects using datepicker. Once they select the date I want to be able to use the string for later. I have followed the extremely helpful answer found here: Returning a value using Date picker in HTMLService / Google Apps Script
I know I need to get it to the back end but am struggling to do so and I am sure there is a dumb mistake which I am missing because I am still learning. Here is the code, any help is welcoming.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/cupertino/jquery-ui.css">
<form id='findDate'>
Date:<input type="button" id = "date" onclick = "submitDates()" />
</form>
<script>
$("#date").datepicker({
showWeek: true,
firstDay: 0,
});
</script>
<script>
function submitDates() {
var dateDes = $("#date").val();
google.script.run.submitDates(dataDes);
}
</script>
The part I am most confused about is setting the value of the button and what to do with the onclick as I am sure I am not getting the value assigned. This is where it is supposed to get sent in the end.
function submitDates(dateDes) {
Logger.log(JSON.stringify(dateDes));
//goal is to set the datedes string to setDescription using the File Class
}
Thanks in advance.
Source.HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red">Hello World</h1>
<p id="demo" style="color:red">Click the button below to remove the style attribute from the header above.</p>
</body>
</html>
Parser.html
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Parse</button>
<script>
function myFunction()
{
document.getElementsByTagName("H1")[0].removeAttribute("style");
document.getElementsByTagName("P")[0].removeAttribute("style");
};
</script>
</body>
</html>
Now what i need guidance for was , i need the Parse button from parser.html to apply the functions for source.html and save as output.html in same path of source.html...
Kindly help me out ...
What Willshaw said is correct. Javascript don't have that much power to solve your problem. You need to go for some serverside scripting.
I agree with the previous answer, it is a pretty strange way to do.
But, the DOM parsing being really easy with javascript, you could do the parsing on the client side, I guess, and then send the processed html to your backend, and save it in result.html.
I will use Jquery for the example, way easier.
Parser.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="btnLoad">Load Source</button>
<button id="btnParse">Parse</button>
<button id="btnSave">Save</button>
<div style="display:none" id="sourceContainer"></div>
<script>
$(document).ready( function() {
$(".btnLoad").click(function(){$("#sourceContainer").load("/source.html");})
$(".btnParse").click(function(){
$(".sourceContainer h1").removeAttr("style");
$(".sourceContainer p").removeAttr("style");
})
$(".btnSave").click(function(){
var data = {
html: $("#sourceContainer").html()
};
//replace first param by the backend url, add callback function
$.post("http://...", data, ...);
})
});
</script>
</body>
</html>
I'm trying to create my very first HTML code. My code is:
<html>
<head>
</head>
<body>
<input type="button" id="apply" value="Push Me" onclick="javascript:faa();" />
<input type="button" id="apply" value="No, Push Me Instead" onclick="javascript:foo();" />
Official website of Foocorp Inc. (Not really.)
</body>
<script type="text/javascipt">
function faa(e)
{
alert('Nope, it is the other button.');
}
</script>
<script type="text/javascript">
function foo(e)
{
alert('You have destroyed your computer. Thank you for your time.');
window.close();
}
</script>
</html>
Whenever I push the button with value "No, Push Me Instead" it works fine. The button "Push Me" doesn't do anything when I push it. What am I doing wrong?
text/javascipt should have an r in it.
HTML 5 makes the type attribute for script elements optional when you are writing JavaScript. When you are dealing with JS, the attribute serves no purpose other then to be an opportunity to make types that break your code so omit it entirely.
Works fine when I move the other function to the same script:
<script type="text/javascript">
function foo(e)
{
alert('You have destroyed your computer. Thank you for your time.');
window.close();
}
function faa(e)
{
alert('Nope, it is the other button.');
}
</script>
You have to change script type spelling, as there is a spelling mistake
<script type="text/javascript">