Process form value in PHP using jQuery AJAX method

By Faruque Ahamed Mollick

AJAX is a nice technique of doing something or processing server-side PHP code without refreshing the whole page. AJAX is not a new programming language. It is a technique of using the existing JavaScript where there is no need to refresh the complete page.

jQuery is a JavaScript library which contains lots of ready to use. Working with AJAX is easier using jQuery as there is already AJAX method available in jQuery.

Play/Pause Button For HTML5 Video Using JavaScript

In this tutorial, I am going to tell you how to pass a form data into JavaScript variable and then how to process the data using jQuery AJAX method. We will jQuery for AJAX call.

At first, we need to create an HTML form with a button. We will also create a div element with div id “result”. In this area, the PHP file will load that we want to call via jQuery AJAX. Below is the HTML code:

<div id="box">
  <input type="text" name="city" id="city" /><br/>
  <input type="text" name="country" id="country" /><br/>
  <input type="submit" name="sub" id="sub" value="Get" /><br/>

  <div id="result"></div>
</div>

And the JavaScript code is given below:

$(document).ready(function(){
  
  $("#sub").click(function() {
    var city_name=$("#city").val();
    var country_name=$("#country").val();
    $.ajax({
      url:'ajax.php',
      data:{city:city_name, country:country_name},
      type:'POST',
      success:function(data) {
        $("#result").html(data);
      }
    });
    
  });
  
});

All these codes will go to index.php file. We are going to take the form value by using the unique form input id. We are taking the data inside JavaScript variable and after that, we are sending the value using post method to ajax.php file and loading it inside the div id “result”. The data is processed by the PHP file ajax.php.

The complete code for index.php file is given below:



<html>
<head>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
  
  $("#sub").click(function() {
    var city_name=$("#city").val();
    var country_name=$("#country").val();
    $.ajax({
      url:'ajax.php',
      data:{city:city_name, country:country_name},
      type:'POST',
      success:function(data) {
        $("#result").html(data);
      }
    });
    
  });
  
});

</script>
</head>

<body>

<div id="box">
  <input type="text" name="city" id="city" /><br/>
  <input type="text" name="country" id="country" /><br/>
  <input type="submit" name="sub" id="sub" value="Get" /><br/>

  <div id="result"></div>
</div>

</body>
</html>

And the ajax.php file will contain the code that is given below:

<?php
if(isset($_POST['city']) &&!empty($_POST['city']) && isset($_POST['country']) &&!empty($_POST['country']))
{

$getcity = $_POST['city'];
$getcountry = $_POST['country'];
echo "City: $getcity <br/>";
echo "Country: $getcountry";

} else {
  echo "<h2>Please enter all the values</h2>";
}
?>

In the above PHP code, we are taking the value and displaying it on screen.  This file is calling via AJAX.

Now run it on your server and you will able to see after entering the fields that it showing the field text to you. If you leave one of the fields, then it will show you “Please enter all the values” text.

Disable HTML Input Field And Make It Un-clickable

How to create JSON formatted text in PHP

In the ajax.php file, we can do anything with the form data and even we can insert the data inside the database and there are no need to refresh the whole page to do it. This is the main feature of using AJAX. It saves the bandwidth of your site and also consumes less data for client side.

Leave a Reply

Your email address will not be published. Required fields are marked *