update form results into a modal and shows result without page refresh using jQuery:
In your web application get MySQL table results and print in an update form into a modal. When users click on the modal submit button then form results are updated into MySQL table and display result in view page without a page reload.
Jquery helps to the developer to work any option a website without page refresh. This tutorial I will show you how to display data in a web page from the database after submitting values into the database. Follow the example.
Modal:
Define a modal on your web page and create a form into modal and change values which value you want to update and click update button for update result. If your update is successful so new insert data update in the table page using jQuery.
<div class="modal-body"> <div class="form-group"> <input type="hidden" name="" id="p_id"> <p>Quantity</p> <input type="text" id="quantity1" required="required" class="form-control"> </div> <div class="form-group"> <p>Price</p> <input type="text" id="price" required="required" class="form-control"> </div> </div> <div class="modal-footer"> <button type="button" onclick="updatematerials()"> Update Data </button> </div>
Script:
<script> //update in modal values function updatematerials(){ var id = $('#p_id').val(); var quantity = $('#quantity1').val(); var price = $('#price').val(); $.ajax({ type:"post", url:"<?php echo base_url('ProductController/update') ?>", data:{id1:id,quantity1:quantity,price1:price}, success:function(res){ $('#Quantity'+id).text(quantity); $('#Price'+id).text(price); $('#editModal').modal('hide'); } }); } </script>
Table:
<table class="table"> <thead> <tr> <th>#</th> <th>Product Name</th> <th>Quantity</th> <th>Price</th> <th>Date</th> <th>Edit</th> </tr> </thead> <tbody> <tr> <td><?php echo $i ?></td> <td><?php echo $cate[0]->p_name; ?></td> <td><p id="Quantity"></td> <td><p id="Price"></td> <td><?php echo $date; ?></td> <td><button><i class="fa fa-pencil" ></i></button></td> </tr> </tbody> </table>