Hi,
Currently I am building a html page that has some fields to search items into database.
For the moment I am using 2 files index.html and search.php, in the page index.html I can input the word that I want
to search in the database and I send the inputs to the search.php file that it gives me the results in a table...
But here its the problem! This is a ugly way to do this.

Could anyone help me with an example how to make a seach page(.html) that interacts with a .php file, but it shows
the results on its page.

Recommended Answers

All 9 Replies

You can use:

  • Ajax to display results in your HTML page
  • an iframe
  • otherwise you need to make your page processable by PHP

in this last option you can mantain the .html extension if you need it, but you have to change the configuration file of your server or add a directive in the .htaccess file:

AddType application/x-httpd-php .html

show your code, someone will help you. Bye!

Thx for your help, but I am a beginner in web programming.
The files that I use are this:
Please could you modify them to work?

The simplest solution is to add an iframe:

<form action="search.php" target="result" method="post">
    <input type="text" name="msg" />
    <input type="submit" name="submit" value="send" />
</form>

<iframe name="result" src="search.php"></iframe>

If you want to use javascript, you can try JQuery, which is a framework and helps you to write code faster, this is an example:

<html>
<head>
    <title>search</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function(){

           $('#forma_kerkimit').submit(function(e) {
                e.preventDefault();

                $.ajax({
                  type: "GET",
                  url: "/phptest/search.php",
                  data: $('#forma_kerkimit').serialize(),
                  timeout: 30000,
                  cache: false,
                  error: function(){
                        $("#result").hide().html('server not responding');
                    },
                  success: function( msg ) {
                        $("#result").html(msg);
                  }
                });

            });

        });

    </script>
</head>
<body>

<!-- change this with your form -->
<form id="forma_kerkimit" method="get" action="/phptest/search.php">
    <input type="text" id="fname" name="fname" /><br />
    <input type="submit" name="search" id="search" value="search" />
</form>

<!-- display results from query -->
<div id="result"></div>

</body>
</html>

Here the important is that the form tag has the ID value of forma_kerkimit so the ajax request is done. The result div is where the script displays the query result. If your script is already working, just replace the form of this example with yours and it should work.

Bye.

I am trying to test what you have send me, but for the moment I am not getting any result. The page loads the results only when I open it for the first time, the search button doen't work. I know that I sholud have messed something :/

Are you testing this page from inside a server right? If you load the page locally (e.g. file:///index.html) it will not work.

Also, if you post the table structure and an example of the data, I can try to replicate the behave of your script. To get the table structure run the following commands in mysql client and paste results here:

show create table ial_programet;
show create table ial_institucionet;

I am testing the script from the localhost, but the deal is here it just works when I open for the first time the page and It shows all the items of the ial_programet Than the search button doesn't work. Here are the modified files that I have for the moment.

I removed the iframe and added the <div id="result"></div> since with javascript you need this and not the iframe. So try this:

<html>
<head>
    <title>search</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $('#forma_kerkimit').submit(function(e) {
                e.preventDefault();
                $.ajax({
                  type: "GET",
                  url: "http://localhost/phptest/search.php",
                  data: $('#forma_kerkimit').serialize(),
                  timeout: 30000,
                  cache: false,
                  error: function(){
                        $("#result").hide().html('server not responding');
                    },
                  success: function( msg ) {
                        $("#result").html(msg);
                  }
                });
            });
        });
    </script>
</head>
<body>
<!-- change this with your form -->
<form method="GET" action="http://localhost/phptest/search.php" id="forma_kerkimit">
    <table style="width:100%; /">
<tbody>
<tr>
      <td><label name= "programi_lb">Emri i programit</label></td>
      <td><label name="ckli_lb">Cikli i studimit</label></td>
      <td><label name="ial_lb">IAL</label></td>
</tr>
<tr>
     <td>
         <input style="width:100%" type="text" class="inputtext" name="programi" id="programi" tabindex="1" />
    </td>
    <td>
          <select style="width:100%" name="cikli_studimit" tabindex="2">
          <option></option>
          <option>Bachelor</option>
          <option>Diplomë 2 vjeçare</option>
          <option>Master profesional</option>
          <option>Master shkencor</option>
          <option>Doktoraturë</option>
          </select>
    </td>
      <td>
          <select name="ial" style="width:100%" tabindex="3">
          <option></option>
          <option>SHLUP "New York University - Tirana"</option>
          <option>SHLUP "Luarasi"</option>
          <option>Universiteti Katolik "Zoja e Këshillit të Mirë"</option>
          <option>Akademia e Filmit dhe Multimedias "Marubi"</option>
          <option>SHLUP "Universiteti "Marin Barleti""</option>
          <option>SHLUP "Universiteti Kristal"</option>
          <option>SHLUP "Justiniani I"</option>
          <option>SHLUP "Sevasti dhe Parashqevi Qiriazi"</option>
          <option>Universiteti Europian i Tiranës</option>
          </select>
      </td>
</tr>
<tr>
      <td><label name="lloji_programit_lb">Lloji i programit</label></td>
      <td><label name="koha_studimit_lb">Koha e studimit</label></td>
      <td><label name="gjuha_studimit_lb">Gjuha e studimit</label></td>
</tr>
<tr>
      <td>
          <select style="width:100%" name = "lloji_programit"tabindex="4">
          <option></option>
          <option>Publik</option>
          <option>Jo publik</option>
          </select>
      </td>
      <td>
          <select style="width:100%" name= "koha_studimit" tabindex="5">
          <option></option>
          <option>Full time</option>
          <option>Part time</option>
          </select>
      </td>
      <td>
          <select style="width:100%" name ="gjuha_studimit" tabindex="6">
          <option></option>
          <option>Shqip</option>
          <option>Anglisht</option>
          </select>
      </td>
</tr>
<tr>
<td><label name="akreditimi_lb">Akreditimi</label></td>
      <td><label name="vendodhja_lb">Vendodhja</label></td>
      <td><label name="fusha_studimit_lb">Fusha</label></td>
</tr>
<tr>      
      <td>
          <select name="akreditimi" size="1" style="width:100%" tabindex="7">
            <option></option>
            <option>Nuk ka hyrë në proces</option>
            <option>Në proces akreditimi</option>
            <option>Në proces follow-up</option>
            <option>I akredituar</option>
          </select>
      </td>
      <td>
          <select style="width:100%" name="vendodhja" tabindex="8">
          <option></option>
          <option>Tiranë</option>
          <option>Durrës</option>
          <option>Vlorë</option>
          <option>Elbasan</option>
          <option>Fier</option>
          <option>Shkodër</option>
          <option>Kukës</option>
          <option>Peshkopi</option>
          <option>Gjirokastër</option>
          <option>Korçë</option>
          <option>Lushnje</option>
          <option>Pogradec</option>
          <option>Sarand</option>
          </select>
      </td>
      <td>
          <select style="width:100%" name ="fusha" tabindex="9">
          <option></option>
          <option>Ekonomi</option>
          <option>Shkenca Natyrore</option>
          <option>Shkenca Politike</option>
          <option>Shkenca Mjekësore</option>
          </select>
      </td>
</tr>
<tr>
<td></td>
<td></td>
<td style="text-align:right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset"  value="Reseto fushat" />
    <input type="submit" name="submit" value="send" />
    </td>
</tr>
</tbody>
</table>  
</form>
<!-- display results from query -->
<div id="result"></div>
</body>
</html>

Wow you have solved my problem 'Celeal'. THX!

You're welcome, bye ;D

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.