如何在Google Apps Script中获取弹窗HTML表单数据并调用脚本函数？

Great question! You can’t directly pass Apps Script functions as parameters to your HTML file, but there’s a straightforward way to call server-side Apps Script functions from your modal dialog’s client-side JavaScript using Google’s built-in google.script.run API. This is the standard method for communication between your HTML form and the Apps Script backend (since the HTML runs in the user’s browser, while Apps Script executes on Google’s servers).

Here’s how to set this up to capture form data and send it to your server-side functions:

Step 1: Update your form.html to collect input data and trigger the server call #

Modify your HTML to include client-side JavaScript that grabs input values and invokes your Apps Script function. Here’s an example with common form fields:

<!DOCTYPE html>
<html>
  <body>
    <div style="padding: 15px;">
      <label for="username">Username:</label>
      <input type="text" id="username" required><br><br>
      
      <label for="email">Email:</label>
      <input type="email" id="email" required><br><br>
      
      <label for="phone">Phone:</label>
      <input type="tel" id="phone"><br><br>

      <button onclick="submitForm()">Submit</button>
    </div>

    <script>
      function submitForm() {
        // Collect all form input values into a plain object
        const formData = {
          username: document.getElementById('username').value,
          email: document.getElementById('email').value,
          phone: document.getElementById('phone').value
        };

        // Call your server-side function and pass the form data
        google.script.run
          .withSuccessHandler((response) => {
            // Handle successful execution (e.g., close dialog or show confirmation)
            alert('Data processed successfully!');
            google.script.host.close(); // Closes the modal dialog
          })
          .withFailureHandler((error) => {
            // Handle errors (e.g., invalid input, API failure)
            alert(`Oops! Something went wrong: ${error.message}`);
          })
          .processUserForm(formData); // Replace with your server function name
      }
    </script>
  </body>
</html>

Step 2: Add a server-side function in Code.gs to receive and process the data #

Create a new function (or modify existing ones) to accept the form data, then use it to call your fetchData and updateSheet functions:

function openFormModalDialog() {
  var ui = SpreadsheetApp.getUi();
  var htmlOutput = HtmlService
      .createHtmlOutputFromFile('form')
      .setWidth(400)
      .setHeight(300);
  ui.showModalDialog(htmlOutput, 'User Information');
}

// New function to handle form data from the client
function processUserForm(formData) {
  // Access form fields using the object properties
  const username = formData.username;
  const email = formData.email;
  const phone = formData.phone;

  // Call your existing functions with the form data
  const externalServiceData = fetchData(email); // Pass relevant fields to fetchData
  updateSheet(externalServiceData, username, email, phone); // Update sheet with combined data

  return 'Success'; // This value is sent to the client's success handler
}

// Modify fetchData to accept parameters (adjust based on your external service needs)
function fetchData(userEmail) {
  // Example: Call an external API using the user's email
  const apiUrl = `https://your-external-service.com/api?email=${encodeURIComponent(userEmail)}`;
  const response = UrlFetchApp.fetch(apiUrl);
  return JSON.parse(response.getContentText());
}

// Modify updateSheet to accept the data you need to write to the sheet
function updateSheet(externalData, username, email, phone) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  // Append a new row with the combined data
  sheet.appendRow([username, email, phone, externalData.someKeyFromApi]);
}

Key Details to Remember: #

• google.script.run handles serializing/deserializing data between the client and server (stick to plain objects, strings, numbers—no functions or DOM elements).
• Always use withSuccessHandler and withFailureHandler to give users feedback and handle errors gracefully.
• Server-side function names are case-sensitive, so make sure they match exactly in your HTML and Code.gs.

内容的提问来源于stack exchange，提问作者Dipak