I'm new with Google-Sheet and I didn't use Javascript for a few years.
I'm trying to create a form that can write some data in a sheet. My form looks OK. But when I click the submit button, the form disappear and nothing happens on my sheet. My browser display just an blank tab.
For now, I tried to make work a form with a single input but nothing works. I don't see any error msg in my browser...
I have ( my .gs) :
function doGet(request) {
return HtmlService.createHtmlOutputFromFile('HTMLForm');
}
function processForm(form) {
var url = "https://docs.google.com/spreadsheets/d/1dEJEuWmG-4Z2geqz9LroTsIbq6LwMSZgVft5uo5vQxw/edit#gid=0";
var sheet = SpreadsheetApp.openByUrl(url);
var x = sheet.getSheetByName("DATA");
x.appendRow([form.Thing_ID]);
}
And my form :
<!DOCTYPE html>
<html>
<script>
function mySubmit(form) {
google.script.run.processForm(form);
document.getElementById("myForm").reset();
}
</script>
<head>
<base target="_top">
</head>
<body>
<form id="myForm" onsubmit="mySubmit(this)">
<label>Thing's ID</label>
<input type="text" id="Thing_ID" placeholder="ID" required/>
<button type="submit"id="submit">Submit</button>
</form>
</body>
</html>
I need that the value I type in the input is written in my spreadsheet (sheet "DATA"). If you could tell me what function I missed/missused.
Thanks
Related
Situation:
The input value is empty and the type is hidden.
I type ?hiddenname=007 at url
I click the button"submit" and cause function call()..
Expect:
The system fills in the value into the input according to ?hiddenname=007 at url using function call()
after that, the system send the form with value 007 to the server.
Current result:
the system still send the form with empty value.
url
localhost/index.html?hiddenname=007
index.html
<!DOCTYPE html>
<html>
<head>
<script>
function call(){
document.forms["form1"].hiddenname.value=hiddenname;
console.log("function run");
}
</script>
</head>
<body>
<form name="form1" action="end.php">
<input type="hidden" id="hiddenid" name="hiddenname" value="" />
<input type="submit" id="send" onclick="call()"/>
</form>
</body>
end.php
<?php
echo $_GET['hiddenname'];
?>
This will obtain on window load the value of hiddenname from the URL query string, then set the value of the hiddenid input:
window.onload = function () {
// get the search params from the window's URL
const urlParams = new URLSearchParams(window.location.search);
// get the value of 'hiddenname'
const myParam = urlParams.get('hiddenname');
// store this value in the input with id="hiddenid"
document.getElementById('hiddenid').value = myParam;
};
Add return true; to the call() function.
Add onsubmit="return call();" to the form attributes.
And remove onclick function from the submit button.
I've created a pop-up email dialog box within google's html editor as follows with the input for email as follows:
<input type="email" name="email" class="form-control" id="mail" aria-describedby="emailHelp" value="">
In my .gs file I'm storing the value of my cell containing the email address I want to use as follows:
function getEmail()
{
var s=SpreadsheetApp.getActive().getSheetByName("Template");
var row=15;
var column=3;
var contactAddress=Utilities.formatString('%s',s.getRange(row, column).getValue());
Logger.log(contactAddress);
}
This works fine and is capturing the email address correctly and logging it. I now need to change the 'value' of my email input so that it populates with this address when the diolog opens. So I have the following in my HTML file:
window.onload = function (contactAddress)
{
document.getElementById('mail').value=contactAddress;
}
However, this is resulting in '[object Event]' being populated. I feel I'm close here but can't quite get it over the line!!!!
UPDATE:
So I added this to my .gs:
function showDialog() {
var html = HtmlService.createHtmlOutputFromFile('emailTemplate')
.setWidth(800)
.setHeight(500);
html.myvar = new getEmail();
html.evaluate().getContent();
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.showModalDialog(html, ' ');
}
However, when I run the script I get an error stating Object does not allow properties to be added or changed.
Edit: Original answer deleted.
So here is my answer to your problem. Tested it out, and it works.
My HTML page is set up like this just to test it:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function onSuccess(contact) {
//var contactAddress = google.script.run.getEmail();
document.getElementById('mail').value=contact;
}
google.script.run.withSuccessHandler(onSuccess).getEmail();
</script>
</head>
<body>
<input type="email" name="email" class="form-control" id="mail" aria-describedby="emailHelp" value="">
</body>
</html>
My .gs file contains
function getEmail()
{
var s=SpreadsheetApp.getActive().getSheetByName("Sheet1");
var row=1;
var column=3;
var contactAddress=Utilities.formatString('%s',s.getRange(row, column).getValue());
Logger.log(contactAddress);
return contactAddress;
}
The only real difference is that I added a return statement (and changed the row from 15 to 1 for my test).
Seems the main problem was how you were calling the function on the HTML page. It needed a google.script.run.withSuccessHandler() call instead of a window.onload = function() call.
I'm new the JS and I'm having trouble storing and find the value of a form submission. I'm able to create a simple form (as shown below) but I'm not able to find the value of the submission to store for use later.
I thought I was able to access the for value here var number = document.getElementById('fib-form-number'); but I seem to have done something wrong.
I looked at this post here but that has not seemed to work.
I know the fix is going to be easy .. but I just can't figure it out.
Thanks,
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form/title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="../static/js/jquery.min.js"></script>
<script type="text/javascript" src="../static/js/index.js"></script>
</head>
<body>
<!-- <input id="input" type="submit" value="Submit" onclick="return submitted();"> -->
<!-- Use form to capture numbers on submission -->
<form id="fib-form">
<input type="number" id="fib-form-number" min="1">
<button type="submit">Submit</button>
</form>
</body>
</html>
JS
// Get value of submission
$(document).ready(function() {
var form = document.getElementById('fib-form');
var number = document.getElementById('fib-form-number');
// Now get the value of the submission
form.onsubmit = function () {
var variable = number.value;
console.log(variable)
}
});
You're misspelling variable:
var variable = number.value;
console.log(varaible)
But you could also use jQuery since you're already using it:
$(document).ready(function() {
var form = $('fib-form');
var number = $('fib-form-number');
// Now get the value of the submission
form.onsubmit = function () {
var variable = number.val();
console.log(variable)
}
});
I have a very simple web form containing two input fields and a submit button.
What I would like to do is save the two strings inserted and redirect to my other HTML file (which is in the same folder).
HTML:
<!DOCTYPE html>
<html>
<title>Players enter</title>
<head>
<script type="text/javascript" src="ticTac.js"></script>
<link rel="stylesheet" type="text/css" href=styleSheet.css></link>
</head>
<body>
<form >
player one name: <input type="text" id="firstname"><br>
player two name: <input type="text" id="secondname"><br>
<input type="submit" onclick="checkNames();"/>
</form>
</body>
</html>
JavaScript:
function checkNames(){
var nameOne = document.getElementById("firstname").value;
var nameTwo = document.getElementById("secondname").value;
//window.location.href = 'C:\Users\x\Desktop\hw3\tic\Game.html';
//window.location.replace("C:\Users\x\Desktop\hw3\tic\Game.html");
window.location.assign("C:\Users\x\Desktop\hw3\tic\Game.html");
}
I have commented the two other options I tried which also do not work.
You are using an HTML form... this means that your submit button will fire and try to submit your form.
In order to prevent this, you need to prevent that event from triggering. A simple modification to your JavaScript function should do the trick.
function checkNames() {
event.preventDefault();
var nameOne = document.getElementById("firstname").value;
var nameTwo = document.getElementById("secondname").value;
window.location.href = 'SOME-PATH/Game.html';
}
To redirect to a page in your computer you can use:
window.location.href = 'file:///C:/Users/x/Desktop/hw3/tic/Game.html';
There are more than one way of passing the values to another page. Here is an example using query string.
In the page that has the values.
var q = '?nameOne=' + encodeURI(nameOne) + '&nameTwo=' + encodeURI(nameTwo)
window.location.href = 'file:///C:/Users/x/Desktop/hw3/tic/Game.html' + q;
In the page receiving the values.
var nameOne = location.search.slice(1).split("&")[0].split("=")[1];
var nameTwo = location.search.slice(1).split("&")[1].split("=")[1];
Use
window.location="url";
Because of a Flex bug uploading files in a secure environment, I'm attempting to hack together a workaround for this in javascript.
To do so, I'm attempting to create a hidden form in javascript, to which I'll attach a file and some xml meta data, then send it to the server in a multipart form post. My first thought is to get this to work in HTML and then port this javascript code into my Flex project.
My first problem is attaching the file to the hidden form in javascript. I'm doing something wrong here. I'm pretty inexperienced with javascript so if there's a better way to do this, I'm eager to learn.
Here's the code I'm current playing with.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>hidden form post demo</title>
</head>
<body>
<script>
//helper function to create the form
function getNewSubmitForm(){
var submitForm = document.createElement("FORM");
document.body.appendChild(submitForm);
submitForm.method = "POST";
submitForm.enctype = "multipart/form-data";
return submitForm;
}
//helper function to add elements to the form
function createNewFormElement(inputForm, inputType, elementName, elementValue) {
var inputElement = document.createElement("INPUT");
inputElement.name = elementName;
inputElement.type = inputType;
try {
inputElement.value = elementValue;
} catch(err) {
alert(err.description);
}
inputForm.appendChild(inputElement);
return inputElement;
}
//function that creates the form, adds some elements
//and then submits it
function createFormAndSubmit(){
var submitForm = getNewSubmitForm();
var selectedFileElement = document.getElementById("selectedFile");
var selectedFile = selectedFileElement.files[0];
createNewFormElement(submitForm, "HIDDEN", "xml", "my xml");
createNewFormElement(submitForm, "FILE", "selectedFile", selectedFile);
submitForm.action= "my url";
submitForm.submit();
}
</script>
<div id="docList">
<h2>Documentation List</h2>
<ul id="docs"></ul>
</div>
<input type="file" value="Click to create select file" id="selectedFile"/>
<input type="button" value="Click to create form and submit" onclick="createFormAndSubmit()"/>
</body>
</html>
You can see, I have a try/catch block in createNewFormElement. An exception is being thrown there, but the message says "undefined".
In FireBug, I can see that the elementValue is set to a File object, so I'm not really sure what's going on.
For security reasons, you cannot set the value attribute of an input[type=file]. Your current code doesn't need JavaScript, and can be written using pure HTML:
<form method="post" enctype="multipart/form-data" action="myurl">
<input type="file" value="Click to create select file" name="selectedFile" />
<input type="hidden" name="xml" value="my xml" />
<input type="submit" value="Click to create form and submit" />
</form>
If you want to, it's possible to dynamically add additional non-file form elements, by binding an event to the onsubmit handler.
<form ... onsubmit="addMoreinputs();" id="aForm">
...
<script>
function addMoreInputs(){
var form = document.getElementById("aForm");
// ...create and append extra elements.
// once the function has finished, the form will be submitted, because
// the input[type=submit] element has been clicked.
}
add
var dom=document.getElementById("formdiv");
dom.appendChild(submitForm);
in your createFormAndSubmit function.
and add <div id="formdiv" /> on your page.