如何实时提取未提交的Google表单当前填写响应数据并实现多选题动态填充？

Awesome questions! Google Forms doesn’t have a built-in way to access unsubmitted responses or dynamically update options based on prior answers, but with a bit of Google Apps Script and custom front-end work, you can absolutely pull this off. Let’s break down the solutions step by step.

1. Capturing Real-Time Unsubmitted Responses #

Native Google Forms don’t expose unsubmitted data to external scripts, so we need to build a custom implementation to track user inputs as they type. Here are the two most reliable approaches:

Option 1: Custom Web App Form (Most Maintainable) #

Build a fully custom form using Google Apps Script’s Web App feature. This gives you complete control over input tracking and dynamic updates.

• How it works:
  • Create an HTML form in Apps Script that mirrors your Google Form structure.
  • Add client-side JavaScript to listen for input or change events on every field.
  • Send temporary input data to the server-side script, where you can store it using:
    • Cache Service: For short-term storage (expires after up to 1 hour) ideal for active sessions.
    • Google Sheets: For persistent drafts (add a "draft" flag to distinguish from submitted responses).

Option 2: Embedded Native Form (Fragile but Quick) #

If you need to use an existing Google Form, embed it in a custom HTML page and intercept inputs. Note that this is fragile because Google may change the form’s DOM structure at any time:

• Embed the form in an iframe with allow="same-origin" to bypass cross-origin restrictions.
• Use JavaScript to access the iframe’s content and listen for input changes in form fields.
• Send captured data to a server-side script for temporary storage.

2. Dynamically Populating Multiple-Choice Options #

This directly ties into the real-time data capture from the first step. The custom web app approach is by far the most reliable here:

Step-by-Step Implementation #

1. Track the preceding answer: Use client-side JavaScript to detect when the user selects an answer to the prior question.
2. Fetch relevant options: Call a server-side Apps Script function that retrieves the appropriate multiple-choice options (from a Google Sheet, hardcoded map, or database).
3. Update the UI: Replace the empty multiple-choice container in your HTML with dynamically generated radio buttons/dropdown options.

Example Code Snippets #

Server-Side (Code.gs)

// Serve the custom form HTML
function doGet() {
  return HtmlService.createHtmlOutputFromFile('Form');
}

// Fetch options based on the user's prior answer
function getDynamicOptions(selectedAnswer) {
  // Replace this with data from Google Sheets or a database
  const optionMap = {
    'Coffee': ['Latte', 'Cappuccino', 'Americano'],
    'Tea': ['Green Tea', 'Black Tea', 'Herbal Tea']
  };
  return optionMap[selectedAnswer] || [];
}

// Save temporary draft responses
function saveDraft(data) {
  const cache = CacheService.getUserCache();
  // Store for 1 hour (3600 seconds)
  cache.put('draft_' + Session.getActiveUser().getEmail(), JSON.stringify(data), 3600);
}

// Save final submitted response to Google Sheets
function saveFinalResponse(formData) {
  const sheet = SpreadsheetApp.openById('YOUR_SPREADSHEET_ID').getSheetByName('Responses');
  sheet.appendRow(Object.values(formData));
}

Client-Side (Form.html)

<!DOCTYPE html>
<html>
<body>
  <form id="customForm">
    <div>
      <label>Preferred Drink Type:</label>
      <select id="drinkType" name="drinkType">
        <option value="">Select an option</option>
        <option value="Coffee">Coffee</option>
        <option value="Tea">Tea</option>
      </select>
    </div>
    <div id="drinkOptionsContainer">
      <label>Choose Your Drink:</label>
      <div id="multipleChoices"></div>
    </div>
    <button type="submit">Submit</button>
  </form>

  <script>
    // Update options when the first question changes
    document.getElementById('drinkType').addEventListener('change', async (e) => {
      const selected = e.target.value;
      document.getElementById('multipleChoices').innerHTML = '';
      
      if (!selected) return;
      
      // Fetch options from server
      await google.script.run.withSuccessHandler((options) => {
        let choicesHtml = '';
        options.forEach(opt => {
          choicesHtml += `<label><input type="radio" name="drinkChoice" value="${opt}"> ${opt}</label><br>`;
        });
        document.getElementById('multipleChoices').innerHTML = choicesHtml;
      }).getDynamicOptions(selected);
    });

    // Save draft on every input change
    document.querySelectorAll('input, select').forEach(el => {
      el.addEventListener('input', () => {
        const formData = new FormData(document.getElementById('customForm'));
        const dataObj = Object.fromEntries(formData.entries());
        google.script.run.saveDraft(dataObj);
      });
    });

    // Handle form submission
    document.getElementById('customForm').addEventListener('submit', (e) => {
      e.preventDefault();
      const formData = new FormData(document.getElementById('customForm'));
      const dataObj = Object.fromEntries(formData.entries());
      
      google.script.run.withSuccessHandler(() => {
        alert('Form submitted successfully!');
        document.getElementById('customForm').reset();
      }).saveFinalResponse(dataObj);
    });
  </script>
</body>
</html>

Key Notes #

• Custom Web App Pros: Full control, maintainable, no reliance on Google’s Form DOM structure.
• Cache Service vs Sheets: Use Cache for temporary session data, Sheets if you need to persist drafts across user sessions.
• Permissions: When deploying the web app, set access to "Anyone, even anonymous" if needed, or restrict to your domain users.

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