Keep track of the user's email address as they complete the form

Question

Keep track of the user's email address as they complete the form

I currently use a Google Form to gather information from employees who work in remote locations

Emp No *
Punch *
Customer details / mode or travel

All the data collected is stored in a Google spreadsheet structured as follows:

Timestamp   Emp No  Punch   Remark  Name    GeoCode GeoAddress  Email

With a certain script, I am able to capture the GPS coordinates of the users. I created a web app where anyone, even without an account, can access it and click the link.

However, there are a few issues I am facing:

I wish to store the email ID (or employee number) of the user filling out the form. Unfortunately, the email ID does not get captured. It only works when I fill out the form myself. How can I capture this information for all users without requiring them to authenticate the script?

If the GPS information is missing (empty), I want to display a different message on the HTML page. Is there a way to do this?

Below is the relevant code:

function doGet() {
    return HtmlService.createHtmlOutputFromFile("Index");
}
//
function getLoc(value) {
  var destId = FormApp.getActiveForm().getDestinationId() ;
  var ss = SpreadsheetApp.openById(destId) ;
  var respSheet = ss.getSheetByName("Location");
  var numResponses = respSheet.getLastRow();
  var currentemail = Session.getActiveUser().getEmail();
  var c=value[0]; var d=value[1];
  var e=c + "," + d ;
  //respSheet.getRange(numResponses,6).setValue(e);
  //respSheet.getRange(numResponses,8).setValue(currentemail);
  var response = Maps.newGeocoder().reverseGeocode(value[0], value[1]);
  var f= response.results[0].formatted_address;
  //respSheet.getRange(numResponses,7).setValue(f);
  respSheet.getRange(numResponses,6,1,3 ).setValues([[ e, f, currentemail ]]);
}
//

index.html

<!DOCTYPE html>
<html>
<script>
(function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
      }
})()      
function showPosition(position){
 var a= position.coords.latitude;
 var b= position.coords.longitude;
 var c=[a,b]
 getPos(c)
 function getPos(value){
 google.script.run.getLoc(value);
 }
}

</script>
<body>
<p>Please ensure your GPS is on to record your location. You can generate the report from website to check. Pl. close this window (version 3)</p>
</body>
</html>

javascript authentication google-apps-script web-applications

Answer 1

Answer №1

After receiving a query

I am looking to store the email ID (or employee number) of the individual filling out the form. However, I am facing issues with capturing the email ID in the form submission process. Although it works when I fill out the form myself, it does not work for other users. I am seeking a method to capture this information without requiring all users to authenticate the script or be logged in. Is there an alternative approach that can achieve this?

If you are using a web application built with Google Apps Script to automatically retrieve user email IDs, you have the option to configure the application to run as the user executing it rather than yourself. However, if you prefer not to utilize this functionality, then you will need to implement your own authentication mechanism.

Regarding the inquiry raised

In cases where the GPS location is not captured and remains empty, I aim to display a distinct message on the HTML page. How can this be accomplished?

You can address this by employing a JavaScript conditional expression

function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      alert('Can\'t get the position');
    }
})() 

function showPosition(position){
 var a= position.coords.latitude;
 var b= position.coords.longitude;
 var c=[a,b];
 getPos(c);
 function getPos(value){
 google.script.run.getLoc(value);
 }
}

The provided code snippet uses alert, but utilizing the DOM is also an option.

Additional Resources

Answer 2

After receiving a query

I am looking to store the email ID (or employee number) of the individual filling out the form. However, I am facing issues with capturing the email ID in the form submission process. Although it works when I fill out the form myself, it does not work for other users. I am seeking a method to capture this information without requiring all users to authenticate the script or be logged in. Is there an alternative approach that can achieve this?

If you are using a web application built with Google Apps Script to automatically retrieve user email IDs, you have the option to configure the application to run as the user executing it rather than yourself. However, if you prefer not to utilize this functionality, then you will need to implement your own authentication mechanism.

Regarding the inquiry raised

In cases where the GPS location is not captured and remains empty, I aim to display a distinct message on the HTML page. How can this be accomplished?

You can address this by employing a JavaScript conditional expression

function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      alert('Can\'t get the position');
    }
})() 

function showPosition(position){
 var a= position.coords.latitude;
 var b= position.coords.longitude;
 var c=[a,b];
 getPos(c);
 function getPos(value){
 google.script.run.getLoc(value);
 }
}

The provided code snippet uses alert, but utilizing the DOM is also an option.

Additional Resources

Answer 3

Answer №2

Successfully created a comprehensive solution using only HTML, without relying on Google Forms. Also implemented an alert message functionality. However, the "Login" feature is still non-functional.

Code.gs

This script executes a form and stores the responses in designated columns within a Google Sheet. It offers faster performance compared to Google Forms, requiring only one click on the "Submit" button. The use of "append row" prevents data jumbling between rows, eliminating previous issues with data consistency.


/* @Include JavaScript and CSS Files */
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
  .getContent();
}

/* @Process Form */
function processForm(formObject) {
  var url = "https://docs.google.com/spreadsheets/d/...../edit#gid=52499297";
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Location");
  var response = Maps.newGeocoder().reverseGeocode(formObject.lat, formObject.long);
  var address= response.results[0].formatted_address;
  ws.appendRow(
    [
      new Date(),
      formObject.empno,
      formObject.punch,
      formObject.rem,
      "",
      formObject.lat+","+formObject.long,
      address
    ]
  );
}

Index.html

This file contains the survey questions.

<!DOCTYPE html>
<html>

<head>
    <base target="_top">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <?!= include('JavaScript'); ?>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-6">
                <form id="myForm" onsubmit="handleFormSubmit(this);">
                    <p class="h4 mb-4 text-left">Record Attendance and Location</p>

                    <div class="form-group">
                        <label for="empno">Emp No - <a href="https://docs.google.com/spreadsheets/d/1yhcUpfhvyPcWyDkwglJRJwMn7VnBYEHaAjz959JC0wk/edit#gid=0">Click to see list</a></label>
                        <input type="number" class="form-control" id="empno" name="empno"  min="1" max="9999999"  required>
                    </div>

                    <div class="form-group">
                        <label for="punch">Punch (Select one)</label>
                        <select class="form-control" id="punch" name="punch" required>
                            <option selected disabled hidden style='display: none' value=''></option>
                            <option value="In">In</option>
                            <option value="Out">Out</option>
                            <option value="Started">Started</option>
                            <option value="Reached">Reached</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="rem">Remark</label>
                        <input type="text" class="form-control" id="rem" name="rem">
                    </div>


                    <div class="form-group">
                        <input type="hidden" class="form-control" id="lat" name="lat">
                        <input type="hidden" class="form-control" id="long" name="long">
                    </div>

                    <button type="submit" class="btn btn-primary btn-block">Submit</button>
                </form>

                <div id="output"></div>
            </div>
        </div>
    </div>
</body>

</html>

JavaScript.html

This file handles the processing of user responses.

<script>
    function showPosition() {
        navigator.geolocation.getCurrentPosition(showMap);
    }

    function showMap(position) {
        // Get location data
        var lat = position.coords.latitude;
        var geo1 = document.getElementById("lat");
        geo1.value = lat;
        var long = position.coords.longitude;
        var geo2 = document.getElementById("long");
        geo2.value = long;
    }

    // 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);
    window.addEventListener('load', showPosition);

    function handleFormSubmit(formObject) {
        google.script.run.processForm(formObject);
        document.getElementById("myForm").reset();
        alert('Data saved successfully');
        
    }
</script>

Answer 4

Successfully created a comprehensive solution using only HTML, without relying on Google Forms. Also implemented an alert message functionality. However, the "Login" feature is still non-functional.

Code.gs

This script executes a form and stores the responses in designated columns within a Google Sheet. It offers faster performance compared to Google Forms, requiring only one click on the "Submit" button. The use of "append row" prevents data jumbling between rows, eliminating previous issues with data consistency.


/* @Include JavaScript and CSS Files */
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
  .getContent();
}

/* @Process Form */
function processForm(formObject) {
  var url = "https://docs.google.com/spreadsheets/d/...../edit#gid=52499297";
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Location");
  var response = Maps.newGeocoder().reverseGeocode(formObject.lat, formObject.long);
  var address= response.results[0].formatted_address;
  ws.appendRow(
    [
      new Date(),
      formObject.empno,
      formObject.punch,
      formObject.rem,
      "",
      formObject.lat+","+formObject.long,
      address
    ]
  );
}

Index.html

This file contains the survey questions.

<!DOCTYPE html>
<html>

<head>
    <base target="_top">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <?!= include('JavaScript'); ?>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-6">
                <form id="myForm" onsubmit="handleFormSubmit(this);">
                    <p class="h4 mb-4 text-left">Record Attendance and Location</p>

                    <div class="form-group">
                        <label for="empno">Emp No - <a href="https://docs.google.com/spreadsheets/d/1yhcUpfhvyPcWyDkwglJRJwMn7VnBYEHaAjz959JC0wk/edit#gid=0">Click to see list</a></label>
                        <input type="number" class="form-control" id="empno" name="empno"  min="1" max="9999999"  required>
                    </div>

                    <div class="form-group">
                        <label for="punch">Punch (Select one)</label>
                        <select class="form-control" id="punch" name="punch" required>
                            <option selected disabled hidden style='display: none' value=''></option>
                            <option value="In">In</option>
                            <option value="Out">Out</option>
                            <option value="Started">Started</option>
                            <option value="Reached">Reached</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="rem">Remark</label>
                        <input type="text" class="form-control" id="rem" name="rem">
                    </div>


                    <div class="form-group">
                        <input type="hidden" class="form-control" id="lat" name="lat">
                        <input type="hidden" class="form-control" id="long" name="long">
                    </div>

                    <button type="submit" class="btn btn-primary btn-block">Submit</button>
                </form>

                <div id="output"></div>
            </div>
        </div>
    </div>
</body>

</html>

JavaScript.html

This file handles the processing of user responses.

<script>
    function showPosition() {
        navigator.geolocation.getCurrentPosition(showMap);
    }

    function showMap(position) {
        // Get location data
        var lat = position.coords.latitude;
        var geo1 = document.getElementById("lat");
        geo1.value = lat;
        var long = position.coords.longitude;
        var geo2 = document.getElementById("long");
        geo2.value = long;
    }

    // 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);
    window.addEventListener('load', showPosition);

    function handleFormSubmit(formObject) {
        google.script.run.processForm(formObject);
        document.getElementById("myForm").reset();
        alert('Data saved successfully');
        
    }
</script>

Keep track of the user's email address as they complete the form

Answer №1

Answer №2

Similar questions

rating-widget not displaying when performing an ajax request

Error message: Unhandled error - $(...).sidr does not exist as a function. [Chrome developer console]

What steps can be taken to ensure that the v-model input is not updated?

Ways to retrieve the checkbox value using PHP in conjunction with XML

I'm having trouble making a Javascript ajax request to my Web API controller page. It seems like I just can't figure out the correct URL

The discord.js TypeScript is throwing an error stating that the 'index.ts' file is missing when trying to run 'ts-node index.ts'

To properly render an HTML file before loading a JavaScript file, express.static fails to serve the HTML file

What are some tips for utilizing the "bottom-row" slot within the "b-table" component in bootstrap-vue?

Having trouble displaying dynamically added images in my jsx-react component. The images are not showing up as expected

Count Scroller - Finding a Solution for _.debounce

Navigating with buttons in the Material UI Drawer

Tips for preserving dynamically generated HTML through Javascript during page reload

Techniques, modules and functions in Javascript

Extract the chosen document from an input within the Electron application form

What is the best way to update a canvas chart when the side menu is hidden?

Can you merge multiple req.body requests?

Is it possible to execute functions inline with conditional logic in react?

Ways to allocate space evenly between components of the same size in React Native

Converting EDN data to a string and back in Clojure/ClojureScript

Guide to displaying a partial in the controller following an ajax request