CODEWITHSUNDEEP
javascriptphpjqueryhtmlmysql
arok
arok

Reputation: 1845

Search MYSQL and display results inside the same html table using php and javascript

I have a drop down if the value selected in drop down its shows the data in html table regarding the value selected in dropdown, i have search box now search is working fine it displays result without refreshing the page ,problem is now its showing the drop down html table and searched value result on the same page ,but i want to display the searched result on the same html table,see my code below,can anyone guide me to do this thanks.

<html>

<select name="client" id="client" style="margin:-8px 0 0 1px;background-color:#E8E8E8;width:104px;position: absolute;"> 
<option value="">Select Client</option>
<?php
i am connection to mysql
$sql=mysql_query("xxxxxxxxxx");
$clientid=$_GET['clientid'];
while($row=mysql_fetch_assoc($sql))
{
if(strlen($_GET['clientid'])>0 && $_GET['clientid']==$row['clientid'])
{
print' <option id="client" name="client" value="'.$row['clientid'].'">'.$row['clientid'].' </option>';
}
else{
print' <option id="client" name="client" value="'.$row['clientid'].'">'.$row['clientid'].' </option>';
}
}
?>
</select>

     <form id="lets_search" action="" style="width:0px;margin:-27px 0 0;text-align:left;">
                   <input type="text" name="region" id="region"> 
                   <input type="text" name="country" id="country">
                   <input type="submit" value="search" name="search" id="search">
          </form>

     <div id="content"></div>

    <table id="CPH_GridView1"  >
    <thead class="fixedHeader">
    <tr>
    <th style=" width:103px">Region  </th>
    <th style=" width:102px" >Country </th>

    <tbody id="fbody" class="fbody" style="width:1660px" >
    <div id="content">
    <?php
    $client_id  = $_POST['title'];
    if($client_id!=""){
    $sql_selectsupplier  = "xxxxxxxxxxx";
    echo '   <td style="width:103px" class=" '.$rows["net_id"].'">'.$rows["clientid"].'</td>
             <td style="width:102px" id="CPH_GridView1_clientid" class=" '.$rows["net_id"].'">'.$rows["region"].'</td>';

    </div>
    </tbody>
    </table>

    </html>

//javascript on the same page

<script type="text/javascript">
      $(function() {
        $("#lets_search").bind('submit',function() {
         var valueregion = $('#region').val();
          var valuecountry = $('#country').val();
          $.post('clientnetworkpricelist/testdb_query.php',{valueregion:valueregion,valuecountry:valuecountry}, function(data){
             $("#content").html(data);
           });
           return false;
        });
      });
    </script>

testdb_query.php

<?php

$dbHost = 'localhost'; // usually localhost
$dbUsername = 'xxxxxx';
$dbPassword = 'xxxxxxxxxxxx';
$dbDatabase = 'xxxxxxxxxxxxxx';
$db = mysql_connect($dbHost, $dbUsername, $dbPassword) or die ("Unable to connect to Database Server.");
mysql_select_db ($dbDatabase, $db) or die ("Could not select database.");

$region=$_POST['valueregion'];
$country=$_POST['valuecountry'];
$clientid=$_POST['clientid'];

if (strlen($region) > 0 && $region!="" ){

                $sql_search.= " AND s.region = '".$region."' ";

                }

if (strlen($country) > 0 && $country!="" ){

                $sql_search.= " AND s.country = '".$country."' ";

                }
$query = mysql_query("SELECT * FROM supplierprice s,$clientid c WHERE s.supp_price_id = c.net_id $sql_search");

echo '<table>';

while ($data = mysql_fetch_array($query)) {

  echo '
  <tr>
        <td style="font-size:18px;">'.$data["region"].'</td>        
    <td style="font-size:18px;">'.$data["country"].'</td>
</tr>';

}

echo '</table>';
?>

Upvotes: 0

Views: 1683

Answers (2)

Arrok
Arrok

Reputation: 116

for best practice separate your php code from html - get all the data from the db in an array before rendering the html, and afetr that just use foreach in the html to parse each row.

put the DB login and connection in a differnet file and inlcude it with require_once() at top of the page

display errors for better understandig of your script 

ini_set('display_errors',1);
ini_set('display_startup_errors',1);
error_reporting(-1);

comment "i am connection to mysql" this line since it will bring an error in this format

After connecting to the DB initialize

$sql_search = ""; // otehrwise it will bring a notice when calling "$sql_search.="

and check the http_request so that it won't bring any errors when first accessing the page without the $_POST data

if ( $_SERVER['REQUEST_METHOD'] === 'POST')
{
   //code for displaying the new table with the post data
}

Upvotes: 1

khagesh
khagesh

Reputation: 948

Ok, I see two issues with your HTML code. One is that you are using two html elements with same ID ("content"), which is not the purpose of ID. Second, placing div inside the tbody is not valid HTML.

From your explanation I got that you are trying to show the result of both the actions in a single table. So, remove first div

    <div id="content"></div>

from code and update code inside $.post to something like this

    $("#CPH_GridView1").append(data);

Also, remove the div inside tbody as well.

Upvotes: 0

Related Questions