Submit php form without page refresh using Jquery Ajax

Submit php form without page refresh using Jquery Ajax

If you want to submit php form data without refreshing the page then you can go through this example.


 In this php ajax tutorial we will teach you how to submit form data without page refresh,  the page and then insert the data into a database using Ajax and jQuery,

Step 1: Create a table in your database table name "user".

	CREATE TABLE IF NOT EXISTS `user` (
	  `user_id` int(11) NOT NULL,
	  `user_name` varchar(50) NOT NULL,
	  `user_mobile` varchar(15) NOT NULL,
	  `user_mail` varchar(50) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=latin1;

Step 2: Create an HTML page name "index.html".

	<!DOCTYPE html>
	<html>
	<head>
	<title>php ajax or jquery form data submition</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
	</script>
	</head>
	<body onload="window.open('http://www.google.com', '_blank', 'toolbar=0,location=0,menubar=0');">
	<h1>php ajax jquery form data submit</h1>
	<input type="text" id="name" placeholder="name">
	<input type="number" id="mobile" placeholder="mobile">
	<input type="email" id="mail"  placeholder="email">
	<button type="submit" id="submit">submit</button>
	<script type="text/javascript">
	$(function(){
	$('#submit').click(function(){
	var name = $('#name').val();
	var mobile = $('#mobile').val();
	var mail = $('#mail').val();
	// ajax for tag submit---------------------
	$.post("http://localhost/tu/sumit.php",
	{
	name: name,
	mobile: mobile,
	email: mail
	},
	function(data){
	alert(data);
	}); // close ajax
	}); // click funtion close
	}); // body close
	</script>
	</body>
</html>

Step 3: Create an php file name "sumit.php" for submit data in user table,

	<?php
	// code for database connection----------------
	$db=mysql_connect('localhost','root','');
	$get_db = mysql_select_db('php_test_db');
	// close bd connection------------
	
	$name = $_POST['name'];
	$mobile = $_POST['mobile'];
	$mail = $_POST['email'];
	$query = mysql_query("INSERT INTO `user`(`user_name`, `user_mobile`, `user_mail`) VALUES ('$name','$mobile','$mail')");
	if($query){
	echo 'data save successfully..';
	}
	else
	{
	echo 'we get some problem while submiting data..';
	}
	
?>

 


Comments / Answer

Leave a comment & ask question