google web app - Update event parameter with html form submit?

Question

I have a web app like this:

file Code.gs

function doGet(e) 
{
    var id = e.parameter.id;
    if (id == null || id == "")
    {
        return HtmlService.createHtmlOutputFromFile("InputId");
    }
    else
    {
        return HtmlService.createHtmlOutput("Your id is: "+id);
    }
}

File InputId.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form>
      <label for="idEmail">Email:</label>
      <input type="text" id="idEmail" name="id"><br><br>
      <input type="submit" value="Ok">
    </form>
  </body>
</html>

So the web app works like this:

When user go to: https://script.google.com/macros/s/SomeYadaYada/dev

The page shows the form InputId.html that asks for user's Id (a.k.a Email), user supposes to enter the Id (e.g YadaYada@gmail.com) then click button Ok.

Expect: The Url bar redirects to https://script.google.com/macros/s/SomeYadaYada/dev?id=YadaYada@gmail.com so that the Web app show the text: "Your id is YadaYada@gmail.com".

Result: The Url bar redirects to https://SomeYadaYada-script.googleusercontent.com/userCodeAppPanel?id=YadaYada@gmail.com, the Web app, of course, shows nothing.

I have googled this whole morning for solution, but I only found the solution "event.preventDefault();" which doesn't work for me (it only prevent the page reload, while I need the page update the event parameter and reload).

How can I update event parameter with html form submit? Or is there a better approach to solve this problem? I hope I can find the solution that will work also when I embed the web app to Google Sites.

I start to see the issue here: https://stackoverflow.com/questions/57148265/retrieve-url-of-appscript-using-javascript it has something called iFrame: https://stackoverflow.com/questions/63551837/where-is-my-iframe-in-the-published-web-application-sidebar — 123iamking, Sep 01 '21 at 04:43

score 0 · Answer 1 · answered Sep 01 '21 at 08:22

Implement a link that looks like a button

Due to Restrictions in IFRAME mode you cannot directly redirect to a new page by opening a new window within the same location, but you can open a link wihtin the same window.

Sample implementation:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  </head>
  <body>
    <form>
      <br>
      <label for="idEmail">Email:</label>
      <input type="text" id="idEmail" name="id"><br><br>
      <a class="btn btn-primary " id="button">Ok</a>
    </form>     
  </body>
  <script>      
    var button = document.getElementById("button")
    button.addEventListener("click", redirect) 
    function redirect(){
      var baseUrl = "https://script.google.com/a/SomeYadaYada/exec"
      var id = document.getElementById("idEmail").value
      button.href = baseUrl + "?id=" + id
      button.click()
    }
    </script>
</html>

I don't like this solution because we'll have to edit code at `var baseUrl = "https://script.google.com/a/SomeYadaYada/exec"` each time SomeYadaYada changes, also will it work when embed to Google Sites? — 123iamking, Sep 01 '21 at 10:31
You do not need to manually change `"https://script.google.com/a/SomeYadaYada/exec"` - it was just a sample. Actually you can retrieve the WebApp Url programmatically with [ScriptApp.getService().getUrl()](https://developers.google.com/apps-script/reference/script/service#geturl). See [here](https://stackoverflow.com/questions/62544398/htmlservice-xframeoptionsmode-allowall-not-working/62554923#62554923). But if you only want to show an additoinal div rather than redirecting to a completely new website / WebApp of course your solution is totally feasible. — ziganotschka, Sep 01 '21 at 12:39

123iamking · Accepted Answer · 2021-09-01T08:32:03.063

I figured it out, I just need to re-design my app a little bit. Now instead of using form same-page submit to post the event parameter, I just drop the event parameter entirely and using Google's proposed technique

file Code.gs

function doGet(e) 
{
  return HtmlService.createHtmlOutputFromFile('Index');
}

function processForm(formObject) 
{
    var id = formObject.id;

    if (id == null || id == "")
    {
        return "Please enter email.";
    }

    return "Your id is: "+id;
}

File Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      // Prevent forms from submitting.
      function preventFormSubmit() {
        var forms = document.querySelectorAll('form');
        for (var i = 0; i < forms.length; i++) {
          forms[i].addEventListener('submit', function(event) {
            event.preventDefault();
          });
        }
      }
      window.addEventListener('load', preventFormSubmit);

      function handleFormSubmit(formObject) {
        google.script.run.withSuccessHandler(getFormMsg).processForm(formObject);
      }
      function getFormMsg(strMsg) {
        var div = document.getElementById('output');
        div.innerHTML = "<p>"+strMsg+"</p>";
      }
    </script>
  </head>
  <body>
    <form id="myForm" onsubmit="handleFormSubmit(this)">
      <input name="id" type="text" />
      <input type="submit" value="Submit" />
    </form>
    <div id="output"></div>
 </body>
</html>

I like this solution because look like it will work when I embed the web app to Google Sites, save me future headache.

google web app - Update event parameter with html form submit?

2 Answers2

Implement a link that looks like a button