App script: Extracting HTML form data from a web application

Question

App script: Extracting HTML form data from a web application

I have been trying to work on a script that involves taking input from an HTML form and processing that data in order to populate a Google Sheet. Unfortunately, I haven't had much success with it so far. Here is the code I have been working on:

Index.html

<form id="Form" onsubmit="event.preventDefault(); 
google.script.run.getData(this)">
  <input type="text" name="firstname">
  <input type="submit">
</form>

Code.gs

function getData(data) {
    var sheet= SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Logs');
    sheet.getCurrentCell().setValue(data.name);
}

I am having trouble figuring out what's not working correctly. Can anyone help me identify the issue?

html forms google-apps-script google-sheets web-applications

Answer 1

Answer №1

Your code is facing an issue due to the absence of a name member/key in your data. Consequently, you are assigning a null value to the current cell, leading to an empty cell value.

Example Code:

function getData(data) {
  Logger.log(data)
  Logger.log(data.name)
  var sheet= SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Logs');
  sheet.getCurrentCell().setValue(data.firstname);
}

Execution Records:

https://i.stack.imgur.com/a33wp.png

Result:

https://i.stack.imgur.com/6QrD3.png

In this instance, the active cell is located at position A1

Answer 2

Your code is facing an issue due to the absence of a name member/key in your data. Consequently, you are assigning a null value to the current cell, leading to an empty cell value.

Example Code:

function getData(data) {
  Logger.log(data)
  Logger.log(data.name)
  var sheet= SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Logs');
  sheet.getCurrentCell().setValue(data.firstname);
}

Execution Records:

https://i.stack.imgur.com/a33wp.png

Result:

https://i.stack.imgur.com/6QrD3.png

In this instance, the active cell is located at position A1

Answer 3

Answer №2

For a practical example, please refer to the official documentation. If you have a form that you submit, it may not be aware of which cell is currently active. In such cases, consider replacing getCurrentCell() with either getRange() or appendRow().

Additional Resources

appendRow - Utilize this method by executing appendRow([formObject.name])
getRange - Use in conjunction with getLastRow() to update the cell's value accordingly

Answer 4

For a practical example, please refer to the official documentation. If you have a form that you submit, it may not be aware of which cell is currently active. In such cases, consider replacing getCurrentCell() with either getRange() or appendRow().

Additional Resources

appendRow - Utilize this method by executing appendRow([formObject.name])
getRange - Use in conjunction with getLastRow() to update the cell's value accordingly

App script: Extracting HTML form data from a web application

Answer №1

Example Code:

Execution Records:

Result:

Answer №2

Similar questions

Mastering Yii2: Implementing Javascript Functions such as onchange() in a View

Obtaining Google AAID Using a Mobile Browser (JavaScript)

Challenges with fading images using jQuery

What are the possible complications that could arise from implementing this system for designing web pages?

JS/Apps Script: Passing object and its keys as function parameters

I am seeking to showcase an image in a window, and upon the image being clicked, execute the code in a separate window

Is the initial carousel element failing to set height to 100% upon loading?

Creating a Rails application that dynamically fills a table with data from a

What is the reason for multiple ajax functions being triggered when submitting a form through ajax?

Step-by-step guide to creating a transition effect when the input changes

SVG: Altering the dy attribute has no impact on the overall height of the bounding rectangle for the parent text

"Exploring the Art of Showcasing Duplicate Image Count from User Input in an

Enhance your data retrieval from XPATH using Javascript

Animation effect in Jquery failing to execute properly within a Modal

Maintain the scrollable feature of the element until the final content is reached

Utilize API to import sunrise and sunset times based on specific coordinates directly into a Google Sheet

Automatically navigate through form fields using jQuery when pasting data

Eliminate the CSS triggered by a mouse click

Ways to incorporate a scroll feature and display an iframe using JQuery

Several features - Second function malfunctioning