Tengo un formulario de login que se carga con ajax de javascript. Cuando hago click en enviar formulario, entra en la función que valida los campos, si todo es correcto hace el submit y entra bien en la consulta php en la que si el usuario existe debería enseñarme de nuevo la vista en la que estaba pero con la vista ajax cargada. ¿Alguien tiene idea de como hacerlo? Al hacer submit, recarga la página con header("Location:catalogo_index.php") pero yo necesito que recargue con la función comprar(). Agradezco de antemano!!
La vista principal:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Catálogo</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark sticky-top">
<a class="navbar-brand" href="#">Catálogo Lafcarr</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navb" class="navbar-collapse collapse hide">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class='nav-link' href='#' onclick='peticion_login();'><span class='fas fa-sign-in-alt'></span> Login</a>
</li>
</ul>
</div>
</nav>
<div id="login"></div>
<div id="comprar"></div>
</body>
</html>
La vista ajax de formulario:
<div class="container entrar" style="margin-top:20px; margin-bottom:10px;width: 500px;">
<h2 class="text-center">Inicio de sesión</h2>
<p id="mensaje" style="color:red;"></p>
<form action="login_data.php" role="form" name="miForm" method="post" class="form-in-line" >
<div class="form-group">
<label for="fusu" style="font-size: 18px;"><span id="tuUsu"></span>Usuario</label>
<input type="text" class="form-control" id="fusu" name="fusu" placeholder="usuario" onfocus="this.value='';this.style.borderColor='';"/>
</div>
<div class="form-group">
<label for="fcontra" style="font-size: 18px;" ><span id="contra"></span>Contraseña</label>
<input type="password" class="form-control" id="fcontra" name="fcontra" placeholder="contraseña" onfocus="this.value='';this.style.borderColor='';"/>
</div>
<div class="form-group">
<p><a href="recPassword.php" style="text-decoration: none;">¿Olvidó su contraseña?</a></p>
</div>
<div class="form-group text-left">
<input type="button" value="Enviar datos" name="enviar" id="mostraenvio" size=25 class="btn btn-primary float-left" onclick="testear();"/>
</div>
</form>
</div>
Las funciones javascript:
function peticion_login(){
var miObjeto=new XMLHttpRequest();
miObjeto.onreadystatechange=function(){
if(this.readyState==4 && this.status==200){
document.getElementById("login").innerHTML=this.responseText;
}
};
miObjeto.open("GET",'html_login.php',true);
miObjeto.send();
}
function testear(){
var b=true;
var miUsuario=document.miForm.fusu.value;
var patronUsuario=/^([A-Z a-z]{2,})+$/;
var resultadoUsuario=patronUsuario.test(miUsuario);
if(resultadoUsuario==true){
document.miForm.fusu.style.borderColor="green";
document.getElementById("tuUsu").innerHTML="";
}
else{
document.miForm.fusu.style.borderColor="red";
document.getElementById("tuUsu").innerHTML="*";
document.getElementById("tuUsu").style.color = "red";
b=false;
}
var miContrasenia=document.miForm.fcontra.value;
var patronContrasenia=/^([0-9A-Z a-z0-9]{2,})+$/;
var resultadoContrasenia=patronContrasenia.test(miContrasenia);
if(resultadoContrasenia==true){
document.miForm.fcontra.style.borderColor="green";
document.getElementById("contra").innerHTML="";
}
else{
document.miForm.fcontra.style.borderColor="red";
document.getElementById("contra").innerHTML="*";
document.getElementById("contra").style.color = "red";
b=false;
}
if(b==true){
alert(" sus datos se enviarán correctamente ");
document.miForm.enviar.style.display='';
document.getElementById("login").innerHTML="";
document.miForm.submit();
comprar();
}
else{ document.getElementById("mensaje").innerHTML="Corrija sus errores, por favor.";}
}
function comprar(){
var miObjeto=new XMLHttpRequest();
miObjeto.onreadystatechange=function(){
if(this.readyState==4 && this.status==200){
document.getElementById("comprar").innerHTML=this.responseText;
}
};
miObjeto.open("GET",'comprar.php',true);
miObjeto.send();
}
El archivo php:
$servidor='localhost';
$usuario='root';
$password='';
$bd='catalogo';
$conne=mysqli_connect($servidor,$usuario,$password,$bd) or die('problemas en la conexión'.mysqli_connect_error());
$sql="select * from users where fusu='$_REQUEST[fusu]' and fcontra='$_REQUEST[fcontra]'";
$resul=mysqli_query($conne,$sql) or die ("problemas con la consulta ".mysqli_error($conne));
if ($reg=mysqli_fetch_array($resul)) {
header("Location:catalogo_index.php");
}
else{
echo "<h2 style='margin:100px;text-align:center;'> Usuario no existe</h2>";
}
mysqli_close($conne);