0

Estoy intentando hacer mi primera applicación web y tengo un problema con una llamada de un elemento del menú al formulario de login. Lo que tengo es lo siguiente: - Un archivo index.html tiene una serie de buttons y cada uno de ellos ejecuta una función JS - Las funciones JS están en un archivo aparte, menuhor.js, que está convenientemente linkado con un tag en el head de index.html. - Un tercer archivo, login.html, con el código html que define un form para que el usuario se pueda identificar.

El problema es que no sé como hacer que el script abra el form, y en modal. Es decir, de momento el resto de botones llaman a las funciones, que sólo muestran un alert. Más adelante ya me pondré con esas funciones, pero de momento quiero poder abrir el login form.

Gracias por vuestras indicaciones.

Paso el código de los archivos: - index.html (no está todo, sólo la parte que me interesa):

<html lang="es">
<head>
    <title>Docs In Order</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script type="text/javascript" src="js/menuhor.js"></script>
</head>
<body class="w3-light-grey">
    <!-- Barra horitzontal de menu -->
    <div class="w3-top">
      <div class="w3-bar w3-teal w3-card w3-large" style="z-index: 4">
        <a class="w3-bar-item w3-button w3-padding-large w3-hide-medium w3-hide-large w3-right" href="javascript:void(0)" onclick="myFunction()" title="Toggle Navigation Menu">
            <i class="fa fa-bars"></i>
        </a>
        <button class="w3-bar-item w3-button">Ejemplo</button>
        <button class="w3-bar-item w3-button" onclick="fnFiles()">Boton 1</button>
        <button class="w3-bar-item w3-button" onclick="fnDocum()">Boton 2</button>
        <button class="w3-bar-item w3-button" onclick="fnWorkF()">Boton 3</button>
        <button class="w3-bar-item w3-button" onclick="fnRepor()">Boton 3</button>
        <button class="w3-bar-item w3-button" onclick="fnSetup()">Boton 4</button>
        <button class="w3-bar-item w3-button" onclick="fnAbout()">Boton 5</button>
        <button class="w3-bar-item w3-button" onclick="fnLogin()">Log In</button>

      </div>
    </div>
</body>

  • mehuhor.js (sólo la función que me interesa)

     function fnLogin() {
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange=function() {
      if (xmlhttp.readyState===4 && xmlhttp.status===200) {
        document.getElementById("loginForm").innerHTML = xmlhttp.responseText;
      }
    }
    xmlhttp.open("GET","login.html",true);
    xmlhttp.send();
    }
    
  • loginform.html

    <html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
    <!-- Formulari de login -->
    <div id="loginForm" class="w3-modal">
        <div class="w3-modal-content w3-card-4 w3-animate-zoom" style="max-width:400px">
            <div class="w3-center">
                <br>
                <span onclick="document.getElementById('loginForm').style.display='none'" class="w3-button w3-large w3-transparent w3-display-topright" title="Close Modal">X</span>
            </div>
            <form class="w3-container" action="/action_page.php">
                <div class="w3-section">
                    <label><b>Username</b></label>
                    <input class="w3-input w3-border w3-margin-bottom" type="text" placeholder="Enter Username" name="usrname" required>
                    <label><b>Password</b></label>
                    <input class="w3-input w3-border" type="text" placeholder="Enter Password" name="psw" required>
                    <button class="w3-button w3-block w3-green w3-section w3-padding" type="submit">Login</button>
                    <input class="w3-check w3-margin-top" type="checkbox" checked="checked"> Remember me
                </div>
            </form>
            <div class="w3-container w3-border-top w3-padding-16 w3-light-grey">
                <button onclick="document.getElementById('loginForm').style.display='none'" type="button" class="w3-button w3-red">Cancel</button>
                <span class="w3-right w3-padding w3-hide-small">Forgot <a href="#">password?</a></span>
            </div>
        </div>
    </div>
     <!-- Final de Formulari de login -->
     </body>
    </html>
    
2
  • A simple vista lo que veo es que en el html no existe ningún elemento con la id loginForm en el que cargar el contenido de la respuesta del servidor. Es posible que se te haya olvidado incluirlo?
    – wallek876
    Commented el 14 ene. 2018 a las 9:28
  • Hola. Pues sí, no lo había incluido.Acabo de poner un div con el id="loginForm" pero tampoco lo carga. Entiendo que es suficiente con un div vacío, ¿no?, es decir, lo que quiero es que el código del form esté en el archivo login.html. ¿Se puede hacer así?. Lo pregunto porque el resto de opciones deberían mostrar otros contenidos, que de momento no he desarrollado del todo, y no quisiera que todos los contenidos estuvieran en el mismo archivo. Muchas gracias Commented el 14 ene. 2018 a las 19:46

1 respuesta 1

0

Ya tengo la respuesta, y había varias cosas para hacer: - En primer lugar, como dijo @wallek876, había que añadir un div en la página principal, en el que el id fuera el nombre, en este caso loginForm. En mi caso el código añadido era:

<div class="w3-modal" id="loginForm"></div>

Por otro lado estaba la función JavaScript. En mi caso se llama a la función fnLogin que está en un archivo aparte, y que como se puede ver en el código que envié dos días atrás, no está completa. El código, una vez completado es:

function fnLogin() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById("loginForm").innerHTML = xmlhttp.responseText;
    }
}
xmlhttp.open("GET","login.html",true);
xmlhttp.send();
document.getElementById("loginForm").style.display="initial";

}

Como se puede ver, he añadido la última línea. Lo que ocurría es que al ejecutar la función teniendo el tag con el div en el archivo principal, se cargaba el formulario, pero no aparecía en pantalla porque estaba oculto. Con esta última línea sí aparece, al cambiar el estado.

Por último, parece que no copié el código del formulario login.html. Lo copio a continuación. Cabe decir que en este código también había un div con el id="loginForm" y tuve que quitarlo, es decir, sólo debe aparecer en index.html. Lo dicho, el código del body es:
X Username Password Login Remember me Cancel Forgot password?

    <!-- Final de Formulari de login -->
</body>

Por cierto, y para terminar, estoy usando las plantillas de w3.css de la página w3Schools

Saludos

1

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.