Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fixing response view in frontend JS #48

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

fixing response view in frontend JS #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f83efab
add response.json() to promise chain so response looks as intended
sashn Apr 20, 2021
d8d9889
Update README.md
sashn Apr 20, 2021
c8580b2
Update README.md
sashn Apr 20, 2021
3697f5c
Update README.md
sashn Apr 20, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 7 additions & 13 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
|---|:---------:|:-----:|:-:|:---:|
| 1 | timestamp | email | | |

> To learn how to add additional input fields, [checkout section 7 below](#7-adding-additional-form-data).
> To learn how to add additional input fields, [checkout section 6 below](#6-adding-additional-form-data).

## 2. Create a Google Apps Script

Expand Down Expand Up @@ -74,14 +74,7 @@ function doPost (e) {
- You should see a dialog that says `Hi {Your Name}`, `Submit Form to Google Sheets wants to`...
- Click `Allow`

## 4. Add a new project trigger
- Click on `Edit > Current project’s triggers`.
- In the dialog click `No triggers set up. Click here to add one now.`
- In the dropdowns select `doPost`
- Set the events fields to `From spreadsheet` and `On form submit`
- Then click `Save`

## 5. Publish the project as a web app
## 4. Publish the project as a web app

- Click on `Publish > Deploy as web app…`.
- Set `Project Version` to `New` and put `initial version` in the input field below.
Expand All @@ -93,7 +86,7 @@ function doPost (e) {

> **IMPORTANT!** If you have a custom domain with Gmail, you _might_ need to click `OK`, refresh the page, and then go to `Publish > Deploy as web app…` again to get the proper web app URL. It should look something like `https://script.google.com/a/yourdomain.com/macros/s/XXXX…`.

## 6. Input your web app URL
## 5. Input your web app URL

Open the file named `index.html`. On line 12 replace `<SCRIPT URL>` with your script url:

Expand All @@ -110,6 +103,7 @@ Open the file named `index.html`. On line 12 replace `<SCRIPT URL>` with your sc
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => response.json())
.then(response => console.log('Success!', response))
.catch(error => console.error('Error!', error.message))
})
Expand All @@ -118,11 +112,11 @@ Open the file named `index.html`. On line 12 replace `<SCRIPT URL>` with your sc

As you can see, this script uses the the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API), a fairly new promise-based mechanism for making web requests. It makes a "POST" request to your script URL and uses [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) to pass in our data as URL paramters.

Because Fetch and FormData aren't fully supported, you'll likely want to include their respective polyfills. [See section #8](#8-related-polyfills).
Because Fetch and FormData aren't fully supported, you'll likely want to include their respective polyfills. [See section #7](#7-related-polyfills).

> **Fun fact!** The `<html>`, `<head>`, and `body` tags are actually among a handful of optional tags, but since the [rules around how the browser parses a page are kinda complicated](https://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#optional-tags), you'd probably not want to omit them on real websites.

## 7. Adding additional form data
## 6. Adding additional form data
To capture additional data, you'll just need to create new columns with titles matching exactly the `name` values from your form inputs. For example, if you want to add first and last name inputs, you'd give them `name` values like so:

```html
Expand All @@ -140,7 +134,7 @@ Then create new headers with the exact, case-sensitive `name` values:
|---|:---------:|:-----:|:---------:|:--------:|:---:|
| 1 | timestamp | email | firstName | lastName | |

## 8. Related Polyfills
## 7. Related Polyfills
Some of this stuff is not yet fully supported by browsers or doesn't work on older ones. Here are some polyfill options to use for better support.

- [Promise Polyfill](https://github.com/taylorhakes/promise-polyfill)
Expand Down
1 change: 1 addition & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => response.json())
.then(response => console.log('Success!', response))
.catch(error => console.error('Error!', error.message))
})
Expand Down