Home / Questions / 468210
Accepted
John Doe
Asked: 2022-07-12 13:32:01 +0800 CST 2022-07-12 13:32:01 +0800 CST

Activate or deactivate buttons in a bootstrap navbar with js through a login

  • 772

I have a website with a navbar and a login where I have several buttons, one activated (register) and the others deactivated. The idea is that when a user registers and logs in, the other buttons that are disabled are activated.

Here I have my navbar:

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="login.html">MiWeb.es</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Alta </a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" id ="Noticias" aria-disabled="true">Alta Noticia</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Alta productos</a>
        </li>
                <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Inscribirse</a>
        </li>
                <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="false">Otros</a>
        </li>
        
        <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle disabled" data-toggle="dropdown" href="#">Listados</a>        
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Listado Clientes</a>
          <a class="dropdown-item" href="#">productos</a>
          <a class="dropdown-item" href="#">etc</a>
        </div>
      </li>
               
    
    <li class="nav-item">       
    <div class="box">
    <input type="text" id="usuario" placeholder="Usuario" />    
    <input type="password" id="password" placeholder="Contraseña" /> 
    <input type="button" value="Iniciar sesión" onclick="Comprueba();"/>     
    </div>  
    <div id="mensaje"></div>   <!-- mensaje de usuario correcto o no   >-->
    </li>
    
      </ul>
    </div>
  </div>
</nav>

My js function for login:

    <script type="text/javascript">  
 function Comprueba(){
  var user = document.getElementById("usuario").value;
  var pass = document.getElementById("password").value;
  $.post("conexion.php",{usuario:user,password:pass},function(data){
      if(data!="NO"){ 
        $("#mensaje").html("<span class='verde'>Bienvenido "+ data+ "</span>"); 
        div = document.getElementById('Noticias'); //mostrar boton noticias.
        //div.style.display = ''; Esto lo tenia así antes y me funcionaba usando Css    

      else{  
        $("#mensaje").html("<span class='roja'>Usuario no válido</span>");
     }
  });   
 }

In my previous version, using css worked for me but using bootstrap and putting disabled I don't know how to access it or how to make it put enabled or directly remove disable to show it. I hope you can help me thanks.

javascript

1 Answers

  1. Best Answer

    Adding these two lines the function would be:

     <script type="text/javascript">  
 function Comprueba(){
  var user = document.getElementById("usuario").value;
  var pass = document.getElementById("password").value;
  $.post("conexion.php",{usuario:user,password:pass},function(data){
      if(data!="NO"){ 
        $("#mensaje").html("<span class='verde'>Bienvenido "+ data+ "</span>"); 
        div = document.getElementById('Noticias'); //mostrar boton noticias.
         $("#Noticias").removeClass( "disabled"); 
         $("#Noticias").addClass( "active");
         }
      else{  
        $("#mensaje").html("<span class='roja'>Usuario no válido</span>");
     }
  });   
 }
    • 0