Error submitting data: Failed to fetch, while submitting html css, js form data to google sheets

Question

step1.html

    <!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Visa Points Calculator</title>
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body class="bg-light">
    <div class="container py-5">
        <div class="text-center">
            <h1>Visa Points Calculator Step-1</h1>
        </div>
        
        <form id="visaForm">
            <div class="row">
            <div class="col-md-6">
            <div class="form-group">
                <label for="candidateName">Candidate's Name:</label>
                <input type="text" class="form-control" id="candidateName" required>
            </div>

            <div class="form-group">
                <label for="contactNumber">Contact Number:</label>
                <input type="tel" class="form-control" id="contactNumber" required>
            </div>

            <div class="form-group">
                <label for="dob">Date of Birth:</label>
                <input type="date" class="form-control" id="dob" required>
            </div>

            <div class="form-group">
                <label for="email">Email ID:</label>
                <input type="email" class="form-control" id="email" required>
            </div>

            <div class="form-group">
                <label>Highest Education:</label><br>
                <input type="radio" name="education" value="10th"> 10th<br>
                <input type="radio" name="education" value="12th"> 12th<br>
                <input type="radio" name="education" value="Graduate"> Graduate<br>
                <input type="radio" name="education" value="Postgraduate"> Postgraduate<br>
                <input type="radio" name="education" value="Doctorate"> Doctorate<br>
            </div>

            <div class="form-group">
                <label for="degree">Educational Degrees:</label>
                <input type="text" class="form-control" id="degree">
            </div>

            <div class="form-group">
                <label>Assets:</label><br>
                <input type="checkbox" value="Irrigation Land"> Irrigation Land<br>
                <input type="checkbox" value="Commercial Land"> Commercial Land<br>
                <input type="checkbox" value="Apartment or Flat"> Apartment or Flat<br>
                <input type="checkbox" value="House"> House<br>
            </div>
            </div>

            <div class="col-md-6">
            <div class="form-group">
                <label for="currentVisaCountry">Current Visa Country(If any):</label>
                <select class="form-control" id="currentVisaCountry">
                    
                </select>
            </div>

            <div class="form-group">
                <label for="newVisaCountry">Want a visa to:</label>
                <select class="form-control" id="newVisaCountry">
                    
                </select>
            </div>

            <div class="form-group">
                <label for="visaRejectionCountries">Visa Rejection Countries(If any):</label>
                <select class="form-control" id="visaRejectionCountries">
                    
                </select>
            </div>

            <div class="form-group">
                <label for="lastVisaRejectionDate">Last Visa Rejection Date(If any):</label>
                <input type="date" class="form-control" id="dob" required>
            </div>

            <div class="form-group">
                <label>Profession:</label><br>
                <input type="radio" name="profession" value="Student" onclick="toggleIncomeFields(false)"> Student<br>
                <input type="radio" name="profession" value="Businessman" onclick="toggleIncomeFields(true)"> Businessman<br>
                <input type="radio" name="profession" value="Salaried" onclick="toggleIncomeFields(true)"> Salaried Employee<br>
            </div>

            <div id="incomeFields" style="display: none;">
                <div class="form-group">
                    <label for="monthlyIncome">Monthly Income(In Indian Rupees):</label>
                    <input type="text" class="form-control" id="monthlyIncome">
                </div>
                <div class="form-group">
                    <label>Income Type:</label><br>
                    <input type="checkbox" value="Business"> Business<br>
                    <input type="checkbox" value="Salaried"> Salaried<br>
                    <input type="checkbox" value="Other"> Other<br>
                </div>
            </div>

            </div>
            </div>

            <div style="text-align: center;">
                <button type="submit" class="btn btn-primary">Step-2</button>
            </div>
        </form>
    </div>

    <script>
        const countries = ["None", "Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Argentina", "Australia", "Austria", "Bangladesh", "Belgium", "Brazil", "Canada", "China", "Denmark", "Egypt", "Finland", "France", "Germany", "India", "Italy", "Japan", "Mexico", "Netherlands", "Norway", "Pakistan", "Russia", "Saudi Arabia", "South Africa", "Spain", "Sweden", "Switzerland", "United Kingdom", "United States"];
        
        function populateCountries(selectId) {
            const selectElement = document.getElementById(selectId);
            countries.forEach(country => {
                const option = document.createElement('option');
                option.value = country;
                option.textContent = country;
                selectElement.appendChild(option);
            });
        }

        populateCountries('currentVisaCountry');
        populateCountries('newVisaCountry');
        populateCountries('visaRejectionCountries');

        function toggleIncomeFields(show) {
            document.getElementById('incomeFields').style.display = show ? 'block' : 'none';
        }


        function toggleIncomeFields(show) {
            document.getElementById('incomeFields').style.display = show ? 'block' : 'none';
        }

        document.getElementById('visaForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const formData = new FormData(e.target);
    let data = {};

    // Convert FormData to JSON Object
    formData.forEach((value, key) => {
        if (data[key]) {
            if (Array.isArray(data[key])) {
                data[key].push(value);
            } else {
                data[key] = [data[key], value];
            }
        } else {
            data[key] = value;
        }
    });

    // Collect checked checkboxes manually
    data['assets'] = Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.value);

    fetch('https://script.google.com/macros/s/AKfycbxOF8FLSlEd1sVmineXKQtph2Ix1RokQcJ3VuCYR3veLyi7xo98h3eW0zTvQN_fFnNK/exec', {
        method: 'POST',
         mode: 'cors',  // Ensure CORS mode is enabled
        body: JSON.stringify(data),
        headers: { 'Content-Type': 'application/json' }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json();
    })
    .then(responseJson => {
        if (responseJson.result === "success") {
            alert('Data submitted successfully');
            window.location.href = '/stepcountries.html';
        } else {
            alert('Error in Google Apps Script: ' + JSON.stringify(responseJson));
        }
    })
    .catch(error => alert('Error submitting data: ' + error.message));
});

    </script>
</body>
</html>

Google sheet App Script:

    function doPost(e) {
  try {
    const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Sheet1');
    const data = JSON.parse(e.postData.contents);

    const values = [
      data['candidateName'],
      data['contactNumber'],
      data['dob'],
      data['email'],
      data['education'],
      JSON.stringify(data['assets']),  // Convert assets to JSON
      data['currentVisaCountry'],
      data['newVisaCountry'],
      data['visaRejectionCountries'],
      data['degree'],
      data['profession'],
      data['monthlyIncome']
    ];

    sheet.appendRow(values);

    // ✅ Return a response with proper CORS headers
    return ContentService.createTextOutput(JSON.stringify({ result: 'success' }))
      .setMimeType(ContentService.MimeType.JSON);
      
  } catch (error) {
    return ContentService.createTextOutput(JSON.stringify({ result: 'error', message: error.message }))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

// ✅ Handle CORS Preflight Requests (OPTIONS)
function doGet(e) {
  return ContentService.createTextOutput("")
    .setMimeType(ContentService.MimeType.TEXT)
}

PostMan shows no error on handling and submitting data into sheets.

Error faced in browser when interacting live website link:https://ashrithmanagementservicelimited.github.io/VisaScore/step1.html

Error in dev mode:

    `Access to fetch at 'https://script.google.com/macros/s/AKfycbzbAyTfLqI3rJJJd2aYy6XdYZD60wViYYkwxzwSSyuc-i7zrW79t4J0gjdHF2olYdy0/exec'
 from origin 'https://ashrithmanagementservicelimited.github.io' has been blocked
 by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
 If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.Understand this errorAI
    step1.html:167 

        
        
       POST https://script.google.com/macros/s/AKfycbzbAyTfLqI3rJJJd2aYy6XdYZD60wViYYkwxzwSSyuc-i7zrW79t4J0gjdHF2olYdy0/exec net::ERR_FAILED`

Another Google Sheet App Script:

    function doPost(e) {
  try {
    const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Sheet1');
    const data = JSON.parse(e.postData.contents);

    const values = [
      data['candidateName'],
      data['contactNumber'],
      data['dob'],
      data['email'],
      data['education'],
      JSON.stringify(data['assets']),  // Convert assets to JSON
      data['currentVisaCountry'],
      data['newVisaCountry'],
      data['visaRejectionCountries'],
      data['degree'],
      data['profession'],
      data['monthlyIncome']
    ];

    sheet.appendRow(values);

    // ✅ Return a response with proper CORS headers
    return ContentService.createTextOutput(JSON.stringify({ result: 'success' }))
      .setMimeType(ContentService.MimeType.JSON)
      .setHeader("Access-Control-Allow-Origin", "*")
      .setHeader("Access-Control-Allow-Methods", "POST, GET")
      .setHeader("Access-Control-Allow-Headers", "Content-Type: application/json")

      
  } catch (error) {
    return ContentService.createTextOutput(JSON.stringify({ result: 'error', message: error.message }))
      .setMimeType(ContentService.MimeType.JSON)
      .setHeader("Access-Control-Allow-Origin", "*")
      .setHeader("Access-Control-Allow-Methods", "POST, GET")
      .setHeader("Access-Control-Allow-Headers", "Content-Type: application/json")

  }
}

// ✅ Handle CORS Preflight Requests (OPTIONS)
function doGet(e) {
  return ContentService.createTextOutput("")
    .setMimeType(ContentService.MimeType.JSON)
    .setHeader("Access-Control-Allow-Origin", "*")
    .setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS")
    .setHeader("Access-Control-Allow-Headers", "Content-Type: application/json")

}

Error while executing Script:

TypeError: ContentService.createTextOutput(...).setMimeType(...).setHeader is not a function
doPost  @ Code.gs:34

Another script:

return HtmlService.createHtmlOutput(JSON.stringify({ result: 'error', message: error.message }))
      .setMimeType(ContentService.MimeType.JSON)
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  }

Same browser error appears as above but postman displays no error and saves data

Tanaike · Accepted Answer · 2025-03-17 07:59:30Z

In your script, in order to remove your current issue, how about the following modification?

From:

fetch('https://script.google.com/macros/s/AKfycbxOF8FLSlEd1sVmineXKQtph2Ix1RokQcJ3VuCYR3veLyi7xo98h3eW0zTvQN_fFnNK/exec', {
    method: 'POST',
     mode: 'cors',  // Ensure CORS mode is enabled
    body: JSON.stringify(data),
    headers: { 'Content-Type': 'application/json' }
})

To:

fetch('https://script.google.com/macros/s/AKfycbxOF8FLSlEd1sVmineXKQtph2Ix1RokQcJ3VuCYR3veLyi7xo98h3eW0zTvQN_fFnNK/exec', {
    method: 'POST',
    body: JSON.stringify(data),
})

Note:

If the same result occurred, please reflect the latest script to your Web Apps and test it again.
By the way, in your situation, it is required to be the following setting for Web Apps. Please be careful about this.
- Execute as: Me
- Who has access to the app: Anyone
Also, I think that setHeader might not be required to be used.

Reference:

Sample Scripts for Requesting to Web Apps by Various Languages

Collectives™ on Stack Overflow

Error submitting data: Failed to fetch, while submitting html css, js form data to google sheets

1 Answer 1

From:

To:

Note:

Reference:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

From:

To:

Note:

Reference:

Comments

Your Answer

Sign up or log in

Post as a guest

Related