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>
loginForm
en el que cargar el contenido de la respuesta del servidor. Es posible que se te haya olvidado incluirlo?