Im doing a searcher page where i place an input and acording to the data in the input, it search in the database for similar articles and displays in the boxes. but when i search something another header and input appears in the page. duplicated header and input
Ive tried asking chatgpt but it couldnt help me. I also searched but couldnt find anything similar.
<?php
session_start();
if ($_SESSION["user"] == "" || $_SESSION["premium"] == "") {
header("Location: index.php");
exit();
}
$valorInput = isset($_GET["valor"]) ? $_GET["valor"] : "";
include "dbconnect.php";
$resultados = array();
if (!empty($valorInput)) {
if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$stmt = $conn->prepare("SELECT name, description, link, imagelink, price FROM Articulos WHERE description LIKE ?");
$param = "%$valorInput%";
$stmt->bind_param("s", $param);
$stmt->execute();
$result = $stmt->get_result();
while ($row = $result->fetch_assoc()) {
$resultados[] = '<div class="template">
<img src="' . $row['imagelink'] . '" alt="' . $row['description'] . '">
<p>' . $row['name'] . '</p>
<p>' . $row['description'] . '</p>
<p>Precio: ' . $row['price'] . '</p>
</div>';
}
$stmt->close();
echo implode('', $resultados);
exit();
}
}
$conn->close();
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/inicio.css">
<title>Buscador de Productos</title>
</head>
<body>
<header>
<h1>Buscador de Productos</h1>
</header>
<div id="search-container">
<input type="text" id="search-box" oninput="actualizarVariable()" placeholder="Buscar productos...">
<div id="search-results" class="search-results-container"></div>
</div>
<div id="result-container" class="container">
<?php
for($i = 0; $i < 6; $i++) {
echo '<div class="template">
<img src="imagen1.jpg" alt="';
echo $valorInput;
echo '">
<p>Descripción del Producto 1</p>
</div>';
}
?>
</div>
<script>
function actualizarVariable() {
var valorInput = document.getElementById("search-box").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("result-container").innerHTML = this.responseText;
}
};
xhttp.open("GET", "inicio.php?valor=" + valorInput, true);
xhttp.send();
}
</script>
<script src="script.js"></script>
</body>
</html>
