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 exitosaif ($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."); });});