Submit form value and select data in a table page without page reload. In you Codeigniter web application, you can insert records into MySQL table and display quickly using jQuery as register data or contact submit data.
You need to follow some simple steps and success it in your web page and make your web page user friendly. In this tutorial I will help you with an example and source code. So follow the code:
Insert Page:
Create a form or input field, where you put some test values. Create a button and give a ID name, Id name help to store input values in a variable or pass value in the controller page, when click on button by ID name. That’s like:
<div class="row"> <div class="form-group"> <label class="control-label"> Product Name: </label> <input type="text" class="form-control" id="product_name"> </div> <div class="form-group"> <label class="control-label"> Price: </label> <input type="text" class="form-control allownumer" id="price"> </div> <div class="form-group"> <label class="control-label"> Quantity: </label> <input type="text" class="form-control allownumer" id="quantity"> </div> <button class="" type="button" id="sbmt_btn"> Submit Data </button> </div>
Table:
Create a table in the same page, where you display the user records.
<table class="table" id="product_table"> <thead> <tr> <th>Product Name</th> <th>Price</th> <th>Quantity</th> </tr> </thead> <tbody> <?php foreach($data as $val){ ?> <tr> <td><?php echo $val['product_name']; ?></td> <td><?php echo $val['price']; ?></td> <td><?php echo $val['quantity']; ?></td> </tr> <?php } ?> </tbody> </table>
Script:
Pass all input values in a URL link define a controller function name. That’s like:
<script> $('#sbmt_btn').click(function(){$.ajax({ type: 'post', url: '<?php echo base_url("Controller/insert_records");?>', data: {product_name:$('#product_name').val(), price: $('#price').val(), quantity: $('#quantity').val()}, success: function(result){ if(result=='1'){ $('#product_table > tbody:last-child').append(result); } } }); </script>
Controller:
Call model class name into the controller page under function construct that’s like $this->load->model(‘Model’);. Define a function mane for go to model page and load the return data and view in table page.
<?php public function insert_records(){ $q = $this->Model->insertRecords(); $html = "<tr><td>".$q[0]['product_name']."</td><td>".$q[0]['price']."</td><td>".$q[0]['quantity']."</td></tr>"; echo $html; } ?>
Model:
<?php public function insertRecords(){ $data = array("product_name" => $this->input->post('product_name'),"price" => $this->input->post('price'),"quantity" => $this->input->post('qty')); $qry = $this->db->insert('Table name',$data); if($qry){ $return_data = $this->db->select('*')->from('Table Name')->order_by('id','DESC')->limit('1')->get()->result_array(); return $return_data; } } } ?>