First I will provide you with the code and briefly explain what it is I am trying to accomplish.
Code.gs
function onOpen() {
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.createMenu("Custom Menu")
.addItem("Show sidebar", "showSidebar")
.addToUi();
}
function doGet() {
return HtmlService.createHtmlOutputFromFile("entry");
}
function showSidebar() {
var html = HtmlService.createHtmlOutputFromFile("entry")
.setTitle("My custom sidebar")
.setWidth(300);
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.showSidebar(html);
}
function EnterData(fobject) {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName("Sheet1");
sheet.activate();
ss.toast("Something Happened");
var range = sheet.getRange(1, 1);
range.setValue("It worked");
}
function ProgramSuccess() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
ss.toast("Program Run Complete");
}
entry.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
// Prevent form from submitting
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
function FormSubmit(formObject) {
google.script.run.withSucessHandler(FormSuccess).EnterData(formObject);
}
function FormSuccess() {
google.script.run.ProgramSuccess;
google.script.host.close();
}
</script>
</head>
<body>
<form id="entryForm" onsubmit="FormSubmit(this)">
Name:<br>
<input type="text" name="name">
<br>
Client Name:<br>
<input type="text" name="clientname">
<br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
</body>
</html>
The purpose of this program is to open a sidebar in a google sheet that displays an html page that has a form (tag). Then when you click submit in the html sidebar, it should run the EnterData function in Code.gs. My problem is that this function is not being ran and nothing happens when I click the submit button.
Any help on this would be greatly appreciated.
Try this:
entry.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
// Prevent form from submitting
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
function FormSubmit() {
google.script.run.withSucessHandler(FormSuccess).EnterData(document.getElementById("entryForm"));
}
function FormSuccess() {
google.script.run.ProgramSuccess;
google.script.host.close();
}
</script>
</head>
<body>
<form id="entryForm">
Name:<br>
<input type="text" name="name">
<br>
Client Name:<br>
<input type="text" name="clientname">
<br><br>
<input type="submit" value="Submit" onclick="FormSubmit()">
<input type="reset">
</form>
</body>
</html>
Also, i did not understand why are you passing the "entryForm" object to the EnterData function because you don't seem to be making use of it.
Related
I'm trying to have a form in my chrome extension popup that has its data processed by js when it's submitted. However, without any errors, nothing happens on submission.
manifest.json
"action":{
"default_popup": "index.html"
},
"background": {
"service_workers": ["app.js"]
}
index.html
<!doctype html>
<html>
<body>
<form id="form">
<input id="grade" type="text" placeholder="grade">
<input id="score" type="text" placeholder="score">
<input type="submit" value="Save">
</form>
</body>
</html>
app.js
document.addEventListener('DOMContentLoaded', function () {
var form = document.getElementById("form")
form.addEventListener('submit', function(e){
var grade = document.getElementById("grade").value
var score = document.getElementById("score").value
alert(grade)
chrome.storage.sync.set({grade: grade})
chrome.storage.sync.get(['grade'], function(result) {
console.log('Value currently is ' + result.key);
});
})
})
Is this happening because I don't include the <script src="app.js"> tag? Chrome gives an error if any script tags are inside the html of the popup.
document.addEventListener('DOMContentLoaded', function() {
var form = document.getElementById("form");
form.addEventListener('submit', function(e) {
e.preventDefault();
var grade = document.getElementById("grade").value;
var score = document.getElementById("score").value;
console.log(grade);
// chrome.storage.sync.set({grade: grade});
// chrome.storage.sync.get(['grade'], function(result) {
// console.log('Value currently is ' + result.key);
// });
});
});
<form id="form">
<input id="grade" type="text" placeholder="grade">
<input id="score" type="text" placeholder="score">
<input type="submit" value="Save">
</form>
I have a google sheet, I opened script editor and opened there two files, a script file and an html file. Here is what I have in my script file:
//to load html sidebar
function loadHome() {
const htmlSidebar = HtmlService.createTemplateFromFile("home");
const htmlOutput = htmlSidebar.evaluate();
const ui = SpreadsheetApp.getUi();
ui.showSidebar(htmlOutput);
}
//to create a custom menu
function createMenu(){
const ui = SpreadsheetApp.getUi();
const menu = ui.createMenu("AC Paz");
menu.addItem("Side Registration", "loadHome");
menu.addItem("Order Framing", "loadFraming");
menu.addToUi();
}
//to make sure custom menu is loaded on open
function onOpen(){
createMenu();
}
//to access data passed on html input fields
function userClicked(userInfo){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var ws = ss.getSheetByName("Site Information");
ws.appendRow([userInfo.firstName, userInfo.lastName, new Date()])
}
Here is what I have in my html file:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div >
<input id="fn" type="text" >
<label for="fn">First Name</label>
</div>
<div >
<input id="ln" type="text">
<label for="ln">Last Name</label>
</div>
<button id="btn">Add</button>
<script>
document.getElementById("btn").addEventListener("click",doStuff);
function doStuff(){
var userInfo = {}
userInfo.firstName = document.getElementById("fn").value;
userInfo.lastName = document.getElementById("ln").value;
google.script.run.userClicked(userInfo);
document.getElementById("fn").value = "";
document.getElementById("ln").value = "";
}
</script>
Here is my problem: when I type something in input fields and click the button, nothing is passed onto the spreadsheet, but, the entry gets cleared in the input fields.
Try this:
HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div >
<input id="fn" type="text" >
<label for="fn">First Name</label>
</div>
<div >
<input id="ln" type="text">
<label for="ln">Last Name</label>
</div>
<button id="btn">Add</button>
<script>
window.onload=function(){
document.getElementById("btn").addEventListener("click",doStuff);
function doStuff(){
var userInfo = {}
userInfo.firstName = document.getElementById("fn").value;
userInfo.lastName = document.getElementById("ln").value;
google.script.run
.withSuccessHandler(function(){
document.getElementById("fn").value = "";
document.getElementById("ln").value = "";
})
.userClicked(userInfo);
}
}
</script>
</body>
</html>
GS:
function userClicked(userInfo){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var ws = ss.getSheetByName("Sheet1");
ws.appendRow([userInfo.firstName, userInfo.lastName, new Date()])
}
function showMySideBar() {
SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutputFromFile('ah1'))
}
I'm working through https://developers.google.com/apps-script/guides/html/communication trying to submit a form with info loaded from a google sheet. On the client side I have (Based heavily on the form example in the article) :
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
// Prevent forms from submitting.
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
// window.addEventListener('load', preventFormSubmit);
function handleFormSubmit(formObject) {
google.script.run.withSuccessHandler(updateUrl).processForm(formObject);
}
// function updateUrl(url) {
// var div = document.getElementById('output');
// div.innerHTML = 'Got it!';
// }
</script>
</head>
<body>
<form id="myForm" onsubmit="handleFormSubmit(this)">
<div>
<select id="optionList" name="email">
<option>Loading...</option>
</select>
</div>
<br>
<div>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</div>
<input type="submit" value="Submit" />
</form>
On the server side (code.gs) I have:
function processForm(formObject) {
Logger.log('in here');
var formBlob = formObject.myFile;
var driveFile = DriveApp.createFile(formBlob);
return driveFile.getUrl();
}
I can see that the submit is working because I see 'in here' in the logs. How can I access the form fields from within the processForm function?
This chunk doesn't make sense to me
var formBlob = formObject.myFile;
Your form doesn't contain the input whose 'name' attribute is set to 'myFile'. Once you click 'submit', the 'formObject' variable will be:
{
email: "Loading...", //from <select id="optionList" name="email">
message: "The cat was playing in the garden." //from <textarea name="message">
}
i have 2 pages: A.htm and B.htm
A calls B as a popup, then after some operations B must call a javascript inside A, to do this i used the javascript: "opener".
but i think i did some mistakes because in the popup when i click the button nothing happen, here an example to download: http:\www.suale.it/prova/a.zip
this is the code of A.htm
<html>
<script language="javascript">
function ricaricapagina()
{
var theform;
if
(
window.navigator.appName.toLowerCase().indexOf("netscape") > -1) {
theform = document.forms["frmMain"];
}
else
{
theform = document.frmMain;
}
//txtOperation.value=pOperation;
theform.submit();
}
function SelectArticoli(pForm, txtOperation)
{
var sQueryString=new String;
var WinSettings = "center=yes,resizable=yes,scrollbars=yes,height=600,width=1000";
sQueryString='B.htm';
sQueryString += '?CallerForm=' + pForm;
sQueryString += '&CallerOperation=' + txtOperation;
sQueryString += '&CallerReload=1' ;
window.open(sQueryString, '', WinSettings);
}
</script>
<form name="frmMain" id="frmMain" action="A.htm" method="post">
<input name="txtOperation" type="hidden" id="txtOperation" />
<input name="cmdSelectArticoli" id="cmdSelectArticoli" onclick="javascript:SelectArticoli('frmMain', 'txtOperation');" type="button" value="Aggiungi Articoli...">
</form>
</html>
this is the code of B.htm
<html>
<script language="javascript">
function chiudipopup(pResult)
{
if (pResult==true)
{
window.opener.document.forms[frmMain].item(frmMain.txtCallerOperation.value).value = 'SelectArticoli';
if (frmMain.txtCallerReload.value != '')
{
window.opener.ricaricapagina();
}
}
window.close();
}
</script>
</script>
<form name="frmMain" method="post" id="frmMain">
<input name="txtCallerOperation" type="hidden" id="txtCallerOperation" value="txtOperation" />
<input type="submit" name="cmdConferma" onclick="javascript:chiudipopup(true);" value="conferma" id="cmdConferma" class="button" />
</form>
</html>
can you try declaring the function as window.ricaricapagina = function(){...}
You have two problem:
[B.html]=>change window.opener.document.forms[frmMain].item(frmMain.txtCallerOperation.value).value to window.opener.document.forms["frmMain"].elements["txtOperation"].value
[B.html]=>window.opener.ricaricapagina();(I'm working on it :))
I am trying to update a textbox based on whether or not a checkbox is checked or not. Thanks to this post I got a text box working fine, but I can't get a checkbox to update the value. What am I missing?
<html>
<head>
<title>sum totals</title>
<script type="text/javascript">
function calculate(t){
var j = document.getElementById("output");
var rege = /^[0-9]*$/;
if ( rege.test(t.tons.value) ) {
var treesSaved = t.tons.value * 17;
j.value = treesSaved;
}
else
alert("Error in input");
}
$('input[name="selectedItems1"]').click(function(){
var j = document.getElementById("output");
if (this.checked) {
j.value=j.value+300
}else{
j.value=j.value-300
}
});
</script>
</head>
<body>
<form>
<input type="text" placeholder="Tons" id="tons" onkeyup="calculate(this.form)"/>
<br />
<input type="checkbox" name="selectedItems1" value="val1" />I have a car
<br/>
<input type="text" id="output" value="Output" />
</form>
</body>
</html>
Place the <script> tag after <form>
Reason:
When the html page loads, it'll be interpreted line by line. When it come to click(), jQuery will try to find the element input[name="selectedItems1"] which won't be loaded into the DOM at that time. So, jQuery won't attach the click() event handle to that checkbox. That's the reason why your code didn't work.
Try this :
<html>
<head>
<title>sum totals</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
<script type="text/javascript">
function calculate(){
var j = document.getElementById("output");
var rege = /^[0-9]*$/;
var tons = $('#tons').val();
if ( rege.test(tons) ) {
val = parseInt(tons);
var treesSaved = val * 17;
if($('input[name="selectedItems1"]').is(":checked"))
{
treesSaved = treesSaved +300;
}
else
{
treesSaved = treesSaved -300;
}
if(isNaN(treesSaved))
j.value=0
else
j.value=treesSaved;
}
else
alert("Error in input");
}
$(function(){
$('input[name="selectedItems1"]').change(function(){
calculate();
});
});
</script>
</head>
<body>
<form>
<input type="text" placeholder="Tons" id="tons" onkeyup="calculate()"/>
<br />
<input type="checkbox" name="selectedItems1" value="val1" />I have a car
<br/>
<input type="text" id="output" value="Output" />
</form>
</body>
</html>