Jquery Grab tutorialThis tutorials is focused on jquery, php, mysql, using a single text input to grab user information from database without page reload or refresh, if you’re using a large database you do need this kind of program on your backend application for easy and friendly application.
We have three folders
1. Ajax
2. Js
3. Db
And index.php file on the main page
--
-- Table structure for table `grab`
Contains details name, country, date.--
CREATE TABLE IF NOT EXISTS `grab` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(20) NOT NULL,
`country` varchar(20) NOT NULL,
`date` date NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;
----------------------------------------------------------------
Index.php
----------------------------------------------------------------
this contains the form for grab input
----------------------------------------------------------------
ajax.php
----------------------------------------------------------------
include '../db/connect.php'; // database connection
$query = mysql_query("SELECT `grab`.`country`
FROM `grab`
WHERE `grab`.`name`='".mysql_real_escape_string(trim($_POST['name']))."'
");
// querying the database
echo (mysql_num_rows($query) !=0) ? mysql_result($query, 0,'country') : 'Name not found';
//returning the result of the country
?>
----------------------------------------------------------------
global.js
----------------------------------------------------------------
$("input#name-submit").on('click',function(){})- name-submit is the ID name of INPUT SUBMIT tag and var name $('input#iname').val(); - name is the ID name of INPUT. While click on submit button without refreshing page using onclick() method.
-----------------------------------------------------------------------------------------------------------
$('input#name-submit').on('click', function(){
//$('input#name-submit').hide();
//to use grab button use this $('input#name-submit').on('click', function(){ and comment out $('input#name-submit').hide();
$('#loader').text('loading ...')
var name = $('input#name').val();
if ($.trim(name) != '') {
$.post('ajax/ajax.php', {name: name}, function(data){
//name: name first is the location, second is the variable passed
$('div#name-data').text(data); // preview div
});
$('#loader').hide();
};
});
----------------------------------------------------------------
connect.php
----------------------------------------------------------------
mysql_connect("localhost", "root", "");
mysql_select_db("labs");
Hit me with a comment!