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.
Related
This question already has answers here:
How to view the logging of Google Web App when other users are executing it?
(2 answers)
Closed 1 year ago.
I am trying to replicate a simple Web app tutorial video, but can't get google.script.run.function to create a log in my code.gs. Here is my code:
Code.gs
function doGet(){
return HtmlService.createHtmlOutputFromFile("clock");
}
function userClicked(){
Logger.log("Log clicked");
console.log("Console click");
}
clock.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>test</h1>
<div id="replace">___</div>
<button id="submit">Submit</button>
<script>
document.getElementById("submit").addEventListener("click",doSubmit);
function doSubmit(){
google.script.run.userClicked();
document.getElementById("replace").innerHTML = "clicked";
}
</script>
</body>
</html>
When I run userClicked within the editor, the execution logs show up fine. Also, when the button is clicked in the webapp, the "clicked" text shows up just fine. Also, both doGet and userClicked show up in my Executions. The problem is that the logs do not show up in my execution logs when run from the webapp. I have a found a couple threads similar to this, but it never seems to get resolved.
UPDATE: I also tried adding withSuccessHandler and the results are the same - the functions both run fine in the Executions, but no log shows up in the Executions Log (also true of "Logs" if I test in the legacy version). The new html is this:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>test</h1>
<div id="replace">___</div>
<button id="submit">Submit</button>
<script>
document.getElementById("submit").addEventListener("click",doSubmit);
function onSuccess(){
document.getElementById("replace").innerHTML = "success";
}
function doSubmit(){
google.script.run.withSuccessHandler(onSuccess).userClicked();
}
</script>
</body>
</html>
What works then is if you create a function and call that function with your server function, so:
function logHi(){
console.log("hi")
}
// And then use it
function userClicked(){
logHi()
}
<!DOCTYPE html>
<html>
<head>
<!-- $("input#post_id").on("change", function(){ // Whenever this field changes
var post_id = $("input#post_id").val(); // Get the value of the field
$("a#link").attr("href", "https://stackoverflow.com/questions/" + post_id); // Update the href in the link to match the id inserted in the input field
}); -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Enter the DP ID below </label>
<br>
<input id="post_id" type="text">
<a id="link" href='https://www.google.com/search?'+post_id.value>Click to redirect</a>
</body>
</html>
How to create a link incorporating user input from the input box
I'm trying to attempt a similar mechanism but as I'm too new to HTML, I'm unable to quickly club it with jquery.
Appreciate any help! Thanks!
My sample query - https://www.w3schools.com/code/tryit.asp?filename=GPZYOB9C4JFW
When I initially tried this approach the url generated had [ input object HTML ] something like this instead of the user input string.
You need to put the jQuery code inside a <script> tag after the one that ooads the jQuery library.
Also put the code inside $(document).ready() so it runs after the HTML is fully loaded.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("input#post_id").on("change", function() { // Whenever this field changes
var post_id = $("input#post_id").val(); // Get the value of the field
$("a#link").attr("href", "https://stackoverflow.com/questions/" + post_id); // Update the href in the link to match the id inserted in the input field
});
});
</script>
</head>
<body>
<label>Enter the DP ID below </label>
<br>
<input id="post_id" type="text">
<a id="link" href='https://www.google.com/search?'>Click to redirect</a>
</body>
</html>
You just need to have <script> tag and jQuery document ready tag $(function() { to make it work.
<script>
$(function() {
$("input#post_id").on("change", function(){ // Whenever this field changes
var post_id = $("input#post_id").val(); // Get the value of the field
$("a#link").attr("href", "https://stackoverflow.com/questions/" + post_id); // Update the href in the link to match the id inserted in the input field
});
});
</script>
I would like to add forms to a page in real time, but I'm not sure how to approach this.
Let's say that this is the class of my form:
class MyForm(FlaskForm):
my_field = StringField()
This is the html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button type="button" id="addNewForm">Add new form</button>
</body>
</html>
Which also includes this script:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">/script>
<script type="text/javascript">
var form = '{{ form }}'
$("document").ready(function () {
$("#addNewForm").click(function () {
$("body").append(form)
});
});
</script>
Once I press the button I get back something like:
<forms.MyForm object at 0x000001C198CE5040>
I tried to extract the form HTML in order to pass it as an a string of html, but I can't find a way to do it (and suspect that there must be a better way).
What is the correct way of doing this?
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>
in a Spreadsheet I have in cell A1 a number. I know how to read it and use in a html file created inside the script ( with HtmlService)
Is there a way to use the data in an external page?
On my site I'm trying to have somethin like:
<p>In your bag there are</p> + "cellA1Value" + <p>carrots</p>
Ask if I have not been clear. Thanks
Reading a value from an External Page
You will have to put the appropriate value in Sheet1!A1.
You will have to deploy as webapp and give access to anyone, even anonymous.
Then everytime you load your page it loads that value into <span id="spn1"></span>
Here's the doGet():
function doGet(e){
if(e.queryString !=='')
{
var s=SpreadsheetApp.getActive().getSheetByName('Sheet1').getRange(e.parameter.range).getValue();
}else{
var s='No Query Parameter Received';
}
return ContentService.createTextOutput(s);
}
Here's my external website code:
<html>
<head>
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
var url='https://script.google.com/macros/s/AKfycbxjlJNGYL65mItHLoL76jiEWX4iQlKzpywMAjg5SMgUUUZNbm8/exec?range=A1';
$.get(url,function(data,status){
document.getElementById('spn1').innerHTML=data;
});
});
console.log('MyCode');
</script>
</head>
<body>
<div id="mydata">The size of my ruler is <span id="spn1"></span> inches.</div>
</body>
</html>
You could use a multicell range and return a delimited string, split it and then loop through the array assigning values to different spans.