Este es el archivo php que contiene el nuevo contenido, para reemplazar .hotels cuando se envía el formulario.
<?php if(isset($_POST['submit'])){ $pdo = new PDO('mysql:host=localhost;dbname=CSV_DB', 'root', 'root'); $inputType = $_POST['type']; $inputCategory = $_POST['category']; $type = $pdo->query("SELECT * FROM Hotels WHERE Type LIKE '%$inputType%' AND Price_Range= '$inputCategory'"); foreach($type as $row){ echo"<div id='newHotels'>"; echo "<div class='hotelImage'></div>"; echo'<h4>'.$row['Hotel_Name']." ".$row['Rating']."*".'</h4>'." ".'<p>'.$row['Description'].'</p>'." "."Location: ".$row['Location']." ".'<h4 style="font-weight: bold">'."£".$row['Price']."p/p".'</h4>'; echo "</div>";} } ?>Aquí está el div original que muestra todos los hoteles en la base de datos cuando se carga la página y que quiero reemplazar con el nuevo contenido cuando se envía el formulario:
<div id="hotels"> <?php $pdo = new PDO('mysql:host=localhost;dbname=CSV_DB', 'root', 'root'); $display = $pdo->query('SELECT Hotel_Name, Description, Location, Rating, Price FROM Hotels'); foreach ($display as $row){ if($row) echo"<div id='hotel'>"; echo "<div class='hotelImage'></div>"; echo'<h4>'.$row['Hotel_Name']." ".$row['Rating']."*".'</h4>'." ".'<p>'.$row['Description'].'</p>'." "."Location: ".$row['Location']." ".'<h4 style="font-weight: bold">'."£".$row['Price']."p/p".'</h4>'; echo "</div>";} ?> </div>Y aquí está el Ajax que se supone que cambiará el contenido.
$(function () { $('form').on('submit', function (e) { e.preventDefault(); $.ajax({ type: 'post', url: 'form.php', data: $('form').serialize(), success: function(data) { $(".hotels").html(data); } }); }); }); Necesito ayuda para reemplazar el contenido de .hotels con los resultados de búsqueda de mi formulario cuando el formulario se envía, sin embargo, el div simplemente se vacía. Creo que necesito hacer que los datos sean iguales a los resultados de la búsqueda, pero no estoy seguro de cómo hacerlo.
enviado el registro de la consola dice que los datos no están definidos.
Debe definir los datos en la función de éxito.
$(function () { $('form').on('submit', function (e) { e.preventDefault(); $.ajax({ type: 'post', url: 'form.php', data: $('form').serialize(), success: function(data) { /* you missed variable data here */ $("#hotel").html(data); } }); }); });El registro de la consola que dice "datos" no está definido significa que no hay una variable llamada "datos". para resolver este problema, puede crear una variable global llamada "datos" o pasar "datos" como argumento a la función de éxito. Esto entonces se vería algo así:
$(function () { $('form').on('submit', function (e) { e.preventDefault(); $.ajax({ type: 'post', url: 'form.php', data: $('form').serialize(), success: function(data) { $("#hotel").html(data); } }); }); });