Javascript 在Google脚本中创建一个引导表单_Javascript_Css_Google Apps Script

Javascript 在Google脚本中创建一个引导表单

javascript css google-apps-script

Javascript 在Google脚本中创建一个引导表单,javascript,css,google-apps-script,Javascript,Css,Google Apps Script,我们正在尝试使用Bootstrap3制作一个表单，他们的响应应该会转到Google电子表格，我们尝试过这样做，但没有工作，我们的问题是在Google脚本html页面中加载BootstrapCSS，当按下按钮时，将字段信息放入Google电子表格中多谢各位谷歌脚本 function doGet(e) { return HtmlService.createHtmlOutputFromFile('index'); } function setData(data

我们正在尝试使用Bootstrap3制作一个表单，他们的响应应该会转到Google电子表格，我们尝试过这样做，但没有工作，我们的问题是在Google脚本html页面中加载BootstrapCSS，当按下按钮时，将字段信息放入Google电子表格中

多谢各位

谷歌脚本

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

    function setData(data) {
      var ss = SpreadsheetApp.openById("1uU2GtTjN8SYKQduar4y4n2u0EGeQFaznRddtrmNSYN8").getActiveSheet();
      var lastRow = ss.getLastRow();
      ss.getRange(lastRow+1, 1).setValue(data[0]);
      Logger.log(data[0]);
      return 0

}

Java脚本和Html

<script>
  window.addEventListener('load', function() {
    google.script.run.withSuccessHandler(getData).setData();
  });

  function getData(data) {
    var data = [];
    data[0] = document.getElementById("InputName").value;
    data[1] = document.getElementById("InputEmail").value;
    data[2] = document.getElementById("Inputtel").value;
    data[3] = document.getElementById("InputCPFCNPJ").value;
    data[4] = document.getElementById("InputEnterprise").value;
    data[5] = document.getElementById("InputMessage").value;

    google.script.run.setdata(data);
    return 0;
  }

    </script>

    <html lang="pt-br">
        <body>
            <form role="form">

                <div class="form-group col-xs-12">
                    <label class="sr-only" for="InputName">Nome</label>
                    <input type="text" class="form-control" id="InputName" placeholder="Nome">
                </div>

                <div class="form-group col-xs-12">
                    <label class="sr-only" for="InputEmail">Email</label>
                    <input type="email" class="form-control" id="InputEmail" placeholder="e-mail">
                </div>

                <div class="form-group">
                    <div class="form-inline">
                        <div class="form-group col-xs-6">
                            <label class="sr-only" for="Inputtel">Telefone</label>
                            <input type="tel" class="form-control" id="Inputtel" placeholder="Telefone">
                        </div>
                        <div class="form-group col-xs-6">
                            <label class="sr-only" for="InputCPFCNPJ">CPF ou CNPJ</label>
                            <input type="number" class="form-control" id="InputCPFCNPJ" placeholder="CPF ou CNPJ">
                        </div>
                    </div>
                </div>

                <div class="form-group col-xs-12">
                    <label class="sr-only" for="InputEnterprise">Empresa</label>
                    <input type="text" class="form-control" id="InputEnterprise" placeholder="Empresa">
                </div>

                <div class="form-group col-xs-12">
                    <label class="sr-only" for="InputMessage">Mensagem</label>
                    <textarea class="form-control" rows="3" id="InputMessage" placeholder="Mensagem"></textarea>
                </div>

                <div class="form-group col-xs-2">
                    <button class="btn btn-default" type="submit" onclick="getData();">
                    Enviar
                    </button>
                </div>

            </form>
            <!-- Bootstrap -->
            <script src="https://code.jquery.com/jquery.js"></script>
            <script src="js/bootstrap.min.js"></script>
        </body>
    </html>


addEventListener（'load'，function（））{
google.script.run.withSuccessHandler（getData.setData（）；
});
函数getData（数据）{
var数据=[]；
数据[0]=document.getElementById（“InputName”）.value；
数据[1]=document.getElementById（“InputEmail”）.value；
数据[2]=document.getElementById（“InputEL”）.value；
数据[3]=document.getElementById（“InputCPFCNPJ”）.value；
数据[4]=document.getElementById（“InputEnterprise”）.value；
数据[5]=document.getElementById（“InputMessage”）.value；
google.script.run.setdata（数据）；
返回0；
}
诺姆
电子邮件
电传
CPF ou CNPJ
埃普雷萨酒店
男装
羡慕

首先，您需要正确导入引导CSS。其次，根据服务器端声明，需要使用大写字母D调用服务器端函数setData

<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
function getData(data) {
var data = [];
    data[0] = document.getElementById("InputName").value;
    data[1] = document.getElementById("InputEmail").value;
    data[2] = document.getElementById("Inputtel").value;
    data[3] = document.getElementById("InputCPFCNPJ").value;
    data[4] = document.getElementById("InputEnterprise").value;
    data[5] = document.getElementById("InputMessage").value;
     google.script.run.setData(data);
  }

</script>
<html lang="pt-br">
    <body>
        <form role="form">

            <div class="form-group col-xs-12">
                <label class="sr-only" for="InputName">Nome</label>
                <input type="text" class="form-control" id="InputName" placeholder="Nome">
            </div>

            <div class="form-group col-xs-12">
                <label class="sr-only" for="InputEmail">Email</label>
                <input type="email" class="form-control" id="InputEmail" placeholder="e-mail">
            </div>

            <div class="form-group">
                <div class="form-inline">
                    <div class="form-group col-xs-6">
                        <label class="sr-only" for="Inputtel">Telefone</label>
                        <input type="tel" class="form-control" id="Inputtel" placeholder="Telefone">
                    </div>
                    <div class="form-group col-xs-6">
                        <label class="sr-only" for="InputCPFCNPJ">CPF ou CNPJ</label>
                        <input type="number" class="form-control" id="InputCPFCNPJ" placeholder="CPF ou CNPJ">
                    </div>
                </div>
            </div>

            <div class="form-group col-xs-12">
                <label class="sr-only" for="InputEnterprise">Empresa</label>
                <input type="text" class="form-control" id="InputEnterprise" placeholder="Empresa">
            </div>

            <div class="form-group col-xs-12">
                <label class="sr-only" for="InputMessage">Mensagem</label>
                <textarea class="form-control" rows="3" id="InputMessage" placeholder="Mensagem"></textarea>
            </div>

            <div class="form-group col-xs-2">
                <button class="btn btn-default" type="submit" onclick="getData();">
                Enviar
                </button>
            </div>

        </form>

    </body>
</html>


函数getData（数据）{
var数据=[]；
数据[0]=document.getElementById（“InputName”）.value；
数据[1]=document.getElementById（“InputEmail”）.value；
数据[2]=document.getElementById（“InputEL”）.value；
数据[3]=document.getElementById（“InputCPFCNPJ”）.value；
数据[4]=document.getElementById（“InputEnterprise”）.value；
数据[5]=document.getElementById（“InputMessage”）.value；
google.script.run.setData（数据）；
}
诺姆
电子邮件
电传
CPF ou CNPJ
埃普雷萨酒店
男装
羡慕

嘿，梅斯特·穆伊托·格拉托！嘿，它正在工作，但是当按下按钮时，页面会说一些页面没有被打开，并且这些值不会进入正在运行的电子表格。不要忘记使用

返回HtmlService.createHtmlOutputFromFile（'index'）.setSandboxMode（HtmlService.SandboxMode.NATIVE）为了让它执行得更快：）谢谢Serge，这很有帮助@雷南，你用什么来访问电子表格？我找不到Javascript接口。