In this post we are going to learn how to convert HTML Divison tag to editable html form by using Jquery and save changes of html form data into mysql table by using PHP programming with Ajax Jquery without page refresh. Suppose you work on some application and in this web application you have display data in text form in html divison tag and you do not want to create one more page for update those data into table. So at that time you can use this component. In this when user click on single text data which have select from mysql table and display under html divison tag, this divison tag data will be converted into html form by using Jquery method and user can easily change the form data and save those change data into table by using PHP with Ajax.
For this I have create one form and in that form I have create two divison tag, in one tag I have display text data and this will visible to user. And in second divison tag I have store data into html form element like textbox select box etc. This divison tag form is not visible to user. On visible if user click on first divison tag and by using Jquery show() method we can display this form to user and text divison will be hide by using jquery hide() method. In this tag I have use two button, one for save data and other for cancel. For save data to the mysql database I have use Ajax() method with PHP code for save the form data to the table when user click on save button data will be update to mysql table and form will be hide and text divison tag will be visible to user by using Jquery. Suppose user do not want to change data then he can simply click on cancel button and form will be hide and text divison will be visible to user by using Jquery. This all things I have describe in my video tutorial on php web development which I have attach in this post, so I hope you can learn something new things from this post.
Source Code
tbl_employee
--
-- Table structure for table `tbl_employee`
--
CREATE TABLE IF NOT EXISTS `tbl_employee` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(50) NOT NULL,
`gender` varchar(10) NOT NULL,
`designation` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
--
-- Dumping data for table `tbl_employee`
--
INSERT INTO `tbl_employee` (`id`, `name`, `gender`, `designation`) VALUES
(1, 'Bruce Tom', 'Male', 'Driver');
index.php
<?php
$host = "localhost";
$username = "root";
$password = "";
$database = "testing";
$name = '';
$gender = '';
$designation = '';
$employee_id = '';
try
{
$connect = new PDO("mysql:host=$host;dbname=$database", $username, $password);
$connect->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$statement = $connect->prepare("SELECT * FROM tbl_employee WHERE id='1'");
$statement->execute();
foreach($statement as $row)
{
$employee_id = $row["id"];
$name = $row["name"];
$gender = $row["gender"];
$designation = $row["designation"];
}
}
catch(PDOException $error)
{
$error->getMessage();
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | PHP Ajax Jquery - Convert Divison tag to Editable HTML Form</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style>
.divison_field{
padding:16px;
}
.divison_field:hover{
background-color:#f1f1f1;
border-radius:5px;
padding:16px;
}
</style>
</head>
<body>
<br /><br />
<div class="container" style="width:500px;">
<h3 align="center">Convert a DIV Area to an Editable HTML Form</h3><br />
<form id="submit_form" method="post">
<div class="divison_field">
<p><strong>Name - </strong><?php echo $name; ?></p>
<p><strong>Gender - </strong><?php echo $gender; ?></p>
<p><strong>Designation - </strong><?php echo $designation; ?></p>
</div>
<div class="form_field" style="display:none;">
<label>Name</label>
<input type="text" name="name" id="name" class="form-control" value="<?php echo $name; ?>" />
<br />
<label>Gender</label>
<select name="gender" id="gender" class="form-control">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<br />
<label>Designation</label>
<input type="text" name="designation" id="designation" class="form-control" value="<?php echo $designation; ?>" />
<br />
<input type="hidden" name="employee_id" id="employee_id" value="<?php echo $employee_id; ?>" />
<button type="button" name="save" id="save" class="btn btn-info">Save</button>
<button type="button" name="cancel" id="cancel" class="btn btn-cancel">Cancel</button>
</div>
</form>
<br />
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#gender').val("<?php echo $gender; ?>");
$('.divison_field').click(function(){
$('.form_field').show();
$(this).hide();
});
$('#cancel').click(function(){
$('.form_field').hide();
$('.divison_field').show();
});
$('#save').click(function(){
var name = $('#name').val();
var designation = $('#designation').val();
if(name == '' || designation == '')
{
alert("All Fields are required");
}
else
{
$.ajax({
url:"update.php",
method:"POST",
data:$('#submit_form').serialize(),
success:function(data){
$('.divison_field').html(data);
$('.form_field').hide();
$('.divison_field').show();
}
})
}
});
});
</script>
update.php
<?php
$host = "localhost";
$username = "root";
$password = "";
$database = "testing";
try
{
$connect = new PDO("mysql:host=$host;dbname=$database", $username, $password);
$connect->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$statement_update = $connect->prepare("UPDATE tbl_employee SET name = '".$_POST["name"]."', gender = '".$_POST["gender"]."', designation = '".$_POST["designation"]."' WHERE id = '".$_POST["employee_id"]."'");
$statement_update->execute();
$statement_select = $connect->prepare("SELECT * FROM tbl_employee WHERE id = '".$_POST["employee_id"]."'");
$statement_select->execute();
foreach($statement_select as $row)
{
echo '<p><strong>Name - </strong>'.$row["name"].'</p>';
echo '<p><strong>Gender - </strong>'.$row["gender"].'</p>';
echo '<p><strong>Designation - </strong>'.$row["designation"].'</p>';
}
}
catch(PDOException $error)
{
$error->getMessage();
}
?>
0 comments:
Post a Comment