时间戳

首页 > 解决方案 > 从 HTML 中获取输入并将其传递给 GS

javascript - 从 HTML 中获取输入并将其传递给 GS

问题描述

语境

我正在通过 Google 脚本向 Google 电子表格添加不同的功能。我想添加的其中一个功能是弹出一个表单、添加详细信息以及发送一封电子邮件。表单（见下文）是 WIP，字段尚未完全定义。

根据 Alessandro 的反馈更新。

还不行。

HTML

<p>To add new tasks for a specific campaign setup, please start specifying what project, campaign, platform and phase you want to add tasks for.</p>
<p>PROJECT</p>
    <form id="briefForm" onsubmit="handleFormSubmit(this)">
<div class="container">


        <div class="row">
            <div class="col-6"><!--left side -->
                <div class="form-group row">
                    <label for="fname" class="col-sm-6 col-form-label">Project:</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="project">
                    </div>
                </div>

                <div class="form-group row">
                    <label for="lname" class="col-sm-6 col-form-label">Platform:</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="platform">
                    </div>
                </div>

     
            </div>

            <div class="col-6">
                <div class="form-group row">
                    <label for="campaign" class="col-sm-6 col-form-label">Campaign:</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="campaign">
                    </div>
                </div>

                 <div class="form-group row">
                    <label for="lname" class="col-sm-6 col-form-label">Phase:</label>
                    <div class="col-sm-6">
                        <div class="row">
                            <div class="col">
                                <select name="Month" class="custom-select">
                                   <option value="march">None</option>
                                   <option value="january">Awar.</option>
                                    <option value="february">Cons.</option>
                                    <option value="march">Both</option>
                                    
                                </select>
                            </div>

                            
                        </div>
                    </div>
                </div>
                    
            </div><!--right side -->
        </div><!-- form for teacher/student-->
    
</div>    
<p>TASKS</p>
<div class="container">
<p>Select the relevant tasks to add to this project.</p>
               <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="customCheck1">
                <label class="custom-control-label" for="customCheck1">Review assets</label>
                </div>
                
                <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="customCheck2">
                <label class="custom-control-label" for="customCheck2">Send brief</label>
                </div>
                
                <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="customCheck3">
                <label class="custom-control-label" for="customCheck3">Set up</label>
                </div>
                
                <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="customCheck4">
                <label class="custom-control-label" for="customCheck4">Quality check</label>
                </div>
     </div>
     <br>
                <input type="submit"  id="submitbtn" class="btn btn-primary">     
    </form> 



<!-- Script down here -->
<script>
  window.closeDia = function() {
    var formObject = {
        platform: document.getElementById('platform').value,
        project: document.getElementById('project').value,
        // other form input fields...
    }
    google.script.run.sendBrief(formObject);
  };
</script>



<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

JS（包含 openBrief 和 sendBrief）

function openBrief() {
  var s=SpreadsheetApp.getActive(); 
  var htmlDlg = HtmlService.createHtmlOutputFromFile('tasksHTML')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .setWidth(750)
      .setHeight(450);
  SpreadsheetApp.getUi()
      .showModalDialog(htmlDlg, 'New tasks for new campaign setup ');
}

function sendBrief(formObject) {
  var project = formObject.project;
  var platform = formObject.platform;
  // and so on...
  var s = SpreadsheetApp.getActiveSpreadsheet();
  var ss = s.getSheetByName("Support");      // Enter sheet name
  var rangeProject = ss.getRange('AA2');
  
  
  rangeProject.setValue(project)
}

标签： javascripthtmlgoogle-apps-scriptgoogle-sheets

解决方案

注意事项

您正在尝试DOM在服务器端脚本中引用 。这是不可能的。在这种情况下，您必须将表单值传递给该google.script.run方法调用的服务器端脚本。

解决方案

我看到您正在click为提交按钮使用事件处理程序。在这种情况下，您可以更新closeDia函数并使用表单字段值创建 JSON 对象。

为此，通过它们的 id 选择每个元素并将它们的值放入 JSON 对象中，然后将其传递给服务器端函数。

<script>
  window.closeDia = function() {
    var formObject = {
        email: document.getElementById('email').value,
        project: document.getElementById('project').value,
        // other form input fields...
    }
    google.script.run.sendBrief(formObject);
  };
</script>

现在您可以轻松地解析传递给服务器端的 JSON，如下所示：

// Server Side: Code.gs
function sendBrief(formObject) {
  var project = formObject.project;
  var email = formObject.email;
  // and so on...
}

参考

客户端到服务器的通信：表单

推荐阅读