Dear Experts

I have following codes

<?php 
    if(isset($_get['submit']))
    {
        // Connection variables 
        $host="localhost"; 
        $username="root"; 
        $password=""; 
        $db_name="asia";  

        // Connect to database 
        $con=mysqli_connect("$host", "$username", "$password"); 

        // Connect result 
        if(!$con){ 
            die('Error Connecting to Database: ' . mysqli_error()); 
        //die '<script type="text/javascript">alert("Error Connecting to Database"). mysqli_error($con);</script>';  
        } 
        else 
        { 
            echo "<script type=\"text/javascript\">alert(\"Connected\")" . mysqli_error($con) . ";</script>";  
        } 

        // Database Selection 
        $sel =mysqli_select_db($con,"$db_name"); 

        // Database Selection result 
        if(!$sel){ 
        die('Error selecting Database: ' . mysqli_error()); 
        } 
        else 
        { 
        //echo "Database Selected" . mysqli_error($con); 
        echo "<script type=\"text/javascript\">alert(\"Database Selected\")" . mysqli_error($con) . ";</script>";  
        } 
        //$result = mysqli_query("select sno,packing,weight from test");   
          $result = $con->query("select sno,packing,weight from test");  

         if(!$result){ 
          echo 'select query error or data not found'; 
          } 
          else 
          { 
          echo 'data found'; 

    }

              }
      ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>BROWSE DATA</title>
<style type="text/css">

    html {
    overflow:auto;
    }

    body {
    background-color:#FFFFFF;
    margin:0 auto;
    }


    #mypopup2
    {
    float: left;
    width: 250px; height: 350px;
    background: #90bade; 
    border: 1px solid #069;
    text-align:center;
    padding:2px;
    margin-top:150px;
    margin-left:50px;
    overflow:auto;
    }


    #header
    {
    background-color:#3399FF;
    background-position:left center;
    line-height:25px;
    font-size:22px;
    color:#FFFF33;
    font-weight:600;
    border-bottom:1px solid #6699CC;
    padding:10px;
    }

    .design12 {
    background-image:url(Images/disk.png);
    background-position:left center;
    background-repeat:no-repeat;
    background-color:#FF9;
    border:1px solid #88de85;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    font-size:15px;
    font-weight:700;
    font-family:verdana;
    color:#0d5f83;
    width:100px;
    cursor:hand;
    padding:9px;
    }

    .design13 {
    background-image:url(Images/reload_16.png);
    background-position:left center;
    background-repeat:no-repeat;
    background-color:#CF9;
    border:1px solid #88de85;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    font-size:15px;
    font-family:verdana;
    font-weight:700;
    color:#0d5f83;
    width:100px;
    cursor:hand;
    padding:9px;
    }


    .txt
    {
    width:150px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:300;
    }

    td
    {color:#6600CC;}

    </style>
</head>
<body>
<div id="mypopup2" >
  <div id="header"><img src="Images/book_open.png" align="left">Brows Data</div>
  <div style="margin-top:10px;">

    <form name="form1" method="get" action="#">

      <table border="1" cellpadding="1" cellspacing="1" bgcolor="silver" align="center" width="95%" >
        <th width="20%">Code</th>
          <th width="50%">Product</th>
          <th width="20%">Weight</th>
      </table>

      <div style="margin-top:125px;text-align:center;margin-top:100px;">
        <input type="submit" name="submit" value="Brow" class="design12">
        <input type="submit" name="button2" value="Clear" class="design13">
      </div>

    </form>

  </div>
</div>
</body>
</html>

When I run these codes it show following php file

[IMG]http://i40.tinypic.com/9jd5s6.jpg[/IMG]

By pressing Brows button, I want to display table data into above div under table columns

Please help

You would need to use a combination of jQuery, Ajax and PHP

could you help me more please?

please show me some examples to get such results.

You Can do this with AJAX

Check the below example :

Your form page (formpage.php)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>BROWSE DATA</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style type="text/css">

    html {
    overflow:auto;
    }

    body {
    background-color:#FFFFFF;
    margin:0 auto;
    }


    #mypopup2
    {
    float: left;
    width: 250px; height: 350px;
    background: #90bade; 
    border: 1px solid #069;
    text-align:center;
    padding:2px;
    margin-top:150px;
    margin-left:50px;
    overflow:auto;
    }


    #header
    {
    background-color:#3399FF;
    background-position:left center;
    line-height:25px;
    font-size:22px;
    color:#FFFF33;
    font-weight:600;
    border-bottom:1px solid #6699CC;
    padding:10px;
    }

    .design12 {
    background-image:url(Images/disk.png);
    background-position:left center;
    background-repeat:no-repeat;
    background-color:#FF9;
    border:1px solid #88de85;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    font-size:15px;
    font-weight:700;
    font-family:verdana;
    color:#0d5f83;
    width:100px;
    cursor:hand;
    padding:9px;
    }

    .design13 {
    background-image:url(Images/reload_16.png);
    background-position:left center;
    background-repeat:no-repeat;
    background-color:#CF9;
    border:1px solid #88de85;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    font-size:15px;
    font-family:verdana;
    font-weight:700;
    color:#0d5f83;
    width:100px;
    cursor:hand;
    padding:9px;
    }


    .txt
    {
    width:150px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:300;
    }

    td
    {color:#6600CC;}

    </style>
</head>
<body>
<div id="mypopup2" >
  <div id="header"><img src="Images/book_open.png" align="left">Brows Data</div>
  <div style="margin-top:10px;">

    <form name="form1" id="form1" method="get" action="#">

      <table border="1" cellpadding="1" cellspacing="1" bgcolor="silver" align="center" width="95%" id="myTable" >
        <tr><th width="20%">Code</th>
          <th width="50%">Product</th>
          <th width="20%">Weight</th>
          </tr>
      </table>

      <div style="margin-top:125px;text-align:center;margin-top:100px;">
        <input type="submit" name="submit" value="Brow" class="design12">
        <input type="hidden" name="request" value="getTableData"  />
        <input type="button" name="button2" value="Clear" class="design13">
      </div>

    </form>
<script type="text/javascript">
$(function() {
//remove all get values
$(".design13").click(function() {
    $("#myTable").find("tr:gt(0)").remove();
});

//get values
$( "#form1" ).submit(function( event ) {
    //clear previous result
    $("#myTable").find("tr:gt(0)").remove();
    $.post('request.php',$("#form1").serialize(),function(data) {
        //display new result
        $('#myTable').append(data); 
    });
    event.preventDefault();
});

});
</script>
  </div>
</div>
</body>
</html>

In your request.php

<?php
switch($_POST['request']) {
    case 'getTableData':
        //get the values from data base and echo the result as below
        echo "<tr><td>1</td><td>Product 1</td><td>100Kg</td></tr>
            <tr><td>2</td><td>Product 2</td><td>200Kg</td></tr>
            <tr><td>3</td><td>Product 3</td><td>100Kg</td></tr>
                ";  
    break;
}
?>
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.