4 Steps to Create AJAX CRUD Application in PHP & MySQL

This is simple AJAX CRUD application built with AJAX using PHP & MySQL. This tutorial is an extension to our simple crud application in PHP & MySQL. I’m using that same code for this application and adding ajax features.
Below is simple AJAX code snippet to send and receive data from PHP file. I’m sending data to PHP file using get method from HTML file. This submitted data will be displayed in HTML file without reloading HTML file.
Save this code as sample.html
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title>Simple AJAX Code Snippet</title> </head> <body> <button>Click Me</button> <div id="result">This is result div</div> </body> </html> |
Add this code inside head section. In this below code I’m sending some data to data.php file using get method. Upon getting successful data from data.php replacing it with result id inside our HTML file. All this will be done without reloading sample.html file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript"> function ajax(){ var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function () { if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ var result = document.getElementById('result'); result.innerHTML = xmlhttp.responseText; } } xmlhttp.open('GET', 'data.php?name=vivek', true); xmlhttp.send(); } </script> |
Add this onclick function to button inside body section
1 |
<button onclick="ajax();">Click Me</button> |
Add this PHP code into data.php. This file is used to send and receive data in our HTML document.
1 2 3 |
<?php echo "Name of the person is " .$_REQUEST['name']; ?> |
In our main AJAX CRUD application using PHP & MySQL. I’m going to use this concept to send & receive the data in html & php files.
Other Articles in Learn AJAX
- AJAX Basics
- Using Console Log in AJAX
- Passing Data with AJAX
- Event Listeners in AJAX
- AJAX Example
- AJAX Debugging
- Ajax Country State City Select Dropdown List
- Ajax Search Suggestions Dropdown
- AJAX CRUD application
1. AJAX Read Operation in PHP & MySQL
Create a html file with the name index.html use this basic html with bootstrap css cdn files, bootstrap js cdn files & jQuery cdn file. I’m using CDN, if you want you can download it to local computer and use it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title>Simple AJAX CRUD Application in PHP & MySQL</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" > <link rel="stylesheet" href="styles.css" > <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body > </body> </html> |
Inside body section, use this form code to display form & submiting values to php file for CRUD operations.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<div class="container"> <div class="row" id="edit"> <form class="form-horizontal col-md-6 col-md-offset-3"> <h2>Create Operation in CRUD Application</h2> <div class="form-group"> <label for="input1" class="col-sm-2 control-label">First Name</label> <div class="col-sm-10"> <input type="text" id="fname" class="form-control" placeholder="First Name" /> </div> </div> <div class="form-group"> <label for="input1" class="col-sm-2 control-label">Last Name</label> <div class="col-sm-10"> <input type="text" id="lname" class="form-control" placeholder="Last Name" /> </div> </div> <div class="form-group"> <label for="input1" class="col-sm-2 control-label">E-Mail</label> <div class="col-sm-10"> <input type="email" id="email" class="form-control" placeholder="E-Mail" /> </div> </div> <div class="form-group" class="radio"> <label for="input1" class="col-sm-2 control-label">Gender</label> <div class="col-sm-10"> <label> <input type="radio" id="gender" value="male"> Male </label> <label> <input type="radio" id="gender" value="female"> Female </label> </div> </div> <div class="form-group"> <label for="input1" class="col-sm-2 control-label">Age</label> <div class="col-sm-10"> <select id="age" class="form-control"> <option value="">Select Your Age</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> </select> </div> </div> <input type="submit" class="btn btn-primary col-md-2 col-md-offset-10" value="submit" /> </form> </div> </div> |
Use the code in script tags from our first sample.html file
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script type="text/javascript"> function ajax(){ var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function () { if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ var result = document.getElementById('result'); result.innerHTML = xmlhttp.responseText; } } xmlhttp.open('GET', 'ajax.php',true); xmlhttp.send(); } </script> |
Right after form closing div in index.html add this table code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="row"> <table class="table "> <thead> <tr> <th>#</th> <th>Full Name</th> <th>E-Mail</th> <th>Age</th> <th>Gender</th> <th>Extras</th> </tr> </thead> <tbody id="result"> </tbody> </table> </div> |
Here using ajax.php file, I’m replacing tbody #result id with the output from ajax.php file.
Code of ajax.php file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<?php require_once('connect.php'); $ReadSql = "SELECT * FROM `crud`"; $res = mysqli_query($connection, $ReadSql); ?> <tbody> <?php while($r = mysqli_fetch_assoc($res)){ ?> <tr> <th scope="row"><?php echo $r['id']; ?></th> <td><?php echo $r['first_name'] . " " . $r['last_name']; ?></td> <td><?php echo $r['email_id']; ?></td> <td><?php echo $r['gender']; ?></td> <td><?php echo $r['age']; ?></td> <td> <a href="#"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a> <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal<?php echo $r['id']; ?>">Delete</button> <!-- Modal --> <div class="modal fade" id="myModal<?php echo $r['id']; ?>" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Delete File</h4> </div> <div class="modal-body"> <p>Are you sure?</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <a href="#"><button type="button" class="btn btn-danger"> Yes..! Delete</button></a> </div> </div> </div> </div> </td> </tr> <?php } ?> </tbody> |
Create connect.php file for connecting to database in PHP. I’m already including this file in ajax.php file. If you haven’t created database table, follow this tutorial Simple CRUD Application in PHP & MySQL.
1 2 3 4 5 6 7 8 9 |
<?php $connection = mysqli_connect('localhost', 'root', ''); if (!$connection){ die("Database Connection Failed" . mysqli_error($connection)); } $select_db = mysqli_select_db($connection, 'project'); if (!$select_db){ die("Database Selection Failed" . mysqli_error($connection)); } |
To update table data using ajax use this code to opening body tag. That is executing ajax function while onload.
1 |
<body onload="ajax();"> |
After adding above line of code, you can see the difference. That is table body will be loaded after loading html file.
2. AJAX Create Operation in PHP & MySQL
Create Operation means inserting data into database table.
Add this onclick code to submit button.
1 |
onclick="ajax('create'); return false;" |
Next get the input fields values using this below code
1 2 3 4 5 |
var fname = document.getElementById('fname').value; var lname = document.getElementById('lname').value; var email = document.getElementById('email').value; var gender = document.getElementById('gender').value; var age = document.getElementById('age').value; |
Add also pass the operation mode in ajax function using this line of code
1 2 3 4 |
<script type="text/javascript"> function ajax(operation, id){ } </script> |
Add this code right after defining the variables.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
if(operation == undefined){ operation = ''; id = ''; }else if(operation == 'create'){ id == ''; } if(fname == ''){ fname = ''; } if(lname == ''){ lname = ''; } if(email == ''){ email = ''; } if(gender == ''){ gender = ''; } if(age == ''){ age = ''; } |
Send the varible values using get method
1 |
xmlhttp.open('GET', 'ajax.php?operation='+operation+'&id='+id+'&fname='+fname+'&lname='+lname+'&email='+email+'&gender='+gender+'&age='+age,true); |
Add this code in ajax.php file to insert submitted data in database table.
1 2 3 4 5 6 7 8 9 10 11 |
if($_REQUEST['operation'] != ''){ if($_REQUEST['operation'] == 'create'){ $fname = $_REQUEST['fname']; $lname = $_REQUEST['lname']; $email = $_REQUEST['email']; $gender = $_REQUEST['gender']; $age = $_REQUEST['age']; $CreateSql = "INSERT INTO `crud` (first_name, last_name, email_id, gender, age) VALUES ('$fname', '$lname', '$email', '$gender', '$age')"; $res = mysqli_query($connection, $CreateSql) or die(mysqli_error($connection)); } } |
3. AJAX Delete Operation in PHP & MySQL
First of all, add this onclick code to delete button in bootstrap popup modal inside ajax.php file.
1 2 |
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <a href="javascript:void(0);" onclick="ajax('delete', <?php echo $r['id']; ?>);"><button type="button" class="btn btn-danger"> Yes..! Delete</button></a> |
Then add this code to delete record from database table.
1 2 3 4 5 |
if($_REQUEST['operation'] == 'delete'){ $id = $_REQUEST['id']; $DelSql = "DELETE FROM `crud` WHERE id=$id"; $res = mysqli_query($connection, $DelSql); } |
4. AJAX Edit Operation in PHP & MySQL
For edit operation, I’m creating a new function ajax_edit. This function accepts two arguments one is operation same way we used for previous function and the anothe argument is id. which is used update the record.
This is simple code, I’m using from sample.html file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function ajax_edit(operation, id){ var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function () { if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ var edit = document.getElementById('edit'); edit.innerHTML = xmlhttp.responseText; } } xmlhttp.open('GET', 'edit.php',true); xmlhttp.send(); } |
Create one more file edit.php & use this code. This code will display form with data fetched from database table.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<?php require_once('connect.php'); //if($_REQUEST['operation'] == 'edit'){ $id = $_REQUEST['id']; $SelSql = "SELECT * FROM `crud` WHERE id=$id"; $res = mysqli_query($connection, $SelSql); $r = mysqli_fetch_assoc($res); ?> <form method="post" class="form-horizontal col-md-6 col-md-offset-3"> <h2>UPDATE Operation in CRUD Application</h2> <div class="form-group"> <label for="input1" class="col-sm-2 control-label">First Name</label> <div class="col-sm-10"> <input type="text" id="fname" class="form-control" value="<?php echo $r['first_name']; ?>" placeholder="First Name" /> </div> </div> <div class="form-group"> <label for="input1" class="col-sm-2 control-label">Last Name</label> <div class="col-sm-10"> <input type="text" id="lname" class="form-control" value="<?php echo $r['last_name']; ?>" placeholder="Last Name" /> </div> </div> <div class="form-group"> <label for="input1" class="col-sm-2 control-label">E-Mail</label> <div class="col-sm-10"> <input type="email" id="email" class="form-control" value="<?php echo $r['email_id']; ?>" placeholder="E-Mail" /> </div> </div> <div class="form-group" class="radio"> <label for="input1" class="col-sm-2 control-label">Gender</label> <div class="col-sm-10"> <label> <input type="radio" id="gender" value="male" <?php if($r['gender'] == 'male'){ echo "checked";} ?>> Male </label> <label> <input type="radio" id="gender" value="female" <?php if($r['gender'] == 'female'){ echo "checked";} ?>> Female </label> </div> </div> <div class="form-group"> <label for="input1" class="col-sm-2 control-label">Age</label> <div class="col-sm-10"> <select id="age" class="form-control"> <option>Select Your Age</option> <option value="20" <?php if($r['age'] == '20'){ echo "selected";} ?> >20</option> <option value="21" <?php if($r['age'] == '21'){ echo "selected";} ?> >21</option> <option value="22" <?php if($r['age'] == '22'){ echo "selected";} ?> >22</option> <option value="23" <?php if($r['age'] == '23'){ echo "selected";} ?> >23</option> <option value="24" <?php if($r['age'] == '24'){ echo "selected";} ?> >24</option> <option value="25" <?php if($r['age'] == '25'){ echo "selected";} ?> >25</option> </select> </div> </div> <input type="submit" class="btn btn-primary col-md-2 col-md-offset-10" value="Update" /> </form> |
To load this edit.php file inside our index.html add the id #edit to div opening tag that is before opening form tag. I’ve added this in above index.html code.
Next executing ajax function after clicking on edit button in HTML table. Replace this code with edit anchor link.
1 |
<a href="javascript:void(0);" onclick="ajax_edit('edit', <?php echo $r['id']; ?>);"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a> |
Till now form is loading with values from database, next step is to update these submitted values in database.
Add this on click function to form submit button in edit.php file
1 |
onclick="ajax_edit('update', <?php echo $r['id']; ?>); return false;" |
Add this code in ajax_edit function in index.html file, to get input field values.
1 2 3 4 5 6 7 8 9 |
if(operation == 'edit'){ }else if(operation == 'update'){ var fname = document.getElementById('fname').value; var lname = document.getElementById('lname').value; var email = document.getElementById('email').value; var gender = document.getElementById('gender').value; var age = document.getElementById('age').value; } |
Add these variable values in get method for sending data to edit.php file.
1 |
xmlhttp.open('GET', 'edit.php?operation='+operation+'&id='+id+'&fname='+fname+'&lname='+lname+'&email='+email+'&gender='+gender+'&age='+age,true); |
Add this code in edit.php file.
1 2 3 4 5 6 7 8 9 10 11 |
if($_REQUEST['operation'] == 'update'){ $id = $_REQUEST['id']; $fname = mysql_real_escape_string($_REQUEST['fname']); $lname = mysql_real_escape_string($_REQUEST['lname']); $email = mysql_real_escape_string($_REQUEST['email']); $gender = $_REQUEST['gender']; $age = $_REQUEST['age']; $UpdateSql = "UPDATE `crud` SET first_name='$fname', last_name='$lname', gender='$gender', age=$age, email_id='$email' WHERE id=$id"; $res = mysqli_query($connection, $UpdateSql); } |
Complete Code of AJAX CRUD Application in PHP & MySQL
If you are having any problem arragning above pieces of code, you can use this complete code.
[sociallocker]
connect.php
1 2 3 4 5 6 7 8 9 |
<?php $connection = mysqli_connect('localhost', 'root', ''); if (!$connection){ die("Database Connection Failed" . mysqli_error($connection)); } $select_db = mysqli_select_db($connection, 'project'); if (!$select_db){ die("Database Selection Failed" . mysqli_error($connection)); } |
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 |
<!DOCTYPE html> <html> <head> <title>Simple AJAX CRUD Application in PHP & MySQL</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" > <link rel="stylesheet" href="styles.css" > <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript"> function ajax(operation, id){ var fname = document.getElementById('fname').value; var lname = document.getElementById('lname').value; var email = document.getElementById('email').value; var gender = document.getElementById('gender').value; var age = document.getElementById('age').value; if(operation == undefined){ operation = ''; id = ''; }else if(operation == 'create'){ id == ''; } if(fname == ''){ fname = ''; } if(lname == ''){ lname = ''; } if(email == ''){ email = ''; } if(gender == ''){ gender = ''; } if(age == ''){ age = ''; } var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function () { if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ var result = document.getElementById('result'); result.innerHTML = xmlhttp.responseText; } } xmlhttp.open('GET', 'ajax.php?operation='+operation+'&id='+id+'&fname='+fname+'&lname='+lname+'&email='+email+'&gender='+gender+'&age='+age,true); xmlhttp.send(); } function ajax_edit(operation, id){ if(operation == 'edit'){ }else if(operation == 'update'){ var fname = document.getElementById('fname').value; var lname = document.getElementById('lname').value; var email = document.getElementById('email').value; var gender = document.getElementById('gender').value; var age = document.getElementById('age').value; } var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function () { if(xmlhttp.readyState == 4 && xmlhttp.status == 200){ var edit = document.getElementById('edit'); edit.innerHTML = xmlhttp.responseText; } } xmlhttp.open('GET', 'edit.php?operation='+operation+'&id='+id+'&fname='+fname+'&lname='+lname+'&email='+email+'&gender='+gender+'&age='+age,true); xmlhttp.send(); } </script> </head> <body onload="ajax();"> <div class="container"> <div class="row" id="edit"> <form class="form-horizontal col-md-6 col-md-offset-3"> <h2>Create Operation in CRUD Application</h2> <div class="form-group"> <label for="input1" class="col-sm-2 control-label">First Name</label> <div class="col-sm-10"> <input type="text" id="fname" class="form-control" placeholder="First Name" /> </div> </div> <div class="form-group"> <label for="input1" class="col-sm-2 control-label">Last Name</label> <div class="col-sm-10"> <input type="text" id="lname" class="form-control" placeholder="Last Name" /> </div> </div> <div class="form-group"> <label for="input1" class="col-sm-2 control-label">E-Mail</label> <div class="col-sm-10"> <input type="email" id="email" class="form-control" placeholder="E-Mail" /> </div> </div> <div class="form-group" class="radio"> <label for="input1" class="col-sm-2 control-label">Gender</label> <div class="col-sm-10"> <label> <input type="radio" id="gender" value="male"> Male </label> <label> <input type="radio" id="gender" value="female"> Female </label> </div> </div> <div class="form-group"> <label for="input1" class="col-sm-2 control-label">Age</label> <div class="col-sm-10"> <select id="age" class="form-control"> <option value="">Select Your Age</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> </select> </div> </div> <!-- <a class="btn btn-primary" onclick="ajax();" >Get View Data</a> --> <input type="submit" class="btn btn-primary col-md-2 col-md-offset-10" value="submit" onclick="ajax('create'); return false;"/> </form> </div> <div class="row"> <table class="table "> <thead> <tr> <th>#</th> <th>Full Name</th> <th>E-Mail</th> <th>Age</th> <th>Gender</th> <th>Extras</th> </tr> </thead> <tbody id="result"> </tbody> </table> </div> </div> </body> </html> |
ajax.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<?php require_once('connect.php'); if($_REQUEST['operation'] != ''){ if($_REQUEST['operation'] == 'create'){ $fname = $_REQUEST['fname']; $lname = $_REQUEST['lname']; $email = $_REQUEST['email']; $gender = $_REQUEST['gender']; $age = $_REQUEST['age']; $CreateSql = "INSERT INTO `crud` (first_name, last_name, email_id, gender, age) VALUES ('$fname', '$lname', '$email', '$gender', '$age')"; $res = mysqli_query($connection, $CreateSql) or die(mysqli_error($connection)); } if($_REQUEST['operation'] == 'delete'){ $id = $_REQUEST['id']; $DelSql = "DELETE FROM `crud` WHERE id=$id"; $res = mysqli_query($connection, $DelSql); } } $ReadSql = "SELECT * FROM `crud`"; $res = mysqli_query($connection, $ReadSql); ?> <tbody> <?php while($r = mysqli_fetch_assoc($res)){ ?> <tr> <th scope="row"><?php echo $r['id']; ?></th> <td><?php echo $r['first_name'] . " " . $r['last_name']; ?></td> <td><?php echo $r['email_id']; ?></td> <td><?php echo $r['gender']; ?></td> <td><?php echo $r['age']; ?></td> <td> <a href="javascript:void(0);" onclick="ajax_edit('edit', <?php echo $r['id']; ?>);"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span></a> <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal<?php echo $r['id']; ?>">Delete</button> <!-- Modal --> <div class="modal fade" id="myModal<?php echo $r['id']; ?>" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Delete File</h4> </div> <div class="modal-body"> <p>Are you sure?</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <a href="javascript:void(0);" onclick="ajax('delete', <?php echo $r['id']; ?>);"><button type="button" class="btn btn-danger"> Yes..! Delete</button></a> </div> </div> </div> </div> </td> </tr> <?php } ?> </tbody> |
edit.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<?php require_once('connect.php'); //if($_REQUEST['operation'] == 'edit'){ $id = $_REQUEST['id']; $SelSql = "SELECT * FROM `crud` WHERE id=$id"; $res = mysqli_query($connection, $SelSql); $r = mysqli_fetch_assoc($res); if($_REQUEST['operation'] == 'update'){ $id = $_REQUEST['id']; $fname = mysql_real_escape_string($_REQUEST['fname']); $lname = mysql_real_escape_string($_REQUEST['lname']); $email = mysql_real_escape_string($_REQUEST['email']); $gender = $_REQUEST['gender']; $age = $_REQUEST['age']; $UpdateSql = "UPDATE `crud` SET first_name='$fname', last_name='$lname', gender='$gender', age=$age, email_id='$email' WHERE id=$id"; $res = mysqli_query($connection, $UpdateSql); } ?> <form method="post" class="form-horizontal col-md-6 col-md-offset-3"> <h2>UPDATE Operation in CRUD Application</h2> <div class="form-group"> <label for="input1" class="col-sm-2 control-label">First Name</label> <div class="col-sm-10"> <input type="text" id="fname" class="form-control" value="<?php echo $r['first_name']; ?>" placeholder="First Name" /> </div> </div> <div class="form-group"> <label for="input1" class="col-sm-2 control-label">Last Name</label> <div class="col-sm-10"> <input type="text" id="lname" class="form-control" value="<?php echo $r['last_name']; ?>" placeholder="Last Name" /> </div> </div> <div class="form-group"> <label for="input1" class="col-sm-2 control-label">E-Mail</label> <div class="col-sm-10"> <input type="email" id="email" class="form-control" value="<?php echo $r['email_id']; ?>" placeholder="E-Mail" /> </div> </div> <div class="form-group" class="radio"> <label for="input1" class="col-sm-2 control-label">Gender</label> <div class="col-sm-10"> <label> <input type="radio" id="gender" value="male" <?php if($r['gender'] == 'male'){ echo "checked";} ?>> Male </label> <label> <input type="radio" id="gender" value="female" <?php if($r['gender'] == 'female'){ echo "checked";} ?>> Female </label> </div> </div> <div class="form-group"> <label for="input1" class="col-sm-2 control-label">Age</label> <div class="col-sm-10"> <select id="age" class="form-control"> <option>Select Your Age</option> <option value="20" <?php if($r['age'] == '20'){ echo "selected";} ?> >20</option> <option value="21" <?php if($r['age'] == '21'){ echo "selected";} ?> >21</option> <option value="22" <?php if($r['age'] == '22'){ echo "selected";} ?> >22</option> <option value="23" <?php if($r['age'] == '23'){ echo "selected";} ?> >23</option> <option value="24" <?php if($r['age'] == '24'){ echo "selected";} ?> >24</option> <option value="25" <?php if($r['age'] == '25'){ echo "selected";} ?> >25</option> </select> </div> </div> <input type="submit" class="btn btn-primary col-md-2 col-md-offset-10" value="Update" onclick="ajax_edit('update', <?php echo $r['id']; ?>); return false;"/> </form> |
[/sociallocker] If you have any problem let me know using comment form below.