Pass value from HTML to Google Script on Google Apps Script?

Question

I need to pass a data value from the HTML to the Google Script on a GAS project. The parts with comments of the code is the value I need to pass.

gs file

function doGet(e) { 
      if (e.parameter.prefix){ 
        var result = data; // <-- GET VALUE "data" FROM THE HTML "forms.html"
        var content = e.parameters.prefix + '(' +JSON.stringify(result) + ')';
        return ContentService.createTextOutput(content)
        .setMimeType(ContentService.MimeType.JAVASCRIPT);
        
      }
      var html = HtmlService.createHtmlOutputFromFile('Index');
      return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
    }

Index.html in GAS project

<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1 id='title' style="color: #e31414">SCRIPT</h1>
<h1 id='done' style="display: none"> DATA PASSED</h1>
<button id="btn" onclick="passData()">Run "passData()"</button>
</body>
</html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script> 
function passData() {
   $('#done').show();
   var data = 'value'; //<-- PASS THIS DATA TO GOOGLE SCRIPT (The .gs file)
}
</script>

Faisal · Accepted Answer · 2021-01-05 19:08:24Z

Follow these steps:

in the gs file, create a variable without a value at the very top: var data;
Create a function below it like so:

function myfunction(x) {
    data = x;
}

in the Index.html file especially in passData() function, insert this line in the bottom of the function: google.script.run.myfunction(data);

Finally, you will be able to use the result variable as the data in doGet() function.

-- your code should look like this --

gs file

var data;

function myfunction(x) {
    data = x;
}

function doGet(e) { 
      if (e.parameter.prefix){ 
        var result = data; // <-- GET VALUE "data" FROM THE HTML "forms.html"
        var content = e.parameters.prefix + '(' +JSON.stringify(result) + ')';
        return ContentService.createTextOutput(content)
        .setMimeType(ContentService.MimeType.JAVASCRIPT);
        
      }
      var html = HtmlService.createHtmlOutputFromFile('Index');
      return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

Index.html in GAS project

<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1 id='title' style="color: #e31414">SCRIPT</h1>
<h1 id='done' style="display: none"> DATA PASSED</h1>
<button id="btn" onclick="passData()">Run "passData()"</button>
</body>
</html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script> 
function passData() {
   $('#done').show();
   var data = 'value'; //<-- PASS THIS DATA TO GOOGLE SCRIPT (The .gs file)
   google.script.run.myfunction(data);
}
</script>

Thank you for your reply. I get an undefined response. This Jsfiddle show the problem in console. If the value on data is already on the doGet(e) function (like "hi" or whatever) it works but with your way get that undefined. This is the GAS Project
I knew the problem! the doGet(e) function executes (runs) only one time, when a user visits the web app. so when the user visits the web app the doGet(e) function runs. and after the page loads the user sends the data through google.script.run. think about the google.script.run as an ajax call to the server, and when that ajax runs, the myfunction(x) runs and changes the data variable to the wanted value, but without executing the doGet() function because as i said it only executes once when user visits the page. so the solution is to put the code in myfunction(x)
Yes, that is the problem. I will check tall call to the server with ajax, because I have no idea how to implement it. Thank you very much @Faisal

Collectives™ on Stack Overflow

Pass value from HTML to Google Script on Google Apps Script?

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related