'Google Apps code runs but shows "not a supported return type"

I am working on building my own Html form from scratch which links with a certain spreadsheet. I am successful in sending form data into the spreadsheet as I wanted but when I press the form send button, another tab shows up and I get this error message:

The script completed but returned value is not a supported return type.

Although my program works as I wanted, I get this error message every time.

I'm using doGet and doPost to send data to the spreadsheet.

Here is my doGet code:

function doGet(){
var html = HtmlService
.createHtmlOutputFromFile('body')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
return html;
}

Here is my doPost code:

function doPost(e) { 
 var ss = SpreadsheetApp.openById("id");
 var Properties = PropertiesService.getScriptProperties();
 var sheet = ss.getSheetByName("sheet1");
 var uid = Properties.getProperty("uid");
 var uid = Number(uid) + 1;
 var date = Utilities.formatDate(new Date(), "JST", "yyyy/MM/dd HH:mm:ss");

 var array = [uid,date,e.parameter.pref,e.parameter.area,e.parameter.building];
 sheet.appendRow(array);
 Properties.setProperty("uid",uid);
}

Here is the Additional information(HTML and Javascripts)

HTML code:

<body>
  <iframe src="#" id="frame" name="frame" style="width:0px; height:0px; border:0px;">
  </iframe>
  <div class="center" id="main">
      <h3>Form Title</h3>
      <form id="form" action="web app URL" method="post" target="frame" name="form">
      <div class="left">
        <p class="custom" align="left">
            Prefecture：<br>
            <select name="pref" onChange="functionName1()" required>
                <option selected>Choose...</option>
                <option>Tokyo</option>
                <option>Yamanashi</option>
            </select><span class="required">*</span>
        </p>
        <p class="custom" align="left">
            Area：<br>
            <select name="area" onChange="functionName2()" required>
                <option>Choose...</option>
            </select><span class="required">*</span>
        </p>
        <p class="custom" align="left">
            Building：<br>
            <select name="building" required>
                <option>Choose...</option>
            </select><span class="required">*</span>
        </p>
        <p class="center">
            <input type="button" value="送信" class="btn" onClick="formsend()">
        </p>
      </div>
    </form>
</div>
<script type="text/javascript">

function formsend(){
   if(window.confirm("Are you sure to submit?")){
   document.getElementById("form").submit();
   document.getElementById("main").innerHTML = "<p><b><div style='color:red; font-size:16pt;'>Form sent.</div></b></p><input type='button' value='戻る' onClick='reload()'>";
   }
   else{window.alert("Cancelled");
   }
}

function reload(){
    location.href = "Web App URL";
}
</script>

Solution 1:^[1]

As Sandy Good suggested is the 'target' attribute. The best way to communicate with the server is by the google.script.run API I made some changes to your code as an example:

Google Apps Script:

function doGet(){
  var html = HtmlService
  .createHtmlOutputFromFile('body')
  .setSandboxMode(HtmlService.SandboxMode.IFRAME);
 return html;
}

function doSomething(e) { 
 var ss = SpreadsheetApp.openById("id");
 var Properties = PropertiesService.getScriptProperties();
 var sheet = ss.getSheetByName("sheet1");
 var uid = Properties.getProperty("uid");
 var uid = Number(uid) + 1;
 var date = Utilities.formatDate(new Date(), "JST", "yyyy/MM/dd HH:mm:ss");

 var array = [uid,date,e.pref,e.area,e.building];
 sheet.appendRow(array);
 Properties.setProperty("uid",uid);
}

HTML code:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <div class="center" id="main">
      <h3>Form Title</h3>
      <form id="form" action="web app URL" name="form">
      <div class="left">
        <p class="custom" align="left">
            Prefecture?<br>
            <select name="pref" onChange="functionName1()" required>
                <option selected>Choose...</option>
                <option>Tokyo</option>
                <option>Yamanashi</option>
            </select><span class="required">*</span>
        </p>
        <p class="custom" align="left">
            Area?<br>
            <select name="area" onChange="functionName2()" required>
                <option>Choose...</option>
            </select><span class="required">*</span>
        </p>
        <p class="custom" align="left">
            Building?<br>
            <select name="building" required>
                <option>Choose...</option>
            </select><span class="required">*</span>
        </p>
        <p class="center">
            <input type="button" value="??" class="btn" onClick="formsend()">
        </p>
      </div>
    </form>
</div>
  </body>
</html>
<script type="text/javascript">

function formsend(){
   if(window.confirm("Are you sure to submit?")){
   google.script.run.doSomething(document.forms[0]);
   document.getElementById("main").innerHTML = "<p><b><div style='color:red; font-size:16pt;'>Form sent.</div></b></p><input type='button' value='??' onClick='reload()'>";
   }
   else{window.alert("Cancelled");
   }
}
</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	RubÃ©n

'Google Apps code runs but shows "not a supported return type"

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]