Show table data in div

Question

tqmd1 0 Junior Poster

11 Years Ago

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

php

Edited 11 Years Ago by tqmd1

3 Contributors
3 Replies
184 Views
4 Hours Discussion Span
Latest Post 11 Years Ago Latest Post by Bachu

simplypixie 123 Posting Pro in Training

11 Years Ago

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

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.

tqmd1 0 Junior Poster · Answer 1 · 2013-11-12T10:02:12+00:00

could you help me more please?

please show me some examples to get such results.

Bachu 45 Newbie Poster · Answer 2 · 2013-11-12T11:07:17+00:00

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;
}
?>