Sending Form Data to Server Using JQuery-Ajax $.post Method

Sending Form Data Using Jquery $.post Method Without Refreshing the page. After Button Click Event, We will get the input form data using JQuery and pass this data to Server side using HTTP POST Request. In Server Side, we will receive posted data using PHP and we can process the data like INSERT,DELETE,FETCH,UPDATE and then we will get back the server side response to our front-end.

Generally, We can submit the form data using the HTTP get and post method. this technique refreshes our entire page. In many cases, we need to post the data on the server side without refreshing the entire page. And whatever server response after processing the given data, we write it to our front-end. For example: In the User Registration Form, Instead of After Submitting the form, we can suggest to our user that this user ID Already exist just after the user enters their user ID. This is best the experience we follow.

Telling user that the UserID already tacken just after entering their UserID

So we are taking the example of JQuery-Ajax. In Example, We will design a user registration form. We are not registering any users, we will just design the form and when user will enter their user ID, we will show the message that the UserID is available or not. We create a database table users. We will assume that all users registered data are stored in users table.So, We will store some static data in users table. Let's create a database and table first and store 1 record in the table.

CREATE DATABASE jquery_ajax;

CREATE TABLE users(
	id INT(10) NOT NULL AUTO_INCREMENT,
	name VARCHAR(200) NOT NULL ,
	user_id VARCHAR(200) NOT NULL,
	PRIMARY KEY (id)
);	

 INSERT INTO users SET name='taohid ansari',user_id='taohid';

Ok, now we have a database and table and we have inserted a user_id 'taohid' in our table. So in the registration form, if the user will enter the user_id as 'taohid', we will display an error message as 'User ID taohid already taken. Let's design our registration form and add the jquery-ajax code in the front-end.

	<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

	<b>Enter UserID and Remove Focus From Form</b>
	<input id="user_id">
	<br>
	<div id="message"></div>
	<script type="text/javascript">
	$(document).ready(function(){
		$("#user_id").blur(function(){
		  var user_id = $("#user_id").val();
		  $.post('server.php', { user_id:user_id }, function(data){
		  	 $("#message").html(data);
		  });
		});
	});
	</script>

server.php Code

	<?php 
	 
	  $connection = new MySQLi('localhost','root','','jquery_ajax');

	  $user_id = $_POST["user_id"];
	  $sql = "SELECT COUNT(1) FROM users WHERE user_id = '$user_id' ";
	  $rows  = $connection->query($sql);
	  $total_rows = $rows->fetch_array()[0];
	  if( $total_rows == 1 ){
	   ?><div style="background: red;"><?php 
	   echo "User ID ".$user_id." Already Registered!";
	   ?></div><?php 
	  }else{
	   ?><div style="background: green;"><?php
	   echo "User ID ".$user_id." is Available!";
	   ?></div><?php 
	  }
	?>
	

Download the Demo Code with Database SQL File