CODEWITHSUNDEEP
javascriptphpjqueryhtml
Sparksido
Sparksido

Reputation: 625

How to display multiple rows of variables through an html tag

I have 3 pages, an html, javascript and php file. When one button is pressed in the html page, the php page searches a database for rows with the button's name as key and brings back a number of rows. I want to display all those rows in the html page but when I send back the data, it doesn't get displayed. here is my code from the three pages.

Html page

<button name = 'science'>      Science</button>
<button name = 'engineering'>  Engineering</button>
<button name = 'math'>         Math</button>
<button name = 'law'>          Law</button>
<button name = 'arts'>         Arts</button>
<button name = 'business'>     Business</button>
<button name = 'fiction'>      Fiction</button>
<button name = 'selfhelp'>     Self Help</button>
<button name = 'labequipment'> Lab Equipment</button>

<p id = 'feedback'></p>

<script type ="text/javascript" src ="jquery.js"></script>
<script type ="text/javascript" src ="catselect.js"></script>

javascript page

$(":button").click(function(){
    var cat = $(this).attr("name");

    $.get("trier.php",{input: cat}, function(data){
        $("#feedback").html(data);
    }); 
});

php page

if(isset($_GET['input'])){
    $catt = $_GET['input'];

        $info = "SELECT * FROM books WHERE (Category = '$catt')";

        while(mysqli_query($conn,$info)){
            $information = mysqli_query($conn,$info);
            $intel = mysqli_fetch_assoc($information);  

            echo $intel['Title'];
            echo nl2br("\n");
            echo $intel['Course'];
        }
}

I want to display many rows including a 'title' column and a 'course' columnn in the tag in the php page with the id = "display". Any ideas as to how I can modify my code to do that?

Upvotes: 3

Views: 1200

Answers (2)

Chris
Chris

Reputation: 652

You can do the simple way like how @Yanjun Lin suggested using html table on your php: if(isset($_GET['input'])){ $catt = $_GET['input'];

        $info = "SELECT * FROM books WHERE (Category = '$catt')";
        $html='';
        while(mysqli_query($conn,$info)){
            $information = mysqli_query($conn,$info);
            $intel = mysqli_fetch_assoc($information);  
            $html=$html.'<tr>';
            //echo $intel['Title'];
            //echo nl2br("\n");
            //echo $intel['Course'];

            $html=$html.'<td>'.$intel['Title'].'</td>';
            $html=$html.'<td>'.$intel['Course'].'</td>';
            $html=$html.'</tr>';
        }
       echo $html;

on your javascript:

$("button").click(function(){
var cat = $(this).attr("name");

$.get("trier.php",{input: cat}, function(data){
    $("#feedback").html(data);
});

on your html (change <p> tag to <table> tag):

<button name = 'science'>      Science</button>
    <button name = 'engineering'>  Engineering</button>
    <button name = 'math'>         Math</button>
    <button name = 'law'>          Law</button>
    <button name = 'arts'>         Arts</button>
    <button name = 'business'>     Business</button>
    <button name = 'fiction'>      Fiction</button>
    <button name = 'selfhelp'>     Self Help</button>
    <button name = 'labequipment'> Lab Equipment</button>

<table id = 'feedback'></table>

<script type ="text/javascript" src ="jquery.js"></script>
<script type ="text/javascript" src ="catselect.js"></script>

I did not test on your php, but do hope it works... also JSFiddle it would look something like this in javascript and html only. Also do consider using use json for proper standard like how @Yanjun Lin suggest

Upvotes: 0

Josh Lin
Josh Lin

Reputation: 2437

$(":button") should be $("button")

u can use php echo html of table but i suggest use json or use angularjs

id should not change frequently, id = "display" better use class="display" instead

Upvotes: 1

Related Questions