Results in one page

Question

devilhacker 0 Unverified User

12 Years Ago

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.

php

2 Contributors
9 Replies
249 Views
1 Day Discussion Span
Latest Post 12 Years Ago Latest Post by cereal

cereal 1,524 Nearly a Senior Poster

12 Years Ago

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!

cereal 1,524 Nearly a Senior Poster

12 Years Ago

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.

cereal 1,524 Nearly a Senior Poster

12 Years Ago

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>

Reply to this topic

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.

devilhacker 0 Unverified User · Answer 1 · 2012-06-11T14:02:23+00:00

devilhacker 0 Unverified User

12 Years Ago

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?

This attachment is potentially unsafe to open. It may be an executable that is capable of making changes to your file system, or it may require specific software to open. Use caution and only open this attachment if you are comfortable working with zip files.

phptest.zip (2.28 KB)

devilhacker 0 Unverified User · Answer 2 · 2012-06-12T06:54:47+00:00

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 :/

cereal 1,524 Nearly a Senior Poster Featured Poster · Answer 3 · 2012-06-12T07:31:05+00:00

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;

devilhacker 0 Unverified User · Answer 4 · 2012-06-12T13:26:24+00:00

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.

devilhacker 0 Unverified User · Answer 5 · 2012-06-13T09:15:02+00:00

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

cereal 1,524 Nearly a Senior Poster Featured Poster · Answer 6 · 2012-06-13T10:19:16+00:00

cereal 1,524 Nearly a Senior Poster

12 Years Ago

You're welcome, bye ;D