Tengo un formulario que uso para enviar datos a image.php desde mi página home.php.
<form class="d-flex" action="" method="post"> <input class="rounded-0 form-control" type="text" name = "name" placeholder="Explore. . ." aria-label="Search"> <button class="border searchfeature" id= "show" type="submit"><i class="fa fa-search"></i></button> </form> Cuando pongo action = "image.php" , la página me lleva a la página image.php y muestra lo que quiero, que es la imagen que escribo en el formulario de búsqueda. Sin embargo, lo que quiero es que la acción permanezca action="home.php" en la misma página, pero recuperar la imagen y mostrarla en la página home.php después de enviar el formulario.
Escuché que las sesiones son una buena manera de resolver esto, pero no tengo idea de cómo volver a mostrarlo en la misma página una vez que se envía el formulario. Sé que una forma de resolver esto es poner el código image.php en la página home.php pero mantengo los códigos separados para mantenerlo más limpio.
¡Gracias!
Vista de formulario: -
make a id="createForm" in your <form>e id = "nombre" en el campo de entrada.
<form id="createForm" class="d-flex" action="" method="post"> <input class="rounded-0 form-control" type="text" name = "name" id = "name" placeholder="Explore. . ." aria-label="Search"> <button class="border searchfeature" id= "show" type="submit"><i class="fa fa-search"></i></button> </form>Código Jquery Ajax: -
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('#createForm').on('submit', function(e){ e.preventDefault(); var name = $('#name').val(); $.ajax({ type: "POST", url: "data.php", data: {name: name}, success: function(data){ $("#createForm")[0].reset(); $('#table1').html(data); } }); }); }); </script>en tu html
<div id="table1"> //Let jQuery AJAX Change This Text </div>Página de datos.php
<?php //data.php if(isset($_POST["name"])) { $name = $_POST["name"]; // select query with where clause name condition echo $output; } ?>Puede hacer esto de varias maneras, todo depende de lo que esté sucediendo en el segundo archivo: ¿nos quedamos allí o simplemente volvemos con una respuesta al primero? porque tú puedes:
1er archivo:
<?php if(isset($_GET['response'])){ echo 'The response: ' . $_GET['response']; } else { ?> <form id="createForm" class="d-flex" action="2nd.php" method="post"> <input class="rounded-0 form-control" type="text" name = "name" id = "name" placeholder="Explore. . ." aria-label="Search"> <button class="border searchfeature" id= "show" type="submit"><i class="fa fa-search">go</i></button> </form> <?php }2do archivo:
<?php $name = $_POST['name'] . " - Received!!!"; header("Location: 1st.php?response=$name");La respuesta estará en 1st.php:
The response: SomeNameValue - Received!!!Esta es una forma muy simplificada: usar el encabezado y el método $_GET en el primer archivo cuando existe $_GET['response'], muestra la respuesta y omite el formulario...
Si planea mostrar algo en el archivo 2nd.php, el encabezado está disponible para usted, pero puede crear otro formulario y enviar la respuesta en una entrada oculta o usar Javascript para window.location.assign("1st.php?response =") donde la variable $name es $_POST['name'] después de que la procesamos en 2nd.php.
Pero el primer ejemplo es solo formulario y PHP.