I have a form that I use to send data to image.php from my home.php page.
<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>
When I put action = "image.php" the page takes me to image.php page and displays what I want which is the image I type in the search form. However what I want is the action to remain action="home.php" on the same page but get the image back and display it in the home.php page after the form is submitted.
I hear Sessions are a good way to solve this but I have no idea how to display it back in the same page once the form is submitted. I know one way to solve this is to put the image.php code in the home.php page but I am keeping the codes separate to keep it cleaner.
Thanks!
Form View:-
make a id="createForm" in your <form>
and id = "name" in input field.
<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>
Jquery Ajax Code:-
<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>
In your HTML
<div id="table1">
//Let jQuery AJAX Change This Text
</div>
data.php Page
<?php
//data.php
if(isset($_POST["name"]))
{
$name = $_POST["name"];
// select query with where clause name condition
echo $output;
}
?>
You can do this in several ways it all depends on what is going on on the 2nd file - are we staying there or just coming back with a response to the 1st one? because you can:
1st file:
<?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
}
2nd file:
<?php
$name = $_POST['name'] . " - Received!!!";
header("Location: 1st.php?response=$name");
The response will be in 1st.php:
The response: SomeNameValue - Received!!!
This is a very very simplified way - using header and $_GET method in the first file when the $_GET['response'] exists it shows the response and skips the form...
If you are planning on displaying something in the 2nd.php file than header is available for you but you can either create another form and send the response in a hidden input or use Javascript to window.location.assign("1st.php?response=") where $name variable is the $_POST['name'] after we processed it in 2nd.php.
But the first example is just form and PHP.