document is not defined

16/09/2020

0

Tenho uma aplicação WEB NodeJs+Javascript. Na minha view (FILTROS PARA RELATÓRIO) além dos inputs tenho um radio button onde seleciono o tipo de do relatório que será gerado. No meu Controller tenho acesso aos campos inputs (type=text) normalmente mas não tenho acesso aos inputs (type=radio). Abaixo vou colocar parte do código.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- As 3 meta tags acima *devem* vir em primeiro lugar dentro do `head`; qualquer outro conteúdo deve vir *após* essas tags -->
<title><%= title %></title>

<link rel="stylesheet" type="text/css" media="screen" href="/estilos/estilos.css" />
</head>
<body>
<header>
<nav class="menuBase">
<ul>
<li><a href="/">Início</a></li>
<li><a href="/estagio/relatorios">Voltar</a></li>
<li><a href=""> </a></li>
</ul>
</nav>
</header>

<main class=frmRelFiltros>
<ul class="nav nav-tabs">
<li class="active" id="home-tab"><a data-toggle="tab" href="#pagina1">Relatório de Contratos</a></li>
</ul>

<div class="tab-content">
<div id="pagina1" class="tab-pane fade in active">
<form action='/contratos/relatorios/RelContratosPrint' method="post" id="relAlunos">

<!--
primeira linha
-->
<br>
<div class="filtros" style="margin:15px">
<div class="row">
<div class="form-group col-md-6 col-md-offset-0">
<label>Código Contrato.:</label>
<input type="text" name="cod_ini" value="0"/> A <input type="text" name="cod_fim" value="999999" />
<br> <br>

<label>Ativo/Inativo...:</label>
<input type="text" name="atv_ini" value="A"/> A <input type="text" name="atv_fim" value="Z" />
<br> <br>

<div id="opcoesRelContratos" >
<p>Selecione o Tipo do Relatório:</p>

<input type="radio" id="tipoRel" name="padrao" value="padrao" checked=true>
<label for="padrao">Padrao-Conferência</label><br>

<input type="radio" id="tipoRel" name="alunos_empresas" value="alunos_empresas">
<label for="alunos_empresas">Identificação de Alunos por Empresa</label> <br>
</div>
</div>
</div>
</div>
<br>
<!--
botões de acão
-->

<div class="btn-acao" style="margin-bottom: 0px;">
<div class="row">
<div class="col-md-2 col-md-offset-1">
<button id="btn-executarRel" type="submit" class="btn btn-primary btn-block" >Executar </button>
</div>
<div class="col-md-2 col-md-offset-1">
<button type="button" id="btn-cancelarRel" class="btn btn-primary btn-block">Voltar</button>
</div>
</div>
</div>
<br>
</form>
</div> <!-- tab pagina 1 -->
</div>
</main>

<!-- JavaScript (Opcional) -->
<!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<script type="text/javascript" src="/js/funcoesCliente.js"></script>
<script type="text/javascript" src="/js/script.js"></script>

</body>
</html>

*** botão para submeter a view
<button id="btn-executarRel" type="submit" class="btn btn-primary btn-block" >Executar </button>

*** rota a ser executada ao sonfirmar a execução do relatório
<form action='/contratos/relatorios/RelContratosPrint' method="post" id="relAlunos">

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
arquivo: contratosRoutes.js

var contratosControllers = require('../controllers/contratosControllers.js');
module.exports = (app) => {
app.get('/contratos/relatorios/relContratos', contratosControllers.contratosRel);
app.post('/contratos/relatorios/RelContratosPrint', contratosControllers.printContratosRel);
}
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
arquivo: contratosControllers.js

const alunosController = require('../models/contratosModels.js');
const cnf_ambiente = require('../../config/config.js');

const moment = require('moment');

module.exports = {
printContratosRel,
}

function printContratosRel(req, res){
console.log("Data Inicial Normal: "+req.body.cad_ini)
console.log("Data Final Normal..: "+req.body.cad_fim)
console.log("++++++++++++++++++++ DATA NO FORMATO DE ENTRADA APÓS O POST ++########################")

// ++++++++++++ BAIXO O ERRO document is not defined

var radios = document.getElementsById("tipoRel");
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
console.log("Escolhido: " + radios[i].value);
}
}

cod_i = req.body.cod_ini;
cod_f = req.body.cod_fim;
atv_i = req.body.atv_ini;
atv_f = req.body.atv_fim;

console.log("Relatório >>>>>>>>>>>>>>>>>>>>>>>> "+cad_i + ' - '+ cad_f);
alunosController.buscarPrintContratosRel(
cod_i, cod_f,
atv_i, atv_f,
function(err, result){
if(result){
console.log("Encontrei registro de contratos.... Vou tratar das datas..");
for(var i = 0; i < result.length; i++ ){
result[i].cea_dtcadastro = moment(result[i].cea_dtcadastro).format("DD/MM/YYYY");
result[i].cea_dtalteracao = moment(result[i].cea_dtalteracao).format("DD/MM/YYYY");
result[i].cea_vigenciainicial = moment(result[i].cea_vigenciainicial).format("DD/MM/YYYY");
result[i].cea_vigenciafinal = moment(result[i].cea_vigenciafinal).format("DD/MM/YYYY");

}
}

if (err) {
throw err;
} else{
res.render('estagios/relatorios/frm_relContratosPrint.ejs',
{title: 'Contratos',
nomeUsuario: global.nomeUsuario,
codigoUsuario: global.codigoUsuario,
nomeFormulario: req.originalUrl,
obj_contratos: result,
});
}
});
}
Antônio Neto

Antônio Neto

Responder

Post mais votado

28/11/2020

Boa noite Antônio Neto,

A essa altura tenho quase certeza de que você já conseguiu resolver essa questão (quase 2 meses e meio depois) haha.

Mas o problema foi o seguinte:
Você atribuiu a dois elementos o mesmo ID. Diferentemente de uma classe, o ID deve ser único. No JavaScript, você tentou buscar esses elementos com o método getElementsById, mas esse método não existe.
Temos o método getElementById que buscará apenas um elemento com o ID especificado e temos o getElementsByClassName que retornará todos os elementos com a classe especificada. Podemos também usar o seletor querySelectorAll();

Para solucionar essa questão você pode:

- Trocar os IDs para classes
<input type="radio" class="tipoRel" name="padrao" value="padrao" checked=true>

<input type="radio" class="tipoRel" name="alunos_empresas" value="alunos_empresas">


- Utilizar querySelectorAll ou document.getElementsByClassName:
var radios = document.getElementsByClassName("tipoRel");

var radios = document.querySelectorAll(".tipoRel"); // Colocamos "." na frente por ser uma classe, se fosse ID colocaríamos "#"


É isso! Qualquer dúvida, só chamar. Até mais!

Lourenço Lima

Lourenço Lima
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar