Update table as soon as a new database table row is inserted-CodePudding

So I want to know how I should make a table, written in PHP 8, that updates as soon a new insert has been made in the database table (SQL Server 2019). I've created a simple table like this:

<table>
  <thead>
    <tr>
      <th>header1</th>
      <th>header2</th>
      <th>header3</th>
    </tr>
   </thead>
   <tbody>
     <tr>
       <td>text1.1</td>
       <td>text1.2</td>
       <td>text1.3</td>
     </tr>
  </tbody>
</table>

Then I've added a button that creates some input fields, and when these are submitted, the data is inserted into the database. But the only way I know to update the table is to reload the page so the table now has the new row. But I've seen websites that do this without reloading the site, and want to know how? My guess is to make some kind of listener, but how I dont know.

the submit button with some inputs could be something like this:

<form>
  <input type="text" id="html" name="fav_language" value="">
  <label for="html">HTML</label><br>
  <input type="text" id="css" name="fav_language" value="">
  <label for="css">CSS</label><br>
  <input type="text" id="javascript" name="fav_language" value="">
  <label for="javascript">JavaScript</label>
  <input type="submit" value="Submit">
</form>

All this should just be pure self written code, not JQuery or something like that.

CodePudding user response：

If you want your forms to submit without reloading, you should use AJAX. E.g. Almost all of the chat boxes in the websites use AJAX to submit information. I think this question will help you.

If you want to use AJAX with PHP you can simply make AJAX to call your PHP file for submitting information. Look at this page to learn more.

If you want to use AJAX without any library you can do that with XMLHttpRequest. more info