CODEWITHSUNDEEP
formsheaderruntime-errorlocate
Brayan Martinez
Brayan Martinez

Reputation: 1

Problem with header Location:.. not working

What happens is that I want to make my form, when I click the send button, redirect me to another page where it prints the data that the user previously filled out in the form. I have already checked everything, in fact, if it saves the data correctly in the database, and I can directly access the link and it shows it as I would like, the problem is that when I hit send, I get an alert with the code of the file that is redirecting me. I am hosted on hostinger, I don't know if I need to do anything additional or what?

This is my code call process_form.php

<?php
$servername = "--";
$username = "--";
$password = "--";
$dbname = "--";



$conn = new mysqli($servername, $username, $password, $dbname);


if ($conn->connect_error) {
    die("Error de conexión: " . $conn->connect_error);
}


$nombreCompleto = $_POST['nombre_completo'];
$celular = $_POST['celular'];
$edad = $_POST['edad'];
$email = $_POST['email'];


$sql = "INSERT INTO personal_info (nombre_completo, celular, edad, email) 
        VALUES ('$nombreCompleto', '$celular', '$edad', '$email')";

// Ejecutar la consulta y verificar si fue exitosa
if ($conn->query($sql) === TRUE) {
     header("Location:../mostrar_datos.php");
    exit(); 
} else {
    echo "Error al almacenar datos: " . $conn->error;
}

// Cerrar conexión
$conn->close();
?>

and I want you to go to this page when you click send. this is my file mostrar_datos.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Datos Guardados</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="container">
    <h1>Datos Guardados</h1>

    <?php
   
    $servername = "--";
    $username = "--";
    $password = "---";
    $dbname = "--";

    $conn = new mysqli($servername, $username, $password, $dbname);

    if ($conn->connect_error) {
        die("Error de conexión: " . $conn->connect_error);
    }

 
    $sql = "SELECT * FROM personal_info ORDER BY id DESC LIMIT 1"; // Obtener el último registro insertado

    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        // Mostrar los datos guardados
        echo "<p>Estos son los datos que se han guardado:</p>";
        echo "<ul>";
        while ($row = $result->fetch_assoc()) {
            echo "<li><strong>Nombre Completo:</strong> " . $row["nombre_completo"] . "</li>";
            echo "<li><strong>Celular:</strong> " . $row["celular"] . "</li>";
            echo "<li><strong>Edad:</strong> " . $row["edad"] . "</li>";
            echo "<li><strong>Email:</strong> " . $row["email"] . "</li>";
        }
        echo "</ul>";
    } else {
        echo "No se encontraron datos.";
    }

    
    $conn->close();
    ?>

    <a href="index.html">Volver al Formulario</a>
</div>

</body>
</html>

and this my Js

document.getElementById("personalInfoForm").addEventListener("submit", function(event) {
    event.preventDefault(); 
    

    var nombreCompleto = document.getElementById("nombre_completo").value;
    var celular = document.getElementById("celular").value;
    var edad = document.getElementById("edad").value;
    var email = document.getElementById("email").value;

    
    if (nombreCompleto === '' || celular === '' || edad === '' || email === '') {
        alert("Por favor completa todos los campos.");
        return; 
    }

   
    var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailPattern.test(email)) {
        alert("Por favor ingresa un correo electrónico válido.");
        return; 
    }

    
    var formData = new FormData();
    formData.append("nombre_completo", nombreCompleto);
    formData.append("celular", celular);
    formData.append("edad", edad);
    formData.append("email", email);

   
    fetch("process_form.php", {
        method: "POST",
        body: formData
    })
    .then(response => {
        if (response.ok) {
            return response.text();
        }
        throw new Error("Error al enviar los datos al servidor.");
    })
    .then(data => {
        alert(data); // Mostrar mensaje de éxito o error
        // Puedes redirigir o realizar otras acciones después de enviar el formulario
    })
    .catch(error => {
        console.error("Error:", error);
        alert("Hubo un problema al procesar el formulario.");
    });
    
});

Upvotes: 0

Views: 15

Answers (0)

Related Questions