Jump to content

Php Reloads Page


Recommended Posts

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 :

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


$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'];

        $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>";
            echo "No results";
    else{echo "No search defined ! ";}
echo "</div>";
echo "</div>";

#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


function osearch()
    xyz = document.getElementById("ovisible");
    xyz.style.display = (xyz.style.display == "block") ? "none" : "block";
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 :


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


        <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


Link to comment
Share on other sites

Now, I have a search page, that returns mysql query like so : 

echo "<a onclick='function1();function2();function3()'>",$row['compn'],"</a>";
echo "<form><input type='text' id='tester' value='",$row['compuid'],"' hidden='hidden'></input></form>";

Nothing on my page opens a new page or loads a new one. Everything basically resides on the same page. The results are displayed in another overlay :

<a onclick="function1();function2();function3()"></a>
<form><input id="tester" type="text" hidden="hidden" value="abcdefg"></input></form>

<a onclick="function1();function2();function3()"></a>
<form><input id="tester" type="text" hidden="hidden" value="mnopqrs"></input></form>

As you can see above, it kind of works BUT not like I want it to be :
If clicked on the top "link", it will load id="tester" into document.getElementById("tester").value; and then display abcdefg. If I click on the bottom link, it will again load tester and display abcdefg. HOW do I get the code or the php to load a dynamic attribute or something, so that if I click the below link, it will actually display mnopqrs ?

Note: When a result link is clicked, it should display more details on an overlay by reading off from the php. For example :

link 1 = Peter, LAW
link 2 = Kate, JOURNALISM

(click on link 1:)
Peter, BIO : Peter has been studying LAW for more than 2 years,
Peter was born on 24/05/1992. Picture of Peter

(click on link 2:)
Kate, BIO : Kate has been studying ...

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...