tengo el siguiente problema, tengo un botón que debería mostrar un modal con un formulario en su interior, pero el navegador me lanza el siguiente mensaje de error: Uncaught ReferenceError: formRol is not defined el código que tengo es: --------Archivo function_roles.js:
var formRol = document.querySelector("#formRol");
formRol.onsubmit = function(e)
{
e.preventDefault();
var intIdRol = document.querySelector('#idRol').value;
var strNombre = document.querySelector('#txtNombre').value;
var strDescripcion = document.querySelector('#txtDescripcion').value;
var intStatus = document.querySelector('#listStatus').value;
if (strNombre == '' || strDescripcion=='' || intStatus=='')
{
swal("Atención", "Todos los campos son obligatorios", "Error");
return false;
}...
y el archivo donde esta el modal es:
<div class="modal fade" id="modalFormRol" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header headerRegister">
<h5 class="modal-title" id="titleModal">Nuevo Rol</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="tile">
<div class="tile-body">
<form id="formRol" name="formRol">
<input type="hidden" id="idRol" name="idRol" value="">
<div class="form-group">
<label class="control-label">Nombre</label>
<input class="form-control" id="txtNombre" name="txtNombre" type="text" placeholder="Nombre del rol"
required="">
</div>
<div class="form-group">
<label class="control-label">Descripcion</label>
<textarea class="form-control" id="txtDescripcion" name="txtDescripcion" rows="2"
placeholder="Descripcion del rol" required=""></textarea>
</div>
<div class="form-group">
<label for="exampleSelect1">Estado</label>
<select class="form-control" id="listStatus" name="listStatus" required="">
<option value="1">Activo</option>
<option value="2">Inactivo</option>
</select>
</div>
<div class="tile-footer">
<button id="btnActionForm" class="btn btn-primary" type="submit"><i class="fa fa-fw fa-lg fa-check-
circle"></i><span id="btnText">Guardar</span></button> <a class="btn btn-secondary"
href="#" data-dismiss="modal"><i class="fa fa-fw fa-lg fa-times-circle"></i>Cancelar</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Alguien puede ayudarme con este error? me tiene loco y no se como solucionarlo. Gracias.