Submit a form data to another php page but display the result back to the same page from where the form was submitted?

Issue

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!

Solution

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;
}
?>

Answered By – KUMAR

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0