document is not defined
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,
});
}
});
}
<!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
Curtidas 0
Melhor post
Lourenço Lima
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
- Utilizar querySelectorAll ou document.getElementsByClassName:
É isso! Qualquer dúvida, só chamar. Até mais!
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!
GOSTEI 1