gpt4 book ai didi

javascript - 在 Google Script 中制作 Bootstrap 表单

转载 作者:行者123 更新时间:2023-11-29 14:53:31 25 4
gpt4 key购买 nike

我们正在尝试使用 Bootstrap 3 制作一个表单,他们的响应应该转到 Google 电子表格,我们尝试这样做但没有用,我们的问题是在谷歌脚本 html 页面中加载引导 css 以及当按钮是在 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>

最佳答案

首先,您需要正确导入 bootstrap 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>

关于javascript - 在 Google Script 中制作 Bootstrap 表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21683907/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com