Hi Friends We have make this tutorial for those programmer who want to know How to make simple jquery plugin. So for that We have make this type of tutorial. In this tutorial We will make jquery plugin for form validation. From this plugin you can put required field form validation on form textbox and you can also check some fields like username and email data already inserted into database or not without page refresh. If you are working on some project and in that project you have work on form and in form you want to fix some textbox must not be blank and also check that textbox data not already inserted into database. So for this things you can use this type of light code jquery plugin. We have mainly make this for this beginner programmer who want to learn something about how we can make jquery plugin for our web based application. For checking data already inserted or not I have use php code for back end to check data already inserted or not and I have use ajax request for execute back end code and by using Ajax request all things will be done on web page without page refresh. So friends this is my tutorial on how to make a jquery plugin for checking data already exists into database or not and this jquery plugin also check required form validation on input form fields. This all process has been done by back end side without refresh of page.
Source Code
Database
--
-- Table structure for table `tbl_register`
--
CREATE TABLE IF NOT EXISTS `tbl_register` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`user` varchar(35) NOT NULL,
`email` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
--
-- Dumping data for table `tbl_register`
--
INSERT INTO `tbl_register` (`id`, `user`, `email`) VALUES
(1, 'johncena', 'john@cena.com'),
(2, 'therock', 'the@rock.com');
index.php
<p><!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | How to make Jquery Plugin</title>
<script src="jquery.js"></script>
<style>
.input_check_message
{
color:#FF0000;
}
</style>
</head>
<body>
<br />
<div style="width:700px; margin:0 auto;">
<h3>Make JQuery plugin for Database Exists or Not in PHP</h3><br />
<form method="post" action="">
<p>Enter Username
<input type="text" name="username" id="username" class="input_check" data-type="username" />
<span class="input_check_message" data-type="username"></span></p>
<p>Enter Email
<input type="text" name="email" id="email" class="input_check" data-type="email" />
<span class="input_check_message" data-type="email"></span></p>
</form>
</div>
<br />
</body>
</html>
<script src="check_availibilty.js"></script>
<script>
$('.input_check').availibilityCheck();
</script></p>
check_availibilty.js
//check_availibilty.js
$.fn.availibilityCheck = function(){
//console.log('ok');
return this.each(function(){
$(this).on('blur', function(){
var input_value = $(this).val();
var input_type = $(this).data("type");
var feedback = $('.input_check_message[data-type='+input_type+']');
if(input_value == '')
{
feedback.html("* Required Field");
}
else
{
feedback.html("");
$.ajax({
url:"check.php",
method:"POST",
data:{input_value:input_value, input_type:input_type},
success:function(data)
{
feedback.html(data);
},
error:function(){
//Something went wrong
}
});
}
});
});
}
check.php
<?php
//check.php
if(isset($_POST["input_value"], $_POST["input_type"]))
{
$connect = mysqli_connect("localhost", "root", "", "testing");
$type = strtolower(trim($_POST["input_type"]));
$value = trim($_POST["input_value"]);
//$query = '';
if(in_array($type, array('username', 'email')))
{
if($type == 'username')
{
$query = "SELECT * FROM tbl_register WHERE user = '$value'";
}
if($type == "email")
{
$query = "SELECT * FROM tbl_register WHERE email = '$value'";
}
$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0)
{
echo '* This data already exits';
}
}
}
?>
0 comments:
Post a Comment