How To Insert Data Using PHP Ajax

How to Insert Data using PHP Ajax
❮ PreviousNext ❯
Here we using 3 file for Insert data in MySql database using Ajax.
1. database.php
2. index.php
3. save.php
Table user_data
CREATE TABLE ùser_data` (
ìd` int(11) NOT NULL,
`name` varchar(100) NOT NULL,
èmail` varchar(50) NOT NULL,
`phone` varchar(100) NOT NULL,
`city` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
database.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$db="school";
$conn = mysqli_connect($servername, $username, $password,$db);
?>
index.php
<!DOCTYPE html>
<html>
<head>
<title>Insert data in MySQL database using Ajax</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.
css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"><
/script>
</head>
<body>
<div style="margin: auto;width: 60%;">
<div class="alert alert-success alert-dismissible" id="success"
style="display:none;">
<a href="#" class="close" data-dismiss="alert" aria-
label="close">×</a>
</div>
1
<form id="fupForm" name="form1" method="post">
<div class="form-group">
<label for="email">Name:</label>
<input type="text" class="form-control" id="name"
placeholder="Name" name="name">
</div>
<label for="pwd">Email:</label>
<input type="email" class="form-control" id="email"
placeholder="Email" name="email">
</div>
<label for="pwd">Phone:</label>
<input type="text" class="form-control" id="phone"
placeholder="Phone" name="phone">
</div>
<div class="form-group" >
<label for="pwd">City:</label>
<select name="city" id="city" class="form-control">
<option value="">Select</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Pune">Pune</option>
</select>
</div>
<input type="button" name="save" class="btn btn-primary"
value="Save to database" id="butsave">
</form>
</div>
<script>
$(document).ready(function() {
$('#butsave').on('click', function() {
$("#butsave").attr("disabled", "disabled");
var name = $('#name').val();
var email = $('#email').val();
var phone = $('#phone').val();
var city = $('#city').val();
if(name!="" && email!="" && phone!="" && city!=""){
$.ajax({
url: "save.php",
type: "POST",
data: {
name: name,
email: email,
phone: phone,
city: city
},
cache: false,
success: function(dataResult){
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==200){
2
$("#butsave").removeAttr("disabled");
$('#fupForm').find('input:text').val('');
$("#success").show();
$('#success').html('Data added
successfully !');
}
else if(dataResult.statusCode==201){
alert("Error occured !");
}
}
});
}
else{
alert('Please fill all the field !');
}
});
});
</script>
</body>
</html>
save.php
<?php
include 'database.php';
$name=$_POST['name'];
$email=$_POST['email'];
$phone=$_POST['phone'];
$city=$_POST['city'];
$sql = "INSERT INTO `crud`( `name`, èmail`, `phone`, `city`)
VALUES ('$name','$email','$phone','$city')";
if (mysqli_query($conn, $sql)) {
echo json_encode(array("statusCode"=>200));
}
else {
}
mysqli_close($conn);
?>
3
How to Insert Multiple Data using PHP Ajax
Here we using 2 file for Insert data from MySql database using Ajax.
1. index.php
2. insert-ajax.php
Table user_data
CREATE TABLE ùser_data` (
`Name` varchar(100) NOT NULL,
èmail` varchar(50) NOT NULL
index.php
<!DOCTYPE html>
<html>
<head>
css">
<script
/script>
</head>
<body>
<div style="margin: auto;width: 60%;">
<form id="form1" name="form1" method="post">
<label for="email">Student Name:</label>
<input type="text" name="sname" class="form-control" id="name">
</div>
<label for="pwd">Student email:</label>
<input type="text" name="email" class="form-control" id="email">
</div>
<input type="button" name="send" class="btn btn-primary" value="add
data" id="butsend">
<input type="button" name="save" class="btn btn-primary" value="Save to
database" id="butsave">
</form>
<table id="table1" name="table1" class="table table-bordered">
<tbody>
<tr>
<th>ID</th>
<th>Name</th>
4
<th>email</th>
<th>Action</th>
<tr>
</tbody>
</table>
</div>
<script>
var id = 1;
/*Assigning id and class for tr and td tags for separation.*/
$("#butsend").click(function() {
var newid = id++;
$("#table1").append('<tr valign="top" id="'+newid+'">\n\
<td width="100px" >' + newid + '</td>\n\
<td width="100px" class="name'+newid+'">' + $("#name").val() + '</td>\n\
<td width="100px" class="email'+newid+'">' + $("#email").val() +
'</td>\n\
<td width="100px"><a href="javascript:void(0);"
class="remCF">Remove</a></td>\n\ </tr>');
});
$("#table1").on('click', '.remCF', function() {
$(this).parent().parent().remove();
});
/*crating new click event for save button*/
$("#butsave").click(function() {
var lastRowId = $('#table1 tr:last').attr("id"); /*finds id of the last
row inside table*/
var name = new Array();
var email = new Array();
for ( var i = 1; i <= lastRowId; i++) {
name.push($("#"+i+" .name"+i).html()); /*pushing all the names listed in
the table*/
email.push($("#"+i+" .email"+i).html()); /*pushing all the emails listed
in the table*/
}
var sendName = JSON.stringify(name);
var sendEmail = JSON.stringify(email);
$.ajax({
url: "save.php",
type: "post",
data: {name : sendName , email : sendEmail},
success : function(data){
alert(data); /* alerts the response from php.*/
}
});
});
});
</script>
</body>
</html>
insert-ajax.php
<?php
5
$nameArr = json_decode($_POST["name"]);
$emailArr = json_decode($_POST["email"]);
$con=mysqli_connect("localhost","root","","php_ajax");
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
for ($i = 0; $i < count($nameArr); $i++) {
if(($nameArr[$i] != "")){ /*not allowing empty values and the row which
has been removed.*/
$sql="INSERT INTO user_data (Name, email)
VALUES
('$nameArr[$i]','$emailArr[$i]')";
if (!mysqli_query($con,$sql))
{
die('Error: ' . mysqli_error($con));
}
}
}
Print "Data added Successfully !";
mysqli_close($con);
?>
6
How to View Data using PHP Ajax
Here we using 3 file for view data from MySql database using Ajax.
1. database.php
2. view_ajax.php
3. view.php
Table user_data
CREATE TABLE `crud` (
database.php
<?php
$username = "root";
$password = "";
$db="school";
// Create connection
?>
view_ajax.php
<?php
$sql = "SELECT * FROM crud";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
?>
<tr>
<td><?=$row['name'];?></td>
<td><?=$row['email'];?></td>
<td><?=$row['phone'];?></td>
<td><?=$row['city'];?></td>
</tr>
<?php
}
}
else {
7
echo "0 results";
}
?>
view.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>View Ajax</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
css">
<script
/script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.
min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
"></script>
</head>
<body>
<div class="container">
<h2>View data</h2>
<table class="table table-bordered table-sm" >
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>City</th>
</tr>
</thead>
<tbody id="table">
</tbody>
</table>
</div>
<script>
$.ajax({
url: "View_ajax.php",
type: "POST",
cache: false,
success: function(data){
alert(data);
$('#table').html(data);
}
});
8
</script>
</body>
</html>
9
How to edit or update Data using PHP Ajax
Here we using 4 file for update data from MySql database using Ajax.
1. database.php
2. update_ajax.php
3. view_ajax.php
4. view.php
Table user_data
database.php
<?php
$username = "root";
$password = "";
$db="school";
?>
update_ajax.php
<?php
$id=$_POST['id'];
$sql = "UPDATE `crud`
SET `name`='$name',
èmail`='$email',
`phone`='$phone',
`city`='$city' WHERE id=$id";
10
}
else {
}
?>
view_ajax.php
<?php
$sql = "SELECT * FROM crud";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
?>
<tr>
<td><?=$row['name'];?></td>
<td><?=$row['email'];?></td>
<td><?=$row['phone'];?></td>
<td><?=$row['city'];?></td>
<td><button type="button" class="btn btn-success btn-
sm update" data-toggle="modal" data-keyboard="false" data-
backdrop="static" data-target="#update_country"
data-id="<?=$row['id'];?>"
data-name="<?=$row['name'];?>"
data-email="<?=$row['email'];?>"
data-phone="<?=$row['phone'];?>"
data-city="<?=$row['city'];?>"
">Edit</button></td>
</tr>
<?php
}
}
else {
echo "<tr >
<td colspan='5'>No Result found !</td>
</tr>";
}
?>
view.php
<!DOCTYPE html>
<html lang="en">
<head>
css">
11
<script
/script>
<script
min.js"></script>
<script
"></script>
</head>
<body>
<h2>View data</h2>
<div class="alert alert-success alert-dismissible" id="success"
style="display:none;">
<a href="#" class="close" data-dismiss="alert" aria-
label="close">×</a>
</div>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>City</th>
<th>Action</th>
</tr>
</thead>
<tbody id="table">
</tbody>
</table>
</div>

<div class="modal fade" id="update_country" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header"
style="color:#fff;background-color: #e35f14;padding:6px;">
<h5 class="modal-title"><i class="fa fa-edit"></i>
Update</h5>
</div>
<div class="modal-body">

<div class="row">
<div class="col-md-3">
<label>Name</label>
</div>
<input type="text"
name="name_modal" id="name_modal" class="form-control-sm" required>
12
</div>
</div>

<div class="row">
<label>Email</label>
</div>
<input type="text"
name="email_modal" id="email_modal" class="form-control-sm" required>
</div>
</div>

<div class="row">
<label>Phone</label>
</div>
<input type="text"
name="phone_modal" id="phone_modal" class="form-control-sm" required>
</div>
</div>

<div class="row">
<label>City</label>
</div>
<input type="text"
name="city_modal" id="city_modal" class="form-control-sm" required>
</div>
</div>
<input type="hidden" name="id_modal"
id="id_modal" class="form-control-sm">
</div>
<div class="modal-footer" style="padding-bottom:0px
!important;text-align:center !important;">
<p style="text-align:center;float:center;"><button
type="submit" id="update_data" class="btn btn-default btn-sm"
style="background-color: #e35f14;color:#fff;">Save</button>
<button type="button" class="btn btn-default btn-sm"
data-dismiss="modal" style="background-color:
#e35f14;color:#fff;">Close</button></p>
</div>
</div>
</div>
</div>

<script>
$.ajax({
13
type: "POST",
cache: false,
$('#table').html(dataResult);
}
});
$(function () {
$('#update_country').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); /*Button that
triggered the modal*/
var id = button.data('id');
var name = button.data('name');
var email = button.data('email');
var phone = button.data('phone');
var city = button.data('city');
var modal = $(this);
modal.find('#name_modal').val(name);
modal.find('#email_modal').val(email);
modal.find('#phone_modal').val(phone);
modal.find('#city_modal').val(city);
modal.find('#id_modal').val(id);
});
});
$(document).on("click", "#update_data", function() {
$.ajax({
url: "update_ajax.php",
type: "POST",
cache: false,
data:{
id: $('#id_modal').val(),
name: $('#name_modal').val(),
email: $('#email_modal').val(),
phone: $('#phone_modal').val(),
city: $('#city_modal').val(),
},
$('#update_country').modal().hide();
alert('Data updated successfully !');
location.reload();
}
}
});
});
});
</script>
</body>
</html>
14
How to Delete Data using PHP Ajax
Here we using 3 file for delete data from MySql database using Ajax.
1. database.php
2. delete_ajax.php
3. view.php
Table user_data
database.php
<?php
$username = "root";
$password = "";
$db="school";
?>
delete_ajax.php
<?php
$id=$_POST['id'];
$sql = "DELETE FROM `crud` WHERE id=$id";
}
else {
}
?>
view.php
<!DOCTYPE html>
<html lang="en">
15
<head>
css">
<script
/script>
<script
min.js"></script>
<script
"></script>
</head>
<body>
<h2>View data</h2>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>City</th>
<th>Action</th>
</tr>
</thead>
<tbody id="table">
</tbody>
</table>
</div>
<script>
$.ajax({
type: "POST",
cache: false,
}
});
$(document).on("click", ".delete", function() {
var $ele = $(this).parent().parent();
$.ajax({
url: "delete_ajax.php",
type: "POST",
cache: false,
data:{
id: $(this).attr("data-id")
16
},
$ele.fadeOut().remove();
}
}
});
});
});
</script>
</body>
</html>
17
How to Delete Data using PHP Ajax
Here we using 3 file for delete data from MySql database using Ajax.
1. database.php
2. delete_ajax.php
3. view.php
Table user_data
database.php
<?php
$username = "root";
$password = "";
$db="school";
?>
delete_ajax.php
<?php
$id=$_POST['id'];
$sql = "DELETE FROM `crud` WHERE id=$id";
}
else {
}
?>
view.php
<!DOCTYPE html>
<html lang="en">
18
<head>
css">
<script
/script>
<script
min.js"></script>
<script
"></script>
</head>
<body>
<h2>View data</h2>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>City</th>
<th>Action</th>
</tr>
</thead>
<tbody id="table">
</tbody>
</table>
</div>
<script>
$.ajax({
type: "POST",
cache: false,
}
});
$(document).on("click", ".delete", function() {
var $ele = $(this).parent().parent();
$.ajax({
url: "delete_ajax.php",
type: "POST",
cache: false,
data:{
id: $(this).attr("data-id")
19
},
$ele.fadeOut().remove();
}
}
});
});
});
</script>
</body>
</html>
20
AJAX PHP Crud Example
index.php
<?php
include 'backend/database.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>User Data</title>
href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css">
css">
<link rel="stylesheet" href="css/style.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script
"></script>
<script src="ajax/ajax.js"></script>
</head>
<body>
<p id="success"></p>
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-6">
<h2>Manage <b>Users</b></h2>
</div>
<div class="col-sm-6">
<a href="#addEmployeeModal"
class="btn btn-success" data-toggle="modal"><i class="material-
icons"> </i> <span>Add New User</span></a>
21
<a href="JavaScript:void(0);"
class="btn btn-danger" id="delete_multiple"><i class="material-
icons"> </i> <span>Delete</span></a>
</div>
</div>
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>
<span class="custom-
checkbox">
<input
type="checkbox" id="selectAll">
<label
for="selectAll"></label>
</span>
</th>
<th>SL NO</th>
<th>NAME</th>
<th>EMAIL</th>
<th>PHONE</th>
<th>CITY</th>
<th>ACTION</th>
</tr>
</thead>
<tbody>
<?php
$result = mysqli_query($conn,"SELECT * FROM
crud");
$i=1;
while($row =
mysqli_fetch_array($result)) {
?>
<tr id="<?php echo $row["id"]; ?>">
<td>
<span class="custom-
checkbox">
<input
type="checkbox" class="user_checkbox" data-user-id="<?php echo
$row["id"]; ?>">
<label
for="checkbox2"></label>
</span>
</td>
<td><?php echo $i; ?></td>
<td><?php echo $row["name"]; ?></td>
<td><?php echo $row["email"]; ?></td>
<td><?php echo $row["phone"]; ?></td>
<td><?php echo $row["city"]; ?></td>
<td>
22
<a href="#editEmployeeModal"
class="edit" data-toggle="modal">
<i class="material-icons
update" data-toggle="tooltip"
data-id="<?php echo
$row["id"]; ?>"
data-name="<?php echo
$row["name"]; ?>"
data-email="<?php echo
$row["email"]; ?>"
data-phone="<?php echo
$row["phone"]; ?>"
data-city="<?php echo
$row["city"]; ?>"
title="Edit"> </i>
</a>
<a href="#deleteEmployeeModal"
class="delete" data-id="<?php echo $row["id"]; ?>" data-
toggle="modal"><i class="material-icons" data-toggle="tooltip"
title="Delete"> </i></a>
</td>
</tr>
<?php
$i++;
}
?>
</tbody>
</table>
</div>
</div>

<div id="addEmployeeModal" class="modal fade">
<div class="modal-dialog">
<form id="user_form">
<div class="modal-
header">
<h4 class="modal-title">Add
User</h4>
<button type="button"
class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-
body">
<label>NAME</label>
<input type="text" id="name"
name="name" class="form-control" required>
</div>
<label>EMAIL</label>
23
<input type="email"
id="email" name="email" class="form-control" required>
</div>
<label>PHONE</label>
<input type="phone"
id="phone" name="phone" class="form-control" required>
</div>
<label>CITY</label>
<input type="city" id="city"
name="city" class="form-control" required>
</div>
</div>
<div class="modal-footer">
<input type="hidden" value="1"
name="type">
<input type="button" class="btn
btn-default" data-dismiss="modal" value="Cancel">
<button type="button" class="btn
btn-success" id="btn-add">Add</button>
</div>
</form>
</div>
</div>
</div>

<div id="editEmployeeModal" class="modal fade">
<form id="update_form">
<div class="modal-
header">
<h4 class="modal-title">Edit
User</h4>
</div>
<input type="hidden" id="id_u"
name="id" class="form-control" required>
<label>Name</label>
<input type="text"
id="name_u" name="name" class="form-control" required>
</div>
<label>Email</label>
<input type="email"
id="email_u" name="email" class="form-control" required>
</div>
<label>PHONE</label>
24
<input type="phone"
id="phone_u" name="phone" class="form-control" required>
</div>
<label>City</label>
<input type="city"
id="city_u" name="city" class="form-control" required>
</div>
</div>
<input type="hidden" value="2"
name="type">
btn-info" id="update">Update</button>
</div>
</form>
</div>
</div>
</div>

<div id="deleteEmployeeModal" class="modal fade">
<form>
<div class="modal-
header">
<h4 class="modal-title">Delete
User</h4>
</div>
<input type="hidden" id="id_d"
name="id" class="form-control">
<p>Are you sure you want to delete
these Records?</p>
<p class="text-
warning"><small>This action cannot be undone.</small></p>
</div>
btn-danger" id="delete">Delete</button>
</div>
</form>
</div>
</div>
</div>
25
</body>
</html>
backend/database.php
<?php
$username = "root";
$password = "";
$dbname = "user";
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
?>
backend/save.php
<?php
if(count($_POST)>0){
if($_POST['type']==1){
$sql = "INSERT INTO `crud`( `name`, èmail`,`phone`,`city`)
VALUES ('$name','$email','$phone','$city')";
}
else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
}
}
$id=$_POST['id'];
$sql = "UPDATE `crud` SET
`name`='$name',èmail`='$email',`phone`='$phone',`city`='$city' WHERE
id=$id";
}
else {
}
26
}
}
$id=$_POST['id'];
$sql = "DELETE FROM `crud` WHERE id=$id ";
echo $id;
}
else {
}
}
}
$id=$_POST['id'];
$sql = "DELETE FROM crud WHERE id in ($id)";
echo $id;
}
else {
}
}
}
?>
27

How To Insert Data Using PHP Ajax

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

How To Insert Data Using PHP Ajax

Caricato da

Copyright:

Formati disponibili

How to Insert Data using PHP Ajax

Potrebbero piacerti anche