to demonstrate what im trying to do using a simple example:
<html>
<head>
<base target="_top">
</head>
<body>
<form id="uploaderForm" action="https://script.google.com/macros/.......exec Method="POST">
<input type="text" name="applicantName" id="applicantName">
<input type="text" name="applicantEmail" id="applicantEmail">
<input type="button" value="Submit">
</form>
<script>
.
.
.
google.script.run.withSuccessHandler(onFileUploaded)
.uploadFile(content, file.name, folderId);
</script>
so this is an example of the html and js page that is in my pc, not in the google app, i just called the google app in the form, and in the javascript part im calling a function called uploadFile, which is located in the google script, but obviously i get an error in the console , it says :
Uncaught ReferenceError: google is not defined
at uploadFiles (6166bff606ac6fee1994e592:67)
at HTMLInputElement.onclick
is it possible to call a GAS function inside JS that is not in the GAS html.
is what im trying to do even possible, the whoel reason im doing this is so that i can pass the username and email automatically from the database to the app, the app works if the html part is hosted in the google app script, but then i cant figure out how to pass the email and username to it because in this case i call the app using , so is it possible to pass the username and email through the iframe call, i dunno im very new to this i have so many questions, honestly the documentation wasn't helpful to me. please feel free to comment anything, everythign is helpful
Since you're just posting the form data, you can name the function you want to call as doPost()(instead of uploadFile) and it will receive the posted data. You have to republish the webapp as a new version after the modification.
I just ran it as a dialog. I returned the data back into the success handler and loaded by into the html to insure it was working.
HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<body>
<form>
<input type="text" name="applicantName" id="applicantName"/>
<input type="text" name="applicantEmail" id="applicantEmail"/>
<input type="button" value="Submit" onclick="uploadfile(this.parentNode);" />
</form>
<div id="msg"></div>
<script>
function uploadfile(form) {
google.script.run
.withSuccessHandler((m) => document.getElementById("msg").innerHTML = m)
.uploadMyFile(form);
}
</script>
</body>
</html>
gs:
function uploadMyFile(obj) {
return `Applicant Name: ${obj.applicantName}<br />Applicant Email: ${obj.applicantEmail}`;
}
function launchFormDialog() {
SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutputFromFile('ah2'),'Test Dialog');
}
Dialog:
Related
I have this code:
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form action="https://api.pagar.me/1/zipcodes/">
<input type="text" placeholder="cep" name="cep">
<input type="submit">
</form>
</body>
</html>
When I type a number, for example 05423110, I get on the adress bar is "https://api.pagar.me/1/zipcodes/?cep=05423110", but I would like to have "https://api.pagar.me/1/zipcodes/05423110".
What do I need to change on my code?
Thanks!
I would do it like this. The other answer will have the problem where it could potentially append something twice.
I also set it so the button disables for user friendliness (in case the server takes awhile to respond).
This solution does use jQuery, but chances are you will need to do other simple DOM manipulation and this will be very helpful.
Because you don't want the query string in there, but you must have it be GET, then its impossible not to have it append the query string to the URL (because that's what a GET request does).
Instead, I use javascript to simply redirect to the proper URL and ignore the form GET/POST entirely.
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>
<form action="https://api.pagar.me/1/zipcodes/">
<input type="text" placeholder="cep" name="cep">
<input type="submit">
</form>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
(function() {
var form = $('form');
var baseUrl = form.attr('action');
$('form').submit(function(e) {
e.preventDefault();
form.find('[type="submit"]').prop('disabled', true);
window.location.href = baseUrl + form.find('[name="cep"]').val();
});
})();
</script>
Add method="post" to the form tag, then add an event listener to the form's submit event which append the input value to the action attribute value on the form:
const form = document.forms[0]
form.addEventListener('submit',()=>{form.action+=cep.value})
<form action="https://api.pagar.me/1/zipcodes/" method="post">
<input type="text" placeholder="cep" name="cep" id="cep">
<input type="submit">
</form>
Ofc StackOverflow snippets prevents POST.
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 want to store rating value in jsp session variable inside the java script function for using in testOpeartion page
I tried this way but not storing any value "UserRating" session variable
<html>
<head>
<title>Registration Page</title>
<script type="text/javascript">
function SetRating()
{
var rating = document.getElementById("ratingValue").value;
<%
request.setAttribute("UsaerRating",rating);
%>
}
}
</script>
</head>
<body>
<form method="post" action="testOperation">
<input type="text" id="ratingValue" onclick="doDisplay(this);" />
<input type="Button" onclick="SetRating();" value="Set Rating"/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
From this link
It's not possible to set any session variables directly from
javascript as it is purely a client side technology. You can use AJAX
though to asyncronously send a request to a servlet running on the
server and then add the data to the session from within the servlet.
So you wouldn't be using javascript to do the actual setting of
session variables but it would look like it is.
You can also get more details from THIS LINK
I am using a similar technique as was presented in this previously asked question:
how to get value entered in UI created with the new HtmlService
However, I am seeing inconsistent behavior between web browsers and even on mobile. My problem is in some browsers (Chrome) my 2nd html page is not displaying, however, in Firefox it does.
I went so far as to use the same code was was presented by Eric Koleda in the above link. This is what I have:
function doGet(e) {
var t = HtmlService.createTemplateFromFile('page1.html');
t.action = ScriptApp.getService().getUrl();
return t.evaluate();
}
function doPost(e) {
Logger.log("In doPost = ");
var t = HtmlService.createTemplateFromFile('page2.html');
t.name = e.parameter.name;
t.comment = e.parameter.comment;
t.screenshot = e.parameter.screenshot;
return t.evaluate();
}
page1.html
<html>
<body>
<h1>Feedback Form</h1>
<form action="<?= action ?>" method="post">
Name: <input type="text" name="name" /><br/>
Comment:<br/>
<textarea name="comment"></textarea><br/>
<input type="submit" value="Submit" />
</form>
</body>
</html>
page2.html
<html>
<body>
<h1>Thanks</h1>
<p>Thank you for your feedback.</p>
Name: <?= name ?><br/>
Comment: <?= comment ?><br/>
</body>
</html>
Eric's code from his link runs fine in Chrome for me, so I am not sure why I am having this issue. Also, based on Corey G's comment in the above link, I am wondering if I should be using Templated HTML and just use HTML Service only, but Templated HTML seems to be a good fit for my app. Could it be related to my sites or something else? Thanks for your time. Larry King
I have two html files namely "file1.html" and "file2.html". File1 is supposed to encode a string written in an input file and send it to file2 via URL so that it could be decoded there.
My problem is an embarrassing one as I'm having trouble while passing from file1 to file2. Here is my code:
<html>
<head>
<script type="text/javascript">
function encode()
{
var encodeThis = document.getElementById("exampleText").value;
document.getElementById("exampleText").value = escape(escape(encodeThis));
}
</script>
</head>
<body>
<form name="input" action="file2.html" method="get">
<input id="exampleText" type="text" name="example" value="Not strongly encoded" />
<input type="button" value="Encode and Submit!" onclick="encode()" />
</form>
</body>
</html>
When I click to submit button, I expect to send the encoded string via URL and pass to file2.html where I can process it, however I remain at my first page: "file1.html". Which fundamental knowledge do I lack here ? Thanks in advance for your time.
Because there is no submit. Either you give the input-tag the type submit instead of button or you make a form.submit () via JS.
document.input.submit(); should do this.
BTW... why double-escape?
The submit button should be like this:
<input type="submit" value="Encode and Submit!" onclick="encode()" />