No me funciona el script

[diego7189]

Hola, soy nuevo en el foro y no se si esta bien puesto aquí el tema, el problema que tengo es el siguiente, resulta que estoy haciendo una verificación de un formulario de login a través de un script, pero no me funciona, el código es el siguiente. Os pongo también el fomulario para que lo veais, a ver si encontrais algún error. He probado a quitarle el action y el method al formulario, pero si lo hago no pasa nada.

Código:

<script>
	

		var READY_STATE_COMPLETE=4;
		var peticion_http = null;
		var XX;
 
		function inicializa_xhr()
		{
  			if(window.XMLHttpRequest) 
  			{
    		  return new XMLHttpRequest(); 
  		    }else if(window.ActiveXObject) 
  		    {
    		  return new ActiveXObject("Microsoft.XMLHTTP");
  		    }	 
		}
 
		function crea_query_string() 
		{
  		   var user = document.getElementById("login");
  		   var clave = document.getElementById("passw");
  		
  		  return "login=" + encodeURIComponent(user.value) +
                 "&passw=" + encodeURIComponent(clave.value);
		}
 
		function valida() 
		{
  		  peticion_http = inicializa_xhr();
  		  if(peticion_http) 
  		  {
    	    peticion_http.onreadystatechange = procesaRespuesta();
    	    peticion_http.open("POST", "http://www.sistemagrial.es/sig/service/autentication.php", true);
 
    	    peticion_http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    	    var query_string = crea_query_string();
    	    peticion_http.send(query_string);
    	    
  		  }
		}
		
		
 
		function procesaRespuesta() 
		{
  		   if(peticion_http.readyState == READY_STATE_COMPLETE) 
  		   {
    		 if(peticion_http.status == 200) 
    		 {
    		   document.getElementById("respuesta").innerHTML = peticion_http.responseText;
    		   
    	     }
    	     
  		   }
  		  
		}
        
	
	 	</script>
	 	
<div data-role="page" id="inicio">
	 	
	 	<div data-role="header">
	 	 <h1>Login</h1>
	 	</div>
	 	
	 	<div data-role="content">
	 	 <form id="formulario" action="http://www.sistemagrial.es/sig/service/autentication.php" method="POST">
	 	 <input type="text" id="login" name="login" placeholder="login" required>
	 	 <input type="password" id="passw" name="passw" placeholder="passw" required>
	 	 <input type="submit" value="Acceder" id="submit" onClick="valida()">
	 	 <input type="reset" name="Borrar" id="Borrar" value="Reset" class="boton">
	 	 </form>
	 	</div> 
	 	</div>
	 	<div id="respuesta">
	 	</div>

[Alexis88]

Si estás realizando una petición asíncrona, debes de cancelar el envío de los datos del formulario para que pueda ejecutarse el código que nos muestras.

En lugar de ejecutar la primera función al darle clic al botón de envío, mejor asígnala al formulario cuando se produzca el evento submit que es el que ocurre cuando se envían los datos. El método preventDefault es el que necesitas utilizar para eso.

Código HTML:

<form id="formulario" onsubmit="cancelar(event)">
 

Código Javascript:

function cancelar(evento){
    evento.preventDefault(); //Cancelo el envío de los datos
    valida(); //Ejecuto la primera de tus funciones
}
 

Saludos

[diego7189]

He probado lo que me has dicho, pero sigue sin solucionarse porque parece que va a pasar de página y vuelve a la página de login. Gracias por la ayuda de todas formas.

[Alexis88]

Si nos mostraras el código actualizado y nos dijeras qué es lo que sucede ahora, podremos ayudarte.

Saludos

[diego7189]

Este es el código actualizado:

Código:

<script>
	    
	    function cancelar(event)
	    {
	       event.preventDefault();
	       valida();
	    }

		var READY_STATE_COMPLETE=4;
		var peticion_http = null;
		var XX;
 
		function inicializa_xhr()
		{
  			if(window.XMLHttpRequest) 
  			{
    		  return new XMLHttpRequest(); 
  		    }else if(window.ActiveXObject) 
  		    {
    		  return new ActiveXObject("Microsoft.XMLHTTP");
  		    }	 
		}
 
		function crea_query_string() 
		{
  		   var user = document.getElementById("login");
  		   var clave = document.getElementById("passw");
  		
  		  return "login=" + encodeURIComponent(user.value) +
                 "&passw=" + encodeURIComponent(clave.value);
		}
 
		function valida() 
		{
  		  peticion_http = inicializa_xhr();
  		  if(peticion_http) 
  		  {
    	    peticion_http.onreadystatechange = procesaRespuesta();
    	    peticion_http.open("POST", "http://www.sistemagrial.es/sig/service/autentication.php", true);
 
    	    peticion_http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    	    var query_string = crea_query_string();
    	    peticion_http.send(query_string);
    	    
  		  }
		}
		
		
 
		function procesaRespuesta() 
		{
  		   if(peticion_http.readyState == READY_STATE_COMPLETE) 
  		   {
    		 if(peticion_http.status == 200) 
    		 {
    		   document.getElementById("respuesta").innerHTML = peticion_http.responseText;
    		   
    	     }
    	     
  		   }
  		  
		}
        
	
	 	</script>
	 	
	 	
	 	
	
	</head>
  
  <body onload="init();">
	 	
	 	<div data-role="page" id="inicio">
	 	
	 	<div data-role="header">
	 	 <h1>Login</h1>
	 	</div>
	 	
	 	<div data-role="content">
	 	 <form id="formulario" onsubmit="cancelar(event)">
	 	 <input type="text" id="login" name="login" placeholder="login" required>
	 	 <input type="password" id="passw" name="passw" placeholder="passw" required>
	 	 <input type="submit" value="Acceder" id="submit" onClick="valida()">
	 	 <input type="reset" name="Borrar" id="Borrar" value="Reset" class="boton">
	 	 </form>
	 	</div> 
	 	</div>
	 	<div id="respuesta">
	 	</div>

Lo que sucede es que hace un amago de que a pasar de la página de login pero vuelve a ella al instante.

[Alexis88]

Quita el onclick="valida()" del botón de envío y prueba.

Saludos

[diego7189]

Acabo de probar lo de quitar el onclick y sigue haciendo lo mismo