Sending information to a Google spreadsheet using JavaScript executed in a web browser

Currently, I am developing a web application that requires the user to be able to upload data directly to their own Google spreadsheet.

Initially, I attempted to utilize the Google APIs Client Library for JavaScript but found that it does not include support for the Spreadsheet API (https://developers.google.com/apis-explorer/#p/).

Subsequently, I opted to work with the Google Spreadsheets API version 3.0 directly. Using jQuery and JSONP, I successfully fetched the user's spreadsheets:

$.ajax({
  url: 'https://spreadsheets.google.com/feeds/spreadsheets/private/full?alt=json-in-script&access_token=' + access_token,
  dataType: 'JSONP',
  success: function(data){
    // use the retrieved spreadsheets
  }
});

Following this approach, I also managed to retrieve the sheets within the chosen spreadsheet. However, when attempting to send data to the selected sheet using POST, I encountered an issue due to the limitations of JSONP. Additionally, it appears that the Google server does not support CORS. The browser error message received is as follows:

XMLHttpRequest cannot load https://spreadsheets.google.com/feeds/... Origin ..mysite.. is not allowed by Access-Control-Allow-Origin.

Any insights or solutions you can provide would be greatly appreciated. Thank you for your assistance in resolving this matter.

Answer №1

Easy-to-follow guidelines accompanied by images

Upon reviewing Martin Hawskey's initial informative guide on transferring data from an HTML form to a Google Spreadsheet, we identified a few gaps and assumptions. This led us to produce a comprehensive tutorial filled with detailed step-by-step instructions, which has proven beneficial for several individuals:

https://github.com/dwyl/html-form-send-email-via-google-script-without-server

The script records all information submitted via HTTP POST in the Google Spreadsheet and can also send the data to an email address if desired. (particularly useful for receiving notifications of new data entries)

HTML Form:

Outcome (data entry on spreadsheet):

We trust that this resource will prove valuable to others.

Answer №2

I spent the last 8 months researching a solution for this issue and finally came across an insightful blog post by Martin Hawskey. Following his instructions, I was able to successfully set up an HTML form that posts data to a spreadsheet.

The trick is to create a published web app within the spreadsheet to receive the data and avoid CORS issues by targeting a hidden iframe on the page. While the code is too lengthy to replicate here, you can find it in the post linked above.

DEMO

If you're just starting out, consider setting up a PHP server for easier and more flexible data posting. Personally, I now use Zend GData at work and wish I had discovered it sooner.

EDIT

Martin Hawskey has recently updated the method to support AJAX submission without the need for a hidden iframe. You can learn more about it here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating React props using useState?

Below is a component that aims to enable users to update the opening times of a store. The original opening times are passed as a prop, and state is created using these props for initial state. The goal is to use the new state for submitting changes, while ...

Delay showing the div until it has finished loading

<section class="slideshow" id="slideshow"> <div id="slides"> <div class="slides-container"> <div class="slide"> <img src="img/people.jpeg" alt="Cinelli"> </div> < ...

Encountering an issue while implementing a fresh design using Material-UI Version 5 and React Version 18.01 - Specifically facing problems with the '@mui/styles' package

Hi there! I am currently working with react V.18.01 and Material-ui v.5 for my application development, but encountered an error that I need assistance with. Being a beginner developer, I would greatly appreciate a code review to help me understand the iss ...

Discover the method for creating URLs that are relative to the specific domain or server on which they are hosted

I need to adapt my menu bar to cater for different server environments: <a href="http://staging.subdomain.site.co.uk/search/page">Menu</a> The main source site is hosted on an external subdomain from an API service, and I want the URLs in my ...

Error encountered during module build in Vue loader version 17.0.0 with Webpack version 5.74.0

I am encountering an issue while trying to integrate vue-loader into my SPA VUE APP. The error message I'm receiving is as follows: ERROR in ./app2.vue Module build failed (from ./node_modules/vue-loader/dist/index.js): TypeError: Cannot read prope ...

Learn how to implement Basic Authentication in your Express application using the express-basic-auth package. You can easily trigger login and logout

When it comes to logging out a user who has logged in using basic Auth, I am exploring different options by consulting various sources like: link1 link2 In my application, I have implemented express-basic-auth to secure certain routes. Here is an example ...

Negatives of utilizing two different UI libraries within a single react project?

I have been contemplating a decision that may be considered unconventional from a technical standpoint. Despite my search efforts, I have not come across any explanation regarding the potential drawbacks of this decision. Imagine creating a React website ...

Creating a search operation to target a particular element within an array of objects

Struggling with setting up a query that involves an array of objects within a specific index. My Schema includes a field that consists of an array of objects: {userID: ObjectID, someArray: [{foo: "bar"},{bar: "foo"}]} I am interested in retrieving record ...

Barrier Preventing My Access to the Page

Currently, I am working on a vue page that includes a navigation-guard. This particular page serves as an 'Update Details' section where I have implemented the use of beforeRouteLeave. The purpose of this setup is to display a warning modal if an ...

Setting up Webpack and Babel for ReactJS development

Recently, I started delving into the world of ReactJS and stumbled upon a tool called webpack which acts as a module bundler. However, I've hit a roadblock while configuring it and keep encountering the following error message: ERROR in ./src/index. ...

Can anyone suggest a solution to troubleshoot this issue with CSS Flexbox and absolute positioning?

I'm currently developing a React application featuring flex container cards (referred to as .FilmCard with movie poster backgrounds) within another flex container with flex-wrap. Each card has an item positioned absolutely (an FontAwesome arrow icon). ...

A collection of 64-bit integer values stored in a Hashtable

I am in search of a solution to enable O(1) lookup for binary quadkeys I understand that true hashtables do not exist in JavaScript, and the alternative is using objects with o(1) lookup using their properties. However, the issue lies in the fact that the ...

What is the best way to establish a global database connection in express 4 router using express.Router()?

Is there a way to pass a global variable in Node.js from a file to a module? I have been attempting to do so with a 'db' variable that represents a MongoDB connection. I tried copying the content of my file for the connections, but it didn't ...

What is the most effective method for obtaining only the "steamid" from an AJAX request (or any other method)?

I have been attempting to extract only the "steamid" from an AJAX link without success. Could someone please provide some assistance? Here is the link to find and retrieve only the "steamid": here This is the code I have tried: var xhttp = new XMLHt ...

Unexpected response from http.request in NodeJS

When using the http.request module, I encountered a strange issue. My goal is to write a web crawler in NodeJS to fetch and parse data from this webpage. However, the response provided by http.request does not match the HTML rendered by Chrome. Below is ...

How to retrieve the present value from an array using AngularJS

Struggling to assign the current user from my list Here is my array after submitting the form [{"name":"Erich","surname":"Josh","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="096c67497a7a276a6664">[email prot ...

How can a JavaScript array be transmitted as a JSON value?

Is there a method to pass a JavaScript array as a JSON variable in my AJAX query? ...

What is the best way to save the city name received from geolocation into a variable and then make an AJAX request?

<script> new Vue({ el: '#fad' , data: { data: {}, }, mounted() { var self = this; navigator.geolocation.getCurrentPosition(success, error); function success(position) { var GEOCO ...

Error: Import statement is not allowed outside a module while running on live server

//this is the Greetings.js file import React from "react"; function DisplayGreetings() { return ( <div><h1>Welcome</h1></div> ) } export default DisplayGreetings //This is the Main.js file import React,{Compone ...

When the onclick event is triggered, the return value will execute after the onclient

After my onclientclick event finishes, I am trying to run my onclick event. However, regardless of whether my checkbox is selected or not, the program keeps prompting me to "Please select at least one to delete." Can anyone help me figure out why this is h ...