I'm using the following scripts for a custom dialog box to make data entries into a specific range of cells. (source: https://spreadsheet.dev/custom-dialog-in-google-sheets)
Here is the HTML part:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function submitForm() {
google.script.run.appendRowFromFormSubmit(document.getElementById("Stunde eintragen"));
document.getElementById("form").style.display = "none";
document.getElementById("Danke").style.display = "block";
}
</script>
</head>
<body>
<div>
<div id="form">
<form id="Stunde eintragen">
<label for="Datum">Datum</label>
<input type="date" id="Datum" name="Datum"><br><br>
<label for="Inhalt">Inhalt</label>
<input type="text" id="Inhalt" name="Inhalt" size="60"><br><br>
<label for="Lehrkraft">Lehrkraft</label>
<select id="Lehrkraft" name="Lehrkraft">
<option value="Alexander Michaelis">Alexander Michaelis</option>
<option value="Thomas Weider">Thomas Weider</option>
</select>
<div>
</br>
<label for="Ausfall">Stunde ausgefallen?</label><br>
<input type="radio" id="E" name="Ausfall" value="E">
<label for="E">Entschuldigt</label><br>
<input type="radio" id="UE" name="Ausfall" value="UE">
<label for="UE">Unentschuldigt</label><br><br>
<input type="button" value="Eintragen" onclick="submitForm();">
</form>
</div>
</div>
<div id="Danke" style="display: none;">
<p>Die Stunde wurde eingetragen!</p>
</div>
</body>
</html>
And here is the GAS part:
//#OnlyCurrentDoc
function onOpen() {
SpreadsheetApp
.getUi()
.createMenu("Klassenbuch")
.addItem("Stunde eintragen", "showFeedbackDialog")
.addToUi();
}
function showFeedbackDialog() {
var widget = HtmlService.createHtmlOutputFromFile("Form.html");
SpreadsheetApp.getUi().showModalDialog(widget, "Stunde eintragen");
}
function appendRowFromFormSubmit(form) {
var row = [form.name, form.feedback, form.rating];
SpreadsheetApp.getActiveSheet().appendRow(row);
}
By submitting the form I want to have the data copied into a specific range (for example A7:A, B7:B, C7:C, D7:D with row 6 for the labels) and everytime I use the script it should jump in the next row.
But unfortunately the script doesn't show any output.
Can anybody help?
You can't transmit objects, but you can transmit values, even if they are in array like this
html :
function submitForm() {
var form = document.getElementById("Stunde eintragen")
google.script.run.appendRowFromFormSubmit([form.Datum.value , form.Ausfall.value , form.Inhalt.value]);
document.getElementById("form").style.display = "none";
document.getElementById("Danke").style.display = "block";
}
and gs
function appendRowFromFormSubmit(data) {
SpreadsheetApp.getActiveSheet().appendRow(data);
}
Note that in your form has no feedback and no rating !!
Related
When I click submit focus returns to spreadsheet and data get loaded, but dialog box does not get closed. I used google.script.host.close(), but that won't pass focus back to spreadsheet.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form >
Select Client:
<div>
<select id="optionList" name="client">
</select>
</div>
Select Action:
<div>
<select id="actionList" name="action">
</select>
</div>
Username:
<input type="text" name="username"> <br />
Password:
<input type="password" name="password"> <br />
<input type="button" value="OK" onclick="google.script.run.callNumbers(this.parentNode);google.script.host.editor.focus();" />
</form>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function () {
google.script.run.withSuccessHandler(buildOptionList)
.getClients();
google.script.run.withSuccessHandler(buildActionList)
.getActions();
});
function buildOptionList(clients) {
var list = $('#optionList');
list.empty();
for (var i = 0; i < clients.length; i++) {
list.append(new Option(clients[i]));
}
}
function buildActionList(actions) {
var list = $('#actionList');
list.empty();
for (var i = 0; i < actions.length; i++) {
list.append(new Option(actions[i]));
}
}
</script>
</html>
function html(){
var html = HtmlService.createHtmlOutputFromFile('load');
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.showModalDialog(html, 'Input API Creddentials');
}
I want to get focus back to Spreadsheet after closing dialog. I have tried using google html template instead dialog within sandbox mode, but that didn't work.
When I use google.script.host.editor.focus() and google.script.host.close() together it didn't send focus back to sheet.
I just use success handler to close my dialog after calling function and that worked.
<input type="button" value="OK" onclick="google.script.run.withSuccessHandler(google.script.host.close).callNumbers(this.parentNode);google.script.host.editor.focus();" />
This will close dialog window and return focus on spread sheet.
I am really new to google script and HTML and I am trying to create a program that accepts multiple inputs from a user using a HTML form, and when the user clicks submit, the data is stored inside a variable and can be used inside a .gs file from a .html . I have gotten the form to work but whenever I clicked "Submit" nothing occurs. After some troubleshooting, I think the problem is at my form_data() function. What I would like to know is how to compile the data inputs from the form and send it to my runsies() fucntion. Thank you in advance! Here is my HTML code below:
const ui = SpreadsheetApp.getUi();
function onOpen() {
ui.createAddonMenu()
.addItem('New Entry', 'newEntry')
.addToUi();
};
function newEntry() {
var html = HtmlService.createHtmlOutputFromFile("input")
.setWidth(750)
.setHeight(550);
//Display the dialog
var dialog = ui.showModalDialog(html, "External Organisations");
};
function runsies(info){
//Display the values submitted from the dialog box in the Logger.
Logger.log(info);
};
<html>
<head>
<!--Set the font of the form-->
<style>
body {font-family:Courier;}
</style>
</head>
<!--Main body design of the form-->
<body>
<!--Create text boxes for user input-->
<form action="" method="get" class="form-example">
</script>
<div class="form-example">
<label for="name"><b>Organisation: </b></label><br>
<input type="text" name="name" id= "txt1" style="border-radius:3px" required><br><br>
</div>
<div class="form-example">
<label for="email"><b>Email: </b></label><br>
<input type="text" name="email" id="txt2" style="border-radius:3px" required><br><br>
</div>
<div class="form-example">
<label for="phone"><b>Phone: </b></label><br>
<input type="text" name="phone" id="txt3" style="border-radius:3px" required><br><br>
</div>
<div class="form-example">
<label for="poc"><b>Point of Contact: </b></label><br>
<input type="text" name="poc" id="txt4" style="border-radius:3px" required><br><br>
</div>
<div class="form-example">
<label for="susmi"><b>SUSMI Contact: <b></label><br>
<input type="text" name="susmi" id="txt5" style="border-radius:3px" required><br><br>
</div>
<div class="form-example">
<label for="stats"><b>Status: <b></label><br>
<input type="text" name="stats" id="txt6" style="border-radius:3px" required><br><br>
</div>
<div class="form-example">
<label for="note"><b>Notes: </b><br><textarea rows="5" cols="50" id="multiLineInput" style="border:2px solid black;border-radius:3px">
</textarea></label><br><br>
</div>
<input type="button" value="Submit" onclick="form_data()">
<input type="button" value="Close" onclick="google.script.host.close()" />
<!--Once user clicks submit, compile info and send it to main .gs code-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function form_data(){
var info = [txt1,txt2,txt3,txt4,txt5,txt6,multiLineInput];
google.script.run.withSuccessHandler().runsies(info);
closeIt()
};
function closeIt(){
google.script.host.close()
};
</form>
</body>
</html>```
var info = [txt1,txt2,txt3,txt4,txt5,txt6,multiLineInput];
Your array is just a bunch of element id's if you want the data use `document.getElementById().value for the text boxes
Read about client to server communication google.script.run
javascript reference
I'm trying to create a html pop up that will then populate a gsheet. I've basically used the same solution found here. For some strange reason though, it isn't working. When I click the submit button on the HTML pop up box after filling out all the data, it doesn't respond. I click, it doesn't close, append the data, or do anything.
The html pop up is created, but the Submit button doesn't work. I am almost sure that it is has something to do with the onClick method I am using.
Here is the code I am working with:
gs file
function registerCustomer() {
var html = HtmlService.createHtmlOutputFromFile('customerMenu.html').setSandboxMode(HtmlService.SandboxMode.IFRAME);
SpreadsheetApp.getUi()
.showModalDialog(html, 'Add Customer');
}
function customerAdd(customerForm) {
var ss = SpreadsheetApp.getActiveSpreadsheet;
var cus_db = ss.getSheetByName("customer_db");
cus_db.appendRow([" ", customerForm.name_1, customerForm.name_2, customerForm.phone, customerForm.age, customerForm.channel]);
return true;
}
html file
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<br>
<customerForm>
First Name:<br>
<input type="text" name="name_1">
<br>
Second Name:<br>
<input type="text" name="name_2">
<br>
Phone Number:<br>
<input type="text" name="phone">
<br>
Age:<br>
<input type="number" name="age">
<br>
How did they hear about us?:<br>
<input type="text" name="channel">
<br><br>
<input type="submit" value="Add Customer" class ="submit"
onclick="google.script.run
.withSuccessHandler(google.script.host.close)
.customerAdd(this.parentNode)" />
</customerForm>
</html>
I've scoured stackoverflow for almost every solution:
I am running two pop ups so I changed the function names based on the advice here
I tried to use the '''document.forms[0]''' method found here also didn't work
What am I missing?
onClick on Google Script working for HTML Form
GS:
function registerCustomer() {
var html = HtmlService.createHtmlOutputFromFile('ah2')
SpreadsheetApp.getUi().showModelessDialog(html, 'Add Customer');
}
function customerAdd(obj) {
var ss = SpreadsheetApp.getActive();
var sh=ss.getSheetByName('Sheet15');
sh.appendRow(["", obj.name_1, obj.name_2, obj.phone, obj.age, obj.channel]);
return true;
}
html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<form>
First Name:<br>
<input type="text" name="name_1" />
<br>
Second Name:<br>
<input type="text" name="name_2"/>
<br>
Phone Number:<br>
<input type="text" name="phone"/>
<br>
Age:<br>
<input type="number" name="age"/>
<br>
How did they hear about us?:<br>
<input type="text" name="channel"/>
<br><br>
<input type="button" value="Add Customer" onClick="addCust(this.parentNode);" />
</form>
<script>
function addCust(obj) {
google.script.run
.withSuccessHandler(function(){google.script.host.close();})
.customerAdd(obj);
}
</script>
</body>
</html>
I am trying to make a spreadsheet sidebar that allows a user to input data to create records, as well as edit them. So far I understand how to create the sidebar and display it. I've got a working form that can submit values.
What I am struggling with is how to pre-populate the forms. Form instance some records are associated with others, and I'd like to have a hidden field to store and eventually submit the associated id. Eventually users should also be able to edit records and I'd like to use the same form and just populate the fields and reuse the same submission flow.
I've tried a few different things found on here and other places, but nothing seems to work.
Here is the HTML for the sidebar template
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<!-- The CSS package above applies Google styling to buttons and other elements. -->
<style>
</style>
<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);
$('#accountId').val(<? data.accountId ?>);
function handleFormSubmit(formObject) {
google.script.run.withSuccessHandler(alertSuccess).createContact(formObject);
}
function alertSuccess(message) {
var div = document.getElementById('alert');
div.innerHTML = "<p>" + message + "</p>";
google.script.host.close();
}
</script>
</head>
<body>
<p>Enter Contact Info</p>
<form id="contact" onsubmit="handleFormSubmit(this)">
Account Id: <br>
<input type="number" name="accountId" value="0" id="accountId" /><br>
Name:<br>
<input type="text" name="name"/><br>
Phone Number:<br>
<input type="text" name="phone"/><br>
Email:<br>
<input type="email" name="email"/><br>
Contact Type:<br>
<input type="radio" name="type" value="emergency" checked> Emergency<br>
<input type="radio" name="type" value="guardian" checked> Guardian<br>
<input type="radio" name="type" value="other" checked> Other<br>
<input type="submit" value="Submit" />
</form>
<div id="alert"></div>
</body>
</html>
And the accompanying .gs file:
var AlternativeContact = ObjectModel("AlternativeContacts");
function newContact() {
var htmlOutput = HtmlService.createTemplateFromFile("new_contact");
var id = ACCOUNT_MANAGER.getRange("M4").getValue();
htmlOutput.data = {accountId: id};
UI.showSidebar(htmlOutput.evaluate());
}
function createContact(contactJSON) {
var newContact = new AlternativeContact(contactJSON);
newContact.save();
return "Success!";
}
The first line that uses ObjectModel is creating and ORM around the data sheet.
Thanks for the help!
Couple changes and it seems to be working in a basic way.
First, in the scriptlet, i needed to us the printing tag. so use in stead of . This was causing the value to not be used in the rendered template.
Second, I changed my jQuery to:
$(document).ready(function () {
$("input#accountId").val(<?= data.accountId ?>);
});
If anyone is able to answer, I'd be curious why using the $(document).ready is needed. Doesn't everything in the get run? is it an order of operation thing?
i am trying to assign a textbox value to a php variable now problem is i want one button to work for two different pages i.e if i enter in a text box 'a'and click on button it should redirect to 'a.php' page if i write in a text box 'b' it should redirect to 'b.php'.
so one textbox,one button two different pages.
Code :
<html><head>
<meta charset="UTF-8" />
<script>
function submitForm(action)
{
document.getElementById('a').action = action;
document.getElementById('a').submit();
}
function submitForm1(action)
{
document.getElementById('b').action = action;
document.getElementById('b').submit();
}
</script>
</head>
<body >
<h3><font face="verdana" size="3"><b>Enter Text:</b></h3>
<input type="text" align="right" style="font-size:15pt;height:32px;"><br><br>
<form action="b.php" name="b" id="b" method="post">
<form action="a.php" name="a" id="a" method="post">
<input type="submit" onclick="submitForm('a.php')" value="TRY" name="a">
<input type="button" onclick="submitForm1('b.php')" value="TRY" name="b">
</form>
</form>
</body>
</html>
You can change the action onsubmit based on the text inside the input.
<html>
<head>
<script type="text/javascript">
function onsubmit_handler(){
var myForm = document.getElementById('myForm');
var data = document.getElementById('data').value;
if(data == "a")
myForm.setAttribute('action', 'a.php');
else if(data == "b")
myForm.setAttribute('action', 'b.php');
else
myForm.setAttribute('action', 'error.php');
}
</script>
</head>
<body>
<h3>Enter Text:</h3>
<form id="myForm" method="post" onsubmit="onsubmit_handler()">
<input type="text" id="data" name="data" value="">
<input type="submit" value="Post">
</form>
</body>
</html>
Test code here : http://jsfiddle.net/Eg9S4/
use this codes buddy
<html><head>
<meta charset="UTF-8" />
<script>
function submitForm()
{
var link=document.getElementById('a');
var str1 = "a.php";
var n = str1.localeCompare(link);
if(n==1)
{
window.open("main.html");
}
else if(n==-1)
{
window.open("index.html");
}
}
</script>
</head>
<body >
<h3><font face="verdana" size="3"><b>Enter Text:</b></h3>
<input type="text" align="right" style="font-size:15pt;height:32px;"><br><br>
<input type="submit" onclick="submitForm()" value="TRY" name="a">
</form>
</form>
</body>
</html>
The problem looks to be that you're using getElementById but the input elements don't have an ID (they only have a name).
I'd also recommend attaching an onSubmit event to the form and removing the onClick events from the buttons.
Edit: After looking at the code in detail I saw that there were some other issues that were probably hindering the opersation. The most notable one was that you can't nest form tags. There were some other CSS and validation issues.
Here is some working code:
Test Page
function SubmitForm(el) {
// Get the form element so that we can set the action later
var form = document.getElementById('theForm');
// Set the action for the form based on which button was clicked
if (el.id == "A")
form.action = "a.php";
if (el.id == "B")
form.action = "b.php";
// You dont need to submit the form. It's alreasdy happening, so there is no need for an explicit call.
}
</script>
<h3 style="font-family: Verdana; font-weight: bold;">Enter Text:</h3>
<input type="text" style="font-size:15pt;height:32px;"><br><br>
<form method="post" onsubmit="SubmitForm();" action="fake.html" id="theForm">
<input type="submit" id="A" value="A" onclick="SubmitForm(this);">
<input type="submit" id="B" value="B" onclick="SubmitForm(this);">
</form>