CODEWITHSUNDEEP
javascripthtmlgoogle-apps-scriptgoogle-sheetspopup
Timogavk
Timogavk

Reputation: 869

Call a single html form from Google sheet

I a Google Spreadsheet filling from html form. Function processForm works well and all fields are getting correct data My problem with launchForm as I'm thinking. The form opens in a popup window, but inputs don't load datalist elements. Unfortunately I don't understand why

function launchForm() {
  var htmlApp = HtmlService
      .createHtmlOutputFromFile('Index')  
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)      
      .setWidth(400) 
      .setHeight(450);
  SpreadsheetApp.getActiveSpreadsheet().show(htmlApp);
}

  
  function processForm(formObject) {
    var url = "LINK_TO_SPREADSHEET_OF_DATA_COLLECTION";
    var ss = SpreadsheetApp.openByUrl(url);
    var ws = ss.getSheetByName("List");
    var asiaTime = Utilities.formatDate(new Date(), Session.getScriptTimeZone(), "yyyy-MM-dd");
    var nameParam = [ws.getLastRow(),
                    formObject.recipe_name,
                    formObject.place_name,
                    formObject.servingOrder,
                    formObject.cuisine_name,
                    asiaTime]
    ws.appendRow(nameParam);
}
<!DOCTYPE html>
<html>
    <head>
        <base target="_top">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-6">
                    <form id="myForm" onsubmit="handleFormSubmit(this)">
                        <p class="h4 mb-4 text-center">New Recipe</p>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="recipe_name">Recipe Name</label>
                                <input type="text" class="form-control" id="recipe_name" name="recipe_name" placeholder="Recipe Name" required>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="cuisine_name">Cuisine</label>
                                <input id="cuisine_name" name="cuisine_name" type="text" class="form-control" placeholder="Cuisine Name" list="cuisine_name" required>
                                    <datalist id="cuisine_name">
                                    <option value="Asian"></option>
                                    <option value="Western"></option>                                    
                                    </datalist>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <p>Place name</p>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="place_name" id="ll4h" value="LL4H" required>
                                    <label class="form-check-label" for="ll4h">LL4H</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="place_name" id="ll4t" value="LL4T" required>
                                    <label class="form-check-label" for="female">LL4T</label>
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="servingOrder">Serving order</label>  
                                <input id="servingOrder" name="servingOrder" type="text" class="form-control" placeholder="Serving order" list="servingOrder" required>
                                    <datalist id="servingOrder">
                                    <option value="Starter"></option>
                                    <option value="Main course"></option> 
                                    <option value="Veggi side"></option>
                                    <option value="Carbs side"></option>
                                    <option value="Dessert"></option>
                                    <option value="Dough"></option>
                                    <option value="Sauce"></option>
                                    <option value="Drink"></option>
                                    <option value="Other"></option>                                                                       
                                    </datalist>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary btn-block">Submit</button>
                    </form>
                    <div id="output"></div>
                </div>
            </div>      
        </div>
        <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.processForm(formObject);
              document.getElementById("myForm").reset();
              
            }
          </script>
    </body>
</html>

Where I'm wrong and how to fix it? What is the best way to close popup after submitting?

Upvotes: 1

Views: 95

Answers (1)

Tanaike
Tanaike

Reputation: 201358

  • You want to put datalist to the input tag.

For this, how about this answer? I think that the reason of your issue is that the same id is used to the input tag and the datalist tag. So how about the following modification?

From:

<input id="cuisine_name" name="cuisine_name" type="text" class="form-control" placeholder="Cuisine Name" list="cuisine_name" required>
<datalist id="cuisine_name">

To:

<input id="cuisine_name" name="cuisine_name" type="text" class="form-control" placeholder="Cuisine Name" list="cuisine_name_datalist" required>
<datalist id="cuisine_name_datalist">

And

From:

<input id="servingOrder" name="servingOrder" type="text" class="form-control" placeholder="Serving order" list="servingOrder" required>
<datalist id="servingOrder">

To:

<input id="servingOrder" name="servingOrder" type="text" class="form-control" placeholder="Serving order" list="servingOrder_datalist" required>
<datalist id="servingOrder_datalist">

Reference:

Upvotes: 1

Related Questions