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); }
Advertisement
Answer
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); });