Skip to first unread message
Caio
Oct 18, 2019, 3:45:06 PM10/18/19
to Google Apps Script Community
I am trying to create a form in Google Scripts. I used Materialize to help with the layout. But after finishing the layout of the form, the save button does not respond to the command and the page turn in white.
the page code:
<!DOCTYPE html>
<html lang="en">
<head>
<?!= include("pgcss"); ?>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>Sigefin</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<!--Cabeçalho -->
<nav class="light-blue lighten-1" role="navigation">
<div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">SISGEFIN</a>
<ul class="right hide-on-med-and-down">
<li><a href="#">Início</a></li>
<li><a href="#">Empenho</a></li>
</ul>
<ul id="nav-mobile" class="sidenav">
<li><a href="#">Início</a></li>
<li><a href="#">Empenho</a></li>
</ul>
<a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</div>
</nav>
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<br>
<h1 class="header center orange-text">Cadastro de Empenhos</h1>
<br><br>
</div>
</div>
<div class="container col s12">
<div class="row">
<form class="col s12">
<div id="empenho" class="col s12">
<div class="amber lighten-5 row">
<nav>
<div>
<ul id="tab" class="tabs tab">
<li class="tab col s2"><a href="#empenho">Empenho</a></li>
<li class="tab col s2"><a href="#fornecedor">Fornecedor</a></li>
<li class="tab col s2"><a href="#contabil">Contábil</a></li>
<li class="tab col s2"><a href="#licitacao">Licitação</a></li>
<li class="tab col s2"><a href="#destino">Destino</a></li>
<li class="tab col s2"><a href="#itens">Itens</a></li>
</ul>
</div>
</nav>
</div>
<div class="row">
<div class="input-field col s6">
<h5>Empenho</h5>
</div>
<div class="input-field col s6" style="text-align:right;">
<a class="waves-effect waves-teal btn-flat" href="#index-banner">topo</a>
</div>
</div>
<div class="row">
<div class="input-field col s4">
<input id="nmEmp" type="text" class="validate" style="text-align:right;">
<label for="nmEmp">Empenho</label>
</div>
<div class="input-field col s3">
<a class="waves-effect waves-light btn">Buscar</a>
</div>
<div class="input-field col s5">
<input id="vlrEmp" type="text" class="validate" style="text-align:right;">
<label for="vlrEmp">Valor do Empenho</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input id="dtEms" type="text" class="validate" style="text-align:right;">
<label for="dtEms">Data de Emissão</label>
</div>
<div class="input-field col s6">
<input id="dtEnv" type="text" class="validate" style="text-align:right;">
<label for="dtEnv">Data de Envio</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="ntDesp" type="text" style="text-align:right;">
<label for="ntDesp">Natureza de Despesa</label>
</div>
</div><br/>
</div>
<div id="fornecedor" class="col s12">
<div class="row">
<div class="input-field col s6">
<h5>Fornecedor</h5>
</div>
<div class="input-field col s6" style="text-align:right;">
<a class="waves-effect waves-teal btn-flat" href="#index-banner">topo</a>
</div>
</div>
<div class="row">
<div class="input-field col s4">
<input id="cnpj" type="text" class="validate" style="text-align:right;">
<label for="cnpj">CNPJ</label>
</div>
<div class="input-field col s3">
<a class="waves-effect waves-light btn">Buscar</a>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="forn" type="text" class="validate" style="text-align:right;">
<label for="forn">Fornecedor</label>
</div>
</div>
<br/>
</div>
<div id="contabil" class="col s12" >
<div class="row">
<div class="input-field col s6">
<h5>Contábil</h5>
</div>
<div class="input-field col s6" style="text-align:right;">
<a class="waves-effect waves-teal btn-flat" href="#index-banner">topo</a>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<select id="fundo" class="browser-default" style="text-align:left;">
<option value="" disabled selected>Selecione o Fundo Municipal</option>
<option value="01 - Gabinete do Secretário">01 - Gabinete do Secretário</option>
<option value="02 - Fundo Municipal do Idoso">02 - Fundo Municipal do Idoso</option>
<option value="03 - Funcriança">03 - Funcriança</option>
<option value="04 - Fundo Municipal do Patronato">04 - Fundo Municipal do Patronato</option>
<option value="05 - Fundo Municipal de Assistência Social">05 - Fundo Municipal de Assistência Social</option>
</select>
<script>
$(document).ready(function(){
$('select').formSelect();
});
</script>
</div>
</div>
<div class="row">
<div class="input-field col s2">
<input id="fonte" type="text" class="validate" style="text-align:right;">
<label for="fonte">Fonte</label>
</div>
<div class="input-field col s3">
<input id="conta" type="text" class="validate" style="text-align:right;">
<label for="conta">Conta</label>
</div>
<div class="input-field col s7">
<input id="recurso" type="text" class="validate" style="text-align:right;">
<label for="recurso">Recursos</label>
</div>
</div>
<br/>
</div>
<div id="licitacao" class="col s12" >
<div class="row">
<div class="input-field col s6">
<h5>Licitação</h5>
</div>
<div class="input-field col s6" style="text-align:right;">
<a class="waves-effect waves-teal btn-flat" href="#index-banner">topo</a>
</div>
</div>
<div class="row">
<div class="input-field col s3">
<input id="licit" type="text" class="validate" style="text-align:right;">
<label for="licit">Nº Licitação</label>
</div>
<div class="input-field col s4">
<select id="modLct" class="browser-default" style="text-align:left;">
<option value="" disabled selected>Selecione a Modalidade</option>
<option value="Pregão">Pregão</option>
<option value="Convite">Convite</option>
<option value="Tomada de Preço">Tomada de Preço</option>
<option value="Concorrência">Concorrência</option>
<option value="Concurso">Concurso</option>
<option value="Leilão">Leilão</option>
<option value="Dispensa">Dispensa</option>
<option value="Inexigibilidade">Inexigibilidade</option>
<option value="Chamada">Chamada / Chamamento Público</option>
</select>
<script>
$(document).ready(function(){
$('select').formSelect();
});
</script>
</div>
<div class="input-field col s5">
<label id="verfmod"></label>
<a class="waves-effect waves-light btn">Verificar</a>
</div>
</div>
<div class="row">
<div class="input-field col s3">
<input id="contr" type="text" class="validate" style="text-align:right;">
<label for="contr">Nº Contrato</label>
</div>
<div class="input-field col s4">
<select id="modCtr" class="browser-default" style="text-align:left;">
<option value="" disabled selected>Selecione a Modalidade</option>
<option value="Ata Reg. Preço">Ata Reg. Preço</option>
<option value="Contrato">Contrato</option>
</select>
<script>
$(document).ready(function(){
$('select').formSelect();
});
</script>
</div>
<div class="input-field col s5">
<label id="verfctr"></label>
<a class="waves-effect waves-light btn">Verificar</a>
</div>
</div>
<br/>
</div>
<div id="destino" class="col s12" >
<div class="row">
<div class="input-field col s6">
<h5>Destino</h5>
</div>
<div class="input-field col s6" style="text-align:right;">
<a class="waves-effect waves-teal btn-flat" href="#index-banner">topo</a>
</div>
</div>
<div class="row">
<div class="input-field col s4">
<select id="diretoria" class="browser-default" style="text-align:left;">
<option value="" disabled selected>Selecione a Diretoria</option>
<option value="Gabinete Secretário">Gabinete Secretário</option>
<option value="DIGSUAS">DIGSUAS</option>
<option value="DGFS">DGFS</option>
<option value="Patronato">Patronato</option>
<option value="DIPT">DIPT</option>
<option value="DIPE">DIPE</option>
<option value="DIPS">DIPS</option>
<option value="Conselhos">Conselhos</option>
</select>
<script>
$(document).ready(function(){
$('select').formSelect();
});
</script>
</div>
<div class="input-field col s6">
<select id="equip" class="browser-default" style="text-align:left;">
<option value="" disabled selected>Selecione a Unidade</option>
<optgroup label="Gabinete Secretário">
<option value="Gabinete">Gabinete</option>
<option value="Rede SMAS">DIGSUAS</option>
<option value="Sede SMAS">DIGSUAS</option>
</optgroup>
<optgroup label="DIGSUAS">
<option value="Gestão DIGSUAS"> Gestão DIGSUAS</option>
<option value="DVGTI">DVGTI</option>
<option value="Cursos">Cursos</option>
</optgroup>
<optgroup label="DGFS">
<option value="DVPLO">DVPLO</option>
<option value="DVLAB">DVLAB</option>
<option value="DVETR">DVETR</option>
<option value="FMAS">FMAS</option>
<option value="Funcriança">Funcriança</option>
<option value="FMI">FMI</option>
</optgroup>
<optgroup label="Patronato">
<option value="Patronato">Patronato</option>
</optgroup>
<optgroup label="DIPE">
<option value="Gestão Dipe">Gestão DIPE</option>
<option value="Creas I - PAEFI">Creas I - PAEFI</option>
<option value="Creas II - PPSC/LA">Creas II - PPSC/LA</option>
<option value="Creas III - Centro POP">Creas III - Centro POP</option>
<option value="Casa de Passagem (CP) I - Mão Amiga">Casa de Passagem (CP) I - Mão Amiga</option>
<option value="Casa de Passagem (CP) II">Casa de Passagem (CP) II</option>
<option value="Residência Inclusiva 1">Residência Inclusiva 1</option>
<option value="Residência Inclusiva 2">Residência Inclusiva 2</option>
<option value="Abrigo de Mulheres">Abrigo de Mulheres</option>
<option value="CRAM">CRAM</option>
</optgroup>
<optgroup label="DIPS">
<option value="Gestão DIPS">Gestão DIPS</option>
<option value="CRAS Norte">CRAS Norte</option>
<option value="CRAS Leste">CRAS Leste</option>
<option value="CRAS Oeste">CRAS Oeste</option>
<option value="CRAS Sul">CRAS Sul</option>
<option value="CRAS Nordeste">CRAS Nordeste</option>
<option value="DVSCFV">DVS Conviv. e Fort. de Vínculos</option>
<option value="Centro da Juventude">Centro da Juventude</option>
<option value="CCI Afra Roth">CCI Afra Roth</option>
<option value="DVSCU - PBF AS">DVSCU - PBF AS</option>
<option value="DVSCU - PBF ED">DVSCU - PBF ED</option>
<option value="DVSCU - PBF SD">DVSCU - PBF SD</option>
</optgroup>
<optgroup label="Conselhos">
<option value="Conselho Tutelar I">Conselho Tutelar I</option>
<option value="Conselho Tutelar I">Conselho Tutelar II</option>
<option value="Conselhos Municipais">Conselhos Municipais</option>
<option value="CMAS">CMAS</option>
<option value="CMDCA">CMDCA</option>
<option value="CMI">CMI</option>
<option value="Conselho Tutelar I e II">Conselho Tutelar I e II</option>
<option value="Cons. de Politicas sobre Drogas">Cons. de Politicas sobre Drogas</option>
</optgroup>
</select>
<script>
$(document).ready(function(){
$('select').formSelect();
});
</script>
</div>
</div>
<br/>
</div>
<div id="itens" class="col s12">
<div class="row">
<div class="input-field col s6">
<h5>Itens</h5>
</div>
<div class="input-field col s6" style="text-align:right;">
<a class="waves-effect waves-teal btn-flat" href="#index-banner">topo</a>
</div>
</div>
<div class="row">
<div class="input-field col s2">
<input id="codItem" type="text" class="validate" style="text-align:right;">
<label for="codItem">Código</label>
</div>
<div class="input-field col s10">
<input id="descItem" type="text" class="validate" style="text-align:right;">
<label for="descItem">Descrição</label>
</div>
</div>
<div class="row">
<div class="input-field col s2">
<input id="quant" type="text" class="validate" style="text-align:right;">
<label for="quant">Qtd.</label>
</div>
<div class="input-field col s4">
<input id="medida" type="text" class="validate" style="text-align:right;">
<label for="medida">Un. de Medida</label>
</div>
<div class="input-field col s4">
<input id="vlrUnit" type="text" class="validate" style="text-align:right;">
<label for="vlrUnit">Vlr. Unitário</label>
</div>
<div class="input-field col s2">
<a class="waves-effect waves-light btn">Inserir</a>
</div>
</div>
<div class="row">
<label id="listIten"></label>
</div>
<br/>
</div>
<div class="col s12">
<div class="row">
<div class="input-field col s12" style="text-align:right;">
<a class="waves-effect waves-teal btn-flat" href="#index-banner">topo</a>
</div>
</div>
<div class="row">
<div class="input-field col s3">
<button id="btSalvar">Salvar</button>
<script>
Logger.log("Iniciou a script");
document.getElementById("btSalvar").addEventListener("click",salvar,false);
Logger.log("passo evento");
function salvar(){
Logger.log("Iniciou a Função");
var obEmp = {};
Logger.log("Objeto");
obEmp.numero = document.getElementById("nmEmp").value;
obEmp.valor = document.getElementById("vlrEmp").value;
obEmp.dtEmissao = document.getElementById("dtEms").value;
obEmp.dtEnviado = document.getElementById("dtEnv").value;
obEmp.ntDespesa = document.getElementById("ntdesp").value;
obEmp.cnpj = document.getElementById("cnpj").value;
obEmp.forn = document.getElementById("forn").value;
obEmp.fundo = document.getElementById("fundo").value;
obEmp.fonte = document.getElementById("fonte").value;
obEmp.conta = document.getElementById("conta").value;
obEmp.recurso = document.getElementById("recurso").value;
obEmp.modLicitacao = document.getElementById("modLct").value;
obEmp.licitacao = document.getElementById("licit").value;
obEmp.modContrato = document.getElementById("modCtr").value;
obEmp.contrato = document.getElementById("contr").value;
obEmp.diretoria = document.getElementById("diretoria").value;
obEmp.unidade = document.getElementById("equip").value;
Logger.log("Script");
google.script.run.CadEmp(obEmp);
Logger.log("limpeza");
document.getElementById("nmEmp").value = "";
document.getElementById("vlrEmp").value = "";
document.getElementById("dtEms").value = "";
document.getElementById("dtEnv").value = "";
document.getElementById("ntdesp").value = "";
document.getElementById("cnpj").value = "";
document.getElementById("forn").value = "";
document.getElementById("fundo").value = "";
document.getElementById("fonte").value = "";
document.getElementById("conta").value = "";
document.getElementById("recurso").value = "";
document.getElementById("modLct").value = "";
document.getElementById("licit").value = "";
document.getElementById("modCtr").value = "";
document.getElementById("contr").value = "";
document.getElementById("diretoria").value = "";
document.getElementById("equip").value = "";
Logger.log("Concluido");
};
</script>
</div>
<div class="input-field col s3">
<a id="enviar" class="waves-effect waves-light btn"><i class="material-icons right">email</i>Enviar</a>
</div>
<div class="input-field col s3">
<a id="agendar" class="waves-effect waves-light btn"><i class="material-icons right">insert_invitation</i>Agendar</a>
</div>
<div class="input-field col s3">
<a id="cancelar" class="waves-effect waves-light btn"><i class="material-icons right">close</i>Cancelar</a>
</div>
</div>
</div>
</form>
</div>
</div>
<br><br>
<footer class="page-footer orange">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">SISGEFIN 2.0</h5>
<p class="grey-text text-lighten-4">Sistema de Gestão Financeira do Sistema Único de Assistência Social da Prefeitura Municipal de Foz do Iguaçu / Paraná</p>
</div>
<div class="col l3 s12">
</div>
<div class="col l3 s12">
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Copyright © 2019 - Secretaria Municipal de Foz do Iguaçu / PMFI - Todos os direitos reservados.
</div>
</div>
</footer>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<?!= include("pgjsc"); ?>
</body>
</html>
the macro code:
function doGet(e) {
Logger.log(e);
return HtmlService.createTemplateFromFile("CadEmpenho").evaluate();
}
function CadEmp(obEmp) {
Logger.log(obEmp);
var url = "stay here the google sheets spreadsheet url.";
var spreadsheet = SpreadsheetApp.openByUrl(url);
var insercao = retornaDataHoraAtual();
if(obEmp.dtEnviado == ""){
obEmp.dtEnviado = obEmp.dtEmissao;
}
spreadsheet.getSheetByName('Empenho').appendRow([
insercao, obEmp.numero, obEmp.dtEmissao, obEmp.ntDespesa, obEmp.modLicitacao, obEmp.licitacao, obEmp.modContrato, obEmp.contrato, obEmp.diretoria, obEmp.unidade,
obEmp.valor, obEmp.cnpj, obEmp.fundo, obEmp.fonte, obEmp.conta, obEmp.recurso, obEmp.dtEnviado]);
};
Andrew Roberts
Oct 18, 2019, 5:12:02 PM10/18/19
to Google Apps Script Community
You need to add a little script to the HTML file to stop the default event on the form submission:
<script>
function preventFormSubmit() {
var forms = document.querySelectorAll('form')
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
})
}
} // preventFormSubmit()
window.addEventListener('load', preventFormSubmit)
</script>
Caio
Oct 21, 2019, 10:56:07 AM10/21/19
to Google Apps Script Community
First, thanks Andrew for your help.
I put your code before the button script. I ran the test and the white page did not appear, but the function I made to save did not work anyway.
Did i do something wrong?
Reply all
Reply to author
Forward
0 new messages