Refresh specific HTML content that retrieves data from MySQL

Question

So i have a form that that does a simple calculation, depending on the users input. If the results is a certain value then it stores that value in a database, then it displays that value on a page. But i have to refresh the whole page for it to retrieve the latest updated value from the the database and display on the page.

I know how to write code to refresh the whole page, but in this case i only need the section where the it displays to be refreshed.

The original form to calculate

  <div class="formC">
     <form action="" method="post">
        <label>Base Amount</label>
            <input type="text" name="base"</input>
                <label>Select Currency</label>
        <div class="custom-select">
           <span></span>
           <select name="cur_name">
              <option value="" selected>Choose a Base Currency</option>
              <option value="EUR">EUR</option>
              <option value="USD">USD</option>
           </select>
        </div>
        <button type="submit" value="Submit">SUBMIT</button>
     </form>
  </div>

The form that gets the new values from the database

<div class="formC">
     <form action="test.php" method="post">
        <label>Base Amount</label>
        <input type="text" name="base" id="new_base" value="<?php
              $results = mysqli_query($con, "SELECT * FROM contents_arr ORDER BY id DESC LIMIT 1");
              while($row = mysqli_fetch_array($results)){

              echo $row["new_base"];
              } 

              ?>">
         <div id="load_data"></div>
         <label>Select Currency</label>  
            <input type="text" name="cur_name" value="<?php 
            $results = mysqli_query($con, "SELECT * FROM gain_name_table ORDER BY id DESC LIMIT 1");
                 while($row = mysqli_fetch_array($results)){
                    echo $row["gain_name"];
                 }
            ?>">
        <button id="btn_submit" type="submit" value="Submit">SUBMIT</button>
     </form>
  </div>

Calculation

<?php 
$base = $_POST['base'];
$value = $_POST['val'];
$selected = $_POST['cur_name'];

if ($selected == 'EUR') {   
    $results_eur = $base * $value;
    // USD
 }elseif ($selected == 'USD') {      
     $results_usd = $base * $value;
 }

 if($selected == 'EUR'){
    $sql = "INSERT INTO calculation(new_base) VALUES('".$results_eur."')";
    mysqli_query($con,$sql);
 }elseif($selected == 'USD'){
    $sql = "INSERT INTO calculation(new_base) VALUES('".$results_usd"')";
    mysqli_query($con,$sql);
 }

Answer 1

I managed to find the solution for this code using Ajax and jQuery:

    $(document).ready(function(){
        $('#btn_submit').click(function(){
            var get_data = $('#new_base').val();
            
            if($.trim(get_data) != '')
                {
                    $.ajax({
                        url:"db2.php",
                        method:"POST",
                        data:{new_base:get_data},
                        dataType:"text",
                        success:function(data)
                        {
                            $('#new_base').val("");
                        }   
                    });     
                }   
        });         
        setInterval(function(){
            $('#load_data').load("fetch.php").fadeIn("slow")
        }, 1000);
    }); 

Answer 2

This can be done by creating a seperate php file and replacing the content on your page with the content of that other php page using javascript. This is not a full description on how to do it, just a hint on how this is done. There are plenty of resources where it is described in detail. One place to start could be here W3Schools Ajax & Php

getData.php

header('Content-Type: application/json; charset=utf-8');

// do your php database stuff here
$data = //...

$data = json_encode($data);

echo $data;

And in your main file, you can fetch() the content of your getData.php in javascript to get the latest result and then inject the results into your div using document.getElementById('content').innerHTML = ...

Using this method, only your div refreshed, not the whole page.