CODEWITHSUNDEEP
javascripthtmlgoogle-apps-scriptgoogle-sheets
Joshua Doan
Joshua Doan

Reputation: 110

Pop-up form will not close after submit in Google Sheets

I'm using my function openDialog to display a custom HTML form. It will submit fine, but will not close the pop-up window after the form is submitted. I would like this form to either close after submitting, or show a "thank-you.html" with a "Close" button.

.gs

function openDialog() {
  var html = HtmlService.createHtmlOutputFromFile('index.html');
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
    .showModalDialog(html, 'Pop up Form');
}

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('index').setTitle('Adding Rows');
}

function doPost(e) {
  Logger.log(e);
}

function sendText(data) {
  var sheet = SpreadsheetApp.openById("some id").getActiveSheet();
  sheet.appendRow([data.form_field_1, data.form_field_2, data.form_field_3, data.form_field_4]);
  return 'success!';
}

HTML

<html>

<head>
  <base target="_top">
</head>

<body>
  <form onsubmit="sendText(event)" id="test-form">
    <div>
      <label>Field 1</label>
      <input type="text" name="form_field_1" placeholder="Field 1" />
    </div>
    <div>
      <label>Field 2</label>
      <input type="text" name="form_field_2" placeholder="Field 2" />
    </div>
    <div>
      <label>Field 3</label>
      <input type="text" name="form_field_3" placeholder="Field 3" />
    </div>
    <div>
      <label>Field 4</label>
      <input type="text" name="form_field_4" placeholder="Field 4" />
    </div>
    <div>
      <button type="submit" id="submit-form">Submit</button>
    </div>
  </form>
  <script>
    function sendText(e) {
      e.preventDefault();

      var data = {
        form_field_1: e.target['form_field_1'].value,
        form_field_2: e.target['form_field_2'].value,
        form_field_3: e.target['form_field_3'].value,
        form_field_4: e.target['form_field_4'].value
      }

      google.script.run
        .withSuccessHandler(function(response) {
          console.log(response);
          window.close();
        })
        .sendText(data);
    }
  </script>
</body>

</html>

Not sure what I'm doing wrong

Upvotes: 2

Views: 1093

Answers (2)

Joshua Doan
Joshua Doan

Reputation: 110

Found the fix by doing this. 

<script>
    function sendText(e) {
      e.preventDefault();

      var data = {
        form_field_1: e.target['form_field_1'].value,
        form_field_2: e.target['form_field_2'].value,
        form_field_3: e.target['form_field_3'].value,
        form_field_4: e.target['form_field_4'].value
      }

      google.script.run.withSuccessHandler(function(response) {
        console.log(response);
        google.script.host.close()
      })
      .sendText(data);
    }
</script>

Upvotes: 1

Anduel
Anduel

Reputation: 11

You need something like this:

function closepopup()
{
    document.getElementById('test-form').style.display = 'none';
}
  
function sendtext()
{
    if(jQuery('#test-form').valid())
    {
        var formurl = 'submit url'; 
        jQuery.ajax({
          type: "POST",
          url: formurl,
          data: jQuery('#test-form').serialize(true), 
          success: function() 
          {
              // you can add here redirect the current page or success message
              closepopup();
          }
        });
    }
}
<div>
  <button type="submit" id="submit-form" onclick="sendtext()">Submit</button>
</div>

I hope this will help!

Upvotes: 0

Related Questions