Home >>Ajax Tutorial >Ajax Registration Form with PHP, MySQL and jQuery

Ajax Registration Form with PHP, MySQL and jQuery

Ajax Registration Form with PHP, MySQL and jQuery

ajaxregistrationform.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ajax Registration Form with PHP, MySQL and jQuery</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 </head>
<body>
<div class="container">
<h3 class="text-center text-primary">Ajax Registration Form with PHP, MySQL and jQuery</h3>
 	<div class="form-group">
      <label for="email">Enter Your Name:</label>
      <input type="text" class="form-control" id="name" placeholder="Enter Name" name="name">
    </div>
	<div class="form-group">
      <label for="email">Enter Your Email:</label>
      <input type="email" class="form-control"  id="email" placeholder="Enter Email" name="email">
    </div>
	<div class="form-group">
      <label for="email">Enter Your Course:</label>
      <input type="text" class="form-control" id="course" placeholder="Enter course" name="course">
    </div>
    <input type="button" class="btn btn-primary" value="save data" id="butsave">
</div>

<script type="text/javascript">

// Ajax post
$(document).ready(function() 
{
$("#butsave").click(function() 
{
var name = $('#name').val();
var email = $('#email').val();
var course = $('#course').val();

	if(name!="" && email!="" && course!="")
	{
		jQuery.ajax({
		type: "POST",
		url: "saveData.php",
		dataType: 'html',
		data: {name: name, email: email,course:course},
		success: function(res) 
		{
			if(res==1)
			{
			alert('Data saved successfully');	
			}
			else
			{
			alert('Data not saved');	
			}
			
		},
		error:function()
		{
		alert('data not saved');	
		}
		});
	}
	else
	{
	alert("pls fill all fields first");
	}

});
});
</script>
</body>
</html>

saveData.php

<?php 
$con=mysqli_connect("localhost","root","","phptpoint_ci") or die(mysqli_error());

extract($_POST);

if($name!="" && $email!="" && $course!="")
{
	$name = $_POST['name'];
	$email = $_POST['email'];
	$course = $_POST['course'];
	$query=mysqli_query($con,"insert into student(name,email,course) values('$name','$email','$course')");
	if($query)
	{
	echo 1;	
	}
	else
	{
	echo 0;	
	}
}
?>
Output