Skip to main content

No encuetra id y no funciona el botón

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 está 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">&times;</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>&nbsp;&nbsp;&nbsp;<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 sé cómo solucionarlo.
Gracias.