PHP Update Data Without Page Refresh Using JQuery Ajax
Update data without page refresh using php,jquery ajax. Jquery ajax update and display data in mysql without page reloading using php. Jquery is used when you want to update data into databse without page reload with ajax and php.
Table of Content
- HTML Form
- Display Data into HTML Table Using Ajax
- Display row data into input fields on button click
- Update data without page refresh
1- Build HTML Form
Write basic html structure code. Create html form with three input fields and a button. The html form has myForm id. After this form closing tag below are two divs with unique ids one div will be used to display success or failure message of form submission and second div will be used to display data from mysql database table into html table.
Below is the code of html form using bootstrap.
<!--doctype html--> <html> <head> <title>update-data-without-page-reload</title> <link rel="stylesheet" href="style/bootstrap.min.css"/> <link rel="stylesheet" href="style/font-awesome.min.css"/> <script src="scripts/jquery-3.4.1.min.js"></script> </head> <body> <div class="container"> <h1 class="text-center">Update Data Without Page Refresh Using PHP Ajax</h1> <div class="row"> <form method="post" id="myForm"> <div class="col-md-4"> <input type="text" name="description" id="description" placeholder="Description" class="form-control" /> <input type="hidden" name="id" id="id" /> </div> <div class="col-md-4"> <input type="text" name="code" id="code" placeholder="Code" class="form-control" /> </div> <div class="col-md-4"> <input type="button" class="btn btn-primary" name="btnsubmit" id="btnsubmit" value="Save Changes" /> </div> </form> </div> <div class="row" id="div_response"></div> <div id="div_table"></div> </div> </body> </html>
2- Display Data into HTML Table Using Ajax
Write a script opening and closing tags just before the ending of body tag. In this javascript tag make function with name load data. This function is used to fetch data from mysql database and show data into html table using ajax.
Below is the code of display data into html table using ajax and php.
<script> $(document).ready(function(){ load_data(); }); function load_data() { var action = "load"; $.ajax({ url:"update-data.php", method:"POST", data:{action:action}, success:function(data) { $('#div_table').html(data); } }); } </script>
After writing this JavaScript function to retrieve data from mysql using php, create a new php file with name update-data.php within this file write code in php to retrieve data from mysql database and display data on front end in html table to edit and update data without page reload. HTML table will also be created in this php file just after executing the mysql select query.
Here is the code to retrieve data from mysql database using php.
$conn=mysqli_connect("localhost","root","","ohip_billing_system") or die("Failed to connect with database"); if(isset($_POST['action']) ){ if($_POST["action"] == "load") { $sql="select * from diagnosis limit 20"; $result=mysqli_query($conn,$sql); $table=' <table id="datatables" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%"> <thead> <tr> <th>ID</th> <th>Description</th> <th>Code</th> <th>Action</th> </tr></thead><tbody>'; while($row=mysqli_fetch_array($result)) { $table.='<tr> <td>'.$row['id'].'</td> <td>'.$row['description'].'</td> <td>'.$row['code'].'</td> <td><input type="button" id="edit" class="btn btn-danger" value="Edit"></td> </tr>'; } $table.='</tbody></table>'; echo $table; } }
3- Display Row Data into Input Fields on Button Click
When a user will click on edit button of any row of html table this row data will display in its relevant input field in html form. For this purpose you have to write a button click function in jquery. This jquery button click function will work for each row of html table. When a user will click on edit button of any row this jquery button click function will pass data from html table to input fields.
Below is the jquery function button click code.Write this code within javascript script tags
$(document).on("click","#edit",function(){ var row=$(this).closest('tr'); var id=row.find('td:eq(0)').text(); var description=row.find('td:eq(1)').text(); var code=row.find('td:eq(2)').text(); $("#id").val(id); $("#description").val(description); $("#code").val(code); });
4- Update Data Without Page Refresh
To update data without page refresh using ajax,jquery in php first of all write a jquery button click function to update data without page refresh using php ajax. Within this function first variable is data to store html form data it will be used in backend php to u[pdate mysql data. This data variable will be passed in ajax. After form submission success function of ajax will show a update success or failure message. Here load data function will also be used to display updated data from mysql without page refresh.
Here is the code in to update data in mysql using ajax jquery.
$('#btnsubmit').on('click',function(){ var data = $('#myForm').serialize()+'&btnsubmit=btnsubmit'; $.ajax({ type : "POST", url : "update-data.php", data : data, dataType:'html', success: function(response){ load_data(); $('#div_response').html('<b>'+response+'</b>'); } }); }); });
Now in update-data.php file write code in php and mysql update query to update mysql data.
if(isset($_POST['btnsubmit'])) { $id=$_POST['id']; $description=$_POST['description']; $code=$_POST['code']; $sql="update `diagnosis` set `description`='$description',`code`='$code' where id=$id "; $result=mysqli_query($conn,$sql) or die(mysqli_error($conn)); if($result) { echo "Data Updated Successfully"; } else { echo "Failed To Update Data"; } }
Download source code Click Here
No comments:
Post a Comment