I am learning javascrit using the jquery library, and I have not been able to solve the following problem, which consists of a login that the user requests and constrasena, and if they agree with the user that is defined in a php file I should show the message that the user is correct. However, that does not happen. He always tells me it's wrong:
<script>
$(document).ready(function() {
//NOTA: el comportamiento default de submit, es que recargue la pagina despues de enviar los datos
$("#login").submit(function(){
var user = $("#usuario").val();
var pass = $("#contra").val();
alert(user+" "+pass);
//literal: paquete a enviar al servidor
var datosFormulario = {usuario:user, contra: pass}
//enviamos el paquete al servidor, y la respuesta se la mandamos a la funcion procesar datos
$.get("login.php", datosFormulario, procesarDatos());
return false;//desabilito el comportamiento default
});
function procesarDatos(datos_devueltos){
alert(datos_devueltos)
if(datos_devueltos=="autorizado"){
$("#contenidos_externos").html("<p> Usuario correcto. Bienvenido </p>");
}else{
$("#contenidos_externos").html("<p> Usuario incorrecto. Intenta de nuevo </p>")
}
}
});
</script>
php file:
$contra_entrar="1234";
$usu_entrar="Juan";
$el_usuario=isset($_GET['usuario']) ? $_GET['usuario'] : $_POST['usuario'];
$la_contra=isset($_GET['contra']) ? $_GET['contra'] : $_POST['contra'];
if ($el_usuario==$usu_entrar && $la_contra==$contra_entrar) {
echo 'autorizado';
} else {
echo 'fallo';
}
in the alert of the function to process data, it always tells me that the object is undefined, but no matter how much I have turned it around, there is no solution
PS: I'm also new to stackoverflow.
Form:
<div class="contenido">
<div class="principal">
<form method="get" action="login.php" id="login">
<table>
<tr>
<td>
<label for="usuario">Usuario:</label>
</td>
<td>
<input type="text" name="usuario" id="usuario">
</td>
</tr>
<tr>
<td>
<label for="contra">Contaseña: </label>
</td>
<td>
<input type="text" name="contra" id="contra">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="boton" id="boton" value="Enviar" >
</td>
</tr>
</table>
</form>
<div id="contenidos_externos"></div>
</div>
</div>