Hello Everyone ,

I am struggling with PHP. It's working, just not how I want it to work. I must add, I am a complete noob in php, html and so on coding. Here are some of my codes :

index.php html form :
Code:
    <form action="index.php" method="POST">
        <input type="text" name="query" class="abcdef"/><br/>
	    <input type="submit" value="Search"/>
    </form>
index.php php code :
Code:
<?php

$host = "data";
$user = "data";
$pass = "data";
$dbase = "data";
$dtabl = "data";

    $con = mysqli_connect($host, $user, $pass, $dbase) or die("Error connecting to database: ".mysqli_error());
echo "<div id='ovisible'>";
     
echo "<div><a href='#' onclick='ovisible()'><b>close</b></a><br/><h1><u> Search Results</u></h1>";	

	if (isset($_POST['query']))
	{
	$query = $_POST['query'];

    if(strlen($query))
	{
        $query = htmlspecialchars($query);
         
        $query = mysqli_real_escape_string($con,$query);
         
        $raw_results = mysqli_query($con,"SELECT * FROM data WHERE (`cname` LIKE '%".$query."%') ") or die(mysqli_error());
          
        if(mysqli_num_rows($raw_results) > 0)
		{ 
             
            while($results = mysqli_fetch_array($raw_results)){

             
                echo "<p><h3>".$results['name']."</h3>".$results['surname']."</p>";
            }
        }
        else
		{ 
            echo "No results";
        }
	}
	}
	else{echo "No search defined ! ";}
echo "</div>";
  
echo "</div>";
css
Code:
#ovisible{display:none;position: absolute;left: 0px;top: 0px;width:100%;z-index: 1000;background-color:#000;filter:alpha(opacity=80);text-align:center;-moz-opacity:0.9;opacity:0.9
html head function
Code:
<script>

function osearch()
{
	xyz = document.getElementById("ovisible");
	xyz.style.display = (xyz.style.display == "block") ? "none" : "block";
}
</script>
Lange Rede kurzer sinn : I am trying to show the results INSIDE my overlay (ovisible) WITHOUT the page reloading on form (action="index.php"). If I add onclick="ovisible()" to the input type=submit in the form, then it will open and close the overlay because action="index.php" will reload the page. If I set action="index.php" to action="", action="#" then it doesn't work. Removing the entire input button and placing it beneath the form works, but doesn't return the text to the php and thus it doesn't compute the text box string at all :

Code:
    <form action="index.php" method="POST">
        <input type="text" name="query" class="abcdef"/><br/>

    </form>

	    <input type="submit" value="Search" onclick="ovisible()"/>
I would like to know, if there is a easy way to get the results to display on my index.php page, without reloading my page ? Someone on another forum, mentioned I should
You can create your search.php to return only JSON string, and making an AJAX call using javascript fetch the JSON response from the search.php and render the data using JavaScript.

You can use JQuery or AngularJS. Both will do the needful for you.
and I was like ... huh ? I have no idea where to start or what that even means. Is that even English ? See, I would like the above to work, as it does actually work in the sense that it just isn't displayed where and how I want it : The functionality works nicely. Here are a few examples of how I would like to see it done : None that some code and commands are mere imaginations :

1.) the input submit must show the overlay page with results

2.) Maybe I can remove the php code completely and add it to the "search.php" file and use action="search.php" BUT somehow forge the results INTO a page WITHIN a page almost like inception

3.) I rewrite the entire php into java or similar with my more than non existent java or similar coding skills :S