0

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.
1
  • ¿Tienes el código Javascript arriba del formulario? Entonces ese es el problema, el formulario todavía no existe cuando intentas acceder. Pasa el código hasta abajo, antes de </body> o colócalo en una función que se ejecute hasta que se haya cargado el DOM.
    – Triby
    Commented el 20 nov. 2020 a las 20:56

3 respuestas 3

0

Bueno lo que dice ese error es: formRol no esta definido lo que puedes hacer es verificar con console log

Algo como esto

y revisar si llega algo o que pasa en el transcurso que realizas esas acciones

var formRol = document.querySelector("#formRol");

<!-- Bueno aquí verificamos que es lo que nos devuelve -->
console.log(formRol);



<!-- o talvez intenta agarrar al formulario con --> 
var formRol = document.getElementbyId("formRol");
console.log(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;
    }
}
0

Prueba cambiar el 'querySelector' con un 'getByElementId' El código te quedaría así:

var formRol = document.getElementById("formRol");
formRol.onsubmit = function(e)
{
    alert();
    e.preventDefault();
    var intIdRol = document.getElementById('idRol').value;
    var strNombre = document.getElementById('txtNombre').value;
    var strDescripcion = document.getElementById('txtDescripcion').value;
    var intStatus = document.getElementById('listStatus').value;
    if (strNombre == '' || strDescripcion=='' || intStatus=='') 
    {
        swal("Atención", "Todos los campos son obligatorios", "Error");
        return false;
    }
}
2
  • Gracias por las respuestas, pero como era de esperar, console.log(formRol) de vuelve null, y cambiando por var formRol = document.getElementById("formRol");, sigue dando el mismo error. Commented el 20 nov. 2020 a las 20:19
  • ¿Podrias mostrar más del archivo function_roles.js?
    – Gugox
    Commented el 20 nov. 2020 a las 21:59
0

Este es el archivo function_roles.js:

var tableRoles;

document.addEventListener('DOMContentLoaded', function(){

tableRoles = $('#tableRoles').DataTable( {
    "Processing":true,
    "aServerSide":true,
    "language": {
    "url": "//cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json"
    },
    "ajax":{
    "url": ""+base_url+"/Roles/getRoles",
    "dataSrc":""
    },
    "columns":[
    {"data":"idrol"},
    {"data":"nombrerol"},
    {"data":"descripcion"},
    {"data":"status"},
    {"data": "options"}
    ],
    "responsive":"true",
    "bDestroy":true,
    "iDisplayLength": 10,
    "order":[[0,"desc"]]
    });

    //NUEVO ROL
    formRol = document.querySelector("#formRol");
    console.log(formRol);
    formRol.onsubmit = function(e)
    {
    alert();
    e.preventDefault();
    var intIdRol = document.getElementById('idRol').value;
    var strNombre = document.getElementById('txtNombre').value;
    var strDescripcion = document.getElementById('txtDescripcion').value;
    var intStatus = document.getElementById('listStatus').value;
    if (strNombre == '' || strDescripcion=='' || intStatus=='') 
    {
    swal("Atención", "Todos los campos son obligatorios", "Error");
    return false;
    }

    var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new   ActiveXObject('Microsoft.XMLHTTP');
    var ajaxUrl = base_url+'/Roles/setRol';
    var formData = new FormData(formRol);
    request.open("POST", ajaxUrl, true);
    request.send(formData);
    request.onreadystatechange = function(){
    if (request.readyState == 4 && request.status == 200) {

    var objData = JSON.parse(request.responseText);

    if(objData.status){
    $('#modalFormRol').modal("hide");
    formRol.reset();
    swal("Roles de usuario", objData.msg, "success");
    tableRoles.ajax.reload(function(){

    fntEditRol();
    });
    } else {
    swal("Error", objData.msg, "error");
    }
    }
            
            
    }
    }

});

    $('#tableRoles').DataTable();

    function openModal()
    {
    document.querySelector('#idRol').value = "";
    document.querySelector('.modal-header').classList.replace("headerUpdate",     "headerRegister");
    document.querySelector('#btnActionForm').classList.replace("btn-info", "btn-primary");
    document.querySelector('#btnText').innerHTML = "Guardar";
    document.querySelector('#titleModal').innerHTML = "Nuevo Rol";
    document.querySelector("#formRol").reset();
    $('#modalFormRol').modal('show');
    }

    window.addEventListener('load', function(){
    fntEditRol();
    fntDelRol();
    }, false);

    function fntEditRol(){
    var btnEditRol = document.querySelectorAll(".btnEditRol");
    btnEditRol.forEach(function(btnEditRol){
    btnEditRol.addEventListener('click', function(){

    document.querySelector('#titleModal').innerHTML = "Actualizar Rol";
    document.querySelector('.modal-header').classList.replace("headerRegister", "headerUpdate");
    document.querySelector('#btnActionForm').classList.replace("btn-primary", "btn-info");
    document.querySelector('#btnText').innerHTML = "Actualizar";

    var idrol = this.getAttribute("rl");
    var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    var ajaxUrl = base_url+'/Roles/getRol/'+idrol;
    request.open("GET", ajaxUrl,true);
    request.send();

    request.onreadystatechange = function(){
    if (request.readyState == 4 && request.status == 200) {
                    
    var objData = JSON.parse(request.responseText);

    if (objData.status) 
    {
    document.querySelector("#idRol").value = objData.data.idrol;
    document.querySelector("#txtNombre").value = objData.data.nombrerol;
    document.querySelector("#txtDescripcion").value = objData.data.descripcion;

    if (objData.data.status == 1) 
    {
    var optionSelect = '<option value="1" selected class="notBlock">Activo</option>';

    }else{

    var optionSelect = '<option value="2" selected class="notBlock">Inactivo</option>';
    }

    var htmlSelect ='${optionSelect}
    <option value="1">Activo</option>
    <option value="2">Inactivo</option>
    ';
    document.querySelector("#listStatus").innerHTML = htmlSelect;
    $('#modalFormRol').modal('show');
    }else{
    swal("Error", objData.msg, "error");
    }
    }
    }
    
    });
    });
    }

function fntDelRol(){
    var btnDelRol = document.querySelectorAll(".btnDelRol");
    btnDelRol.forEach(function(btnDelRol){
    btnDelRol.addEventListener('click', function(){
    var idrol = this.getAttribute("rl");

    swal({
    title: "Eliminar rol",
    text: "¿Realmente quiere eliminar el rol?",
    type: "warning",
    showCancelButton: true,
    confirmButtonText: "Si, eliminar!",
    calcelButtontext: "No, cancelar!",
    closeOnConfirm: false,
    closeOnCancel: true
    }, function(isConfirm){

    if(isConfirm){
    var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    var ajaxUrl = base_url+'/Roles/delRol/';
    var strData = "idrol="+idrol;
    request.open("POST",ajaxUrl,true);
    request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    request.send(strData);
    request.onreadystatechange = function(){
    if(request.readyState = 4 && request.status == 200){
    var objData = JSON.parse(request.responseText);
    if(objData.status){
    swal("Eliminar!", objData.msg, "success");
    tableRoles.ajax.reload(function(){
    fntEditRol();
    fntDelRol();
    });
    } else{ 
    swal("Atencion!", objData.msg, "error");
    }
    }
    }
    }
    });

    });
    });
}

y este es el archivo del modal:

<!-- Modal -->
<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>

Por si te aclara algo te mando los dos archivos. Gracias.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.