Display PHP string as an HTML table?

Question

I have a server side csv table. I want to apply a filter from my html page and see the see the filtered table on the html page;

My HTML code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta charset="utf-8">
  <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
  <meta name="dcterms.created" content="Wed, 30 Jun 2021 12:21:08 GMT">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
  <!-- Start of FORM -->
  <form method="post" action="w3.php">
    <input type="text" name="fname" value=""> <input type="submit" name="submit" value="submit">
  </form><!-- End of FORM -->
</body>
</html>

and the php code

<?php
$str = $val = "";
if ($_SERVER["REQUEST_METHOD"] == "POST")
{
    $val = $_POST['fname'];

    if (($file_handle = fopen("ratingsx.csv", "r")) !== false)
    {

        $row = 0;
        $str .= '<table>';
        while (($data = fgetcsv($file_handle, 1024, "|")) !== false)
        {
            $row++;
            if ($data[0] != $val && $row > 1) continue; // *** skip rows without '34' ***
            $str .= '<tr>';
            foreach ($data as $key => & $value)
            {
                $str .= "<td valign='top'>$value</td>";
            }
            $str .= '</tr>';
            $str .= '<tr><td><br></td></tr>';
        }

        $str .= '</table>';
        fclose($file_handle);
        echo $str;
    }
}
?>

The result $str I need to be displayed as a table on the html page. How can I pass it back?. Can anyone help me please?

(This is a reworked question)

DevWithZachary · Answer 1 · 2021-07-02T08:35:39.057

0

You can use Ajax for this. As it looks like you are already using jQuery. There's a great plugin for jQuery called Form which will do exactly what it sounds like you want. Make sure you give your form an id.

Here's how you'd use jQuery and that plugin:

$('#myForm')
    .ajaxForm({
        url : 'w3.php',
        dataType : 'json',
        success : function (response) {
            //Here you can then take the response and display it in some html element on the page
        }
    })
;

edited Jul 02 '21 at 08:35

answered Jul 02 '21 at 08:10

DevWithZachary

3,545
11
49
101

"It can't be done using plain javascript" is just plain wrong: https://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery – KhorneHoly Jul 02 '21 at 08:28
Answer updated to reflect that my solution is just one possibility based on jquery already being included in the page – DevWithZachary Jul 02 '21 at 08:36
Thank you @Zachary but I am new to this If you could point me in the right direction to displaying the response as a table. I've tried googling json to html table but there are so many different answers – Learning Jul 02 '21 at 09:15
@Learning you are already generating that table at your `w3.php` you just need to use `$("body").append(response)` inside success function of ajax where `response` will have `str` which is return from backend. – Swati Jul 02 '21 at 14:54
Thank you also @Swati that worked fine. How can I vote both you and Zachary for all your help? – Learning Jul 03 '21 at 03:58

Display PHP string as an HTML table?

1 Answers1