在Google腳本中創建一個引導表格

我們正在嘗試使用Bootstrap 3創建表單，並且他們的響應應該轉到Google Spreadsheet，我們試圖做但不工作，我們的問題是在google腳本中加載引導程序css html頁面，當按下按鈕時，將字段信息放入Google Spreadsheet中。在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>

來源

2014-02-10 Renan Otero

不要忘記使用'返回HtmlService.createHtmlOutputFromFile（ '索引'）setSandboxMode（HtmlService.SandboxMode.NATIVE）;' 得到它執行得更快:) –

謝謝嗶嘰，可以幫助！！ –

@Ranan，你用什麼來訪問電子表格？我找不到一個Javascript界面。 – goodcow

首先，您需要正確導入引導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>

來源

2014-02-10 20:37:55

嘿Mestre muito grato！ –

嘿，它的工作，但按下按鈕時，頁面說某個頁面沒有找到，並且這些值不會到達電子表格[script]（https://script.google.com/a/macros/itcld。 com.br/s/AKfycbwQHo6EsI4XB2XAx-po0b49ZTJRT_pUv_qUsCR3xz3LCbK6V_5Z/exec）正在運行。 –

現在工作 –

在Google腳本中創建一個引導表格

回答

相關問題