Using HTTP GET method of posting data by using JQuery in web forms

We can post data by using GET method to another file using JQuery. Here the advantage is page is not refreshed or reloaded.

$.get(url,data,function)

URL : The name or address of the file to which data will be submitted
Data : (optional ) We can send data to above URL
Function : Function to run once the request is completed.

HTTP GET data using JQuery

We will learn by using some examples. Let us try to display date and time by connecting to a click event of a button. The data we will get is a string containing data and current time at the server. This string of data we will keep inside a div tag called display.

<html>
<head>
<title>plus2net demo scripts using JQuery</title>
</head>
<script src="//ajax.googleapis.com/ajax/libs/

jquery/1.8.1/jquery.min.js">
</script>
<body>
<script>
   $(document).ready(function() {
      $("#b1").click(function(event){
          $.get('get-clockck.php',function(return_data){
          $("#display").html(return_data);
      });
     });
   });
</script>
      <input type="button" id="b1" value="Show Date & Time">
<br>
<div id="display" ></div>

</body>
</html>

Demo of the above code is here

You can keep clicking the above button and see how time is changing. Every time you click the button it triggers the click event of b1 button and by using GET method we are getting the current time from getclockck.php.

get-clockck.php

This is a PHP file with one line of code displaying current data and time at server. Here is the code.

<?Php
echo date("d/m/y : H:i:s", time());
?>

Using GET method to post data

The more practical uses of GET method is to post data. We will use set of name & value to our clock and get back the same data along with the string.

Here we are sending site and plus2net as name value pair to get-clockck2.php file and getting back the same data. Here is the code

<script>
   $(document).ready(function() {
      $("#b2").click(function(event){
          $.get('get-clockck2.php',{'site':'plus2net'},

function(return_data2){$("#display2").html(return_data2);
      });
     });
   });
</script>
      <input type="button" id="b2" value="Show Date & Time with data">
<br>
<div id="display2" ></div>

The code for the file get-clockck2.php is here

<?Php
$site=$_GET['site'];
echo "Welcome $site ";
echo date("d/m/y : H:i:s", time());
?>

In the above code first we are collecting the value associated with site name. Then adding with Welcome message with time string and returning to main script.

Using a Form and posting data with GET method

The best way to use GET method is to use in form. We will create a form and users will submit it. We will use serialize() function to create a string with form data. This sting can be displayed in the same page or can be directly posted to processing page.

This is the line which creates the string by using serialize() function and stores in a variable data_list.

data_list4 = $("#f1").serialize();

If you want to display the data string you can add one div layer and display data inside it.

data_list4 = $("#f1").serialize();
$("#display4").html(data_list4);

Posting data and getting back.

After submitting data to a backend script we will be interested in outcome of it. For example if we add a student to our table , we will displaying the unique student or auto-increment id of the record. So we will not try to bring back the data from the backend script and display the same. It is also required to get the status of record updating or data validation.

Here we will try to postback the same data to our main script from the backend program.

Here is the jquery part connected to click event of button ( id = b3) along with the form ( id = f1).

Before that here is the demo

Name
Add1
Sex	Male Female
Class
	Agree to terms & conditions

The source code is here

<html>
<head>
<title>plus2net demo scripts using JQuery</title>
</head>
<script src="//ajax.googleapis.com/ajax/libs/

jquery/1.8.1/jquery.min.js"></script>

<body>
<script>
   $(document).ready(function() {
      $("#b1").click(function(event){
         data_list4 = $("#f1").serialize();
$("#display4").html(data_list4);
 $.get( "form-getck.php", $( "#f1" ).serialize(),function(return_data){
          $("#display3").html(return_data);
      });
    
});
   });
</script>
<table><form id=f1>
<tr><td>Name</td><td><input type=text name=t1></td></tr>
<tr><td>Add1</td><td><input type=text name=t2></td></tr>
<tr><td>Sex</td><td>
<input type=radio name=r1 value=male>Male
<input type=radio name=r1 value=female>Female
</td></tr>

<tr><td>Class</td><td><select name=class>
 <option value=first>First</option>
<option value=second>Second</option>
<option value=third>Third</option>
</select>

</td></tr>

<tr><td><input type=checkbox value=yes name=c1></td>
<td>Agree to terms & conditions</td></tr>
<tr><td><input type="button" id="b1" value="Submit"></td>
<td></td></tr>
</form>
</table>

      
<div id="display3" ></div>
<br>
<div id="display4" ></div>
</body>
</html>

We know we have to use script to post data by email or store in a table but To keep the script simple we will only postback the data to main script. The backend script code is here.

<?Php
$t1=$_GET['t1'];
$t2=$_GET['t2'];
$r1=$_GET['r1'];
$r1=$_GET['r1'];
$class=$_GET['class'];
$c1=$_GET['c1'];
$str =" Name : $t1, Add : $t2, Sex : $r1, class : $class, c1 : $c1 ";
echo $str;
?>

Writing form data to a text file

You can download the zip file and run the entire sample codes explained here. Inside the file form-getck.php you can find the PHP code to store the form data in a plan text file. Similarly the data can be used to insert records in a database table.

Posting data and getting return data as JSON string

Simple way to post two parameters

$('#b1').click(function(){
var id=$(this).attr('id');
$.get('delete-record.php',{'p_id':id,'todo':'delete'},function(return_data){
$("#msg_display").html(return_data.msg);     
$("#msg_display").show();
setTimeout(function() { $("#msg_display").fadeOut('slow'); }, 4000);
},"json");

Collecting the data and posting back to main script

<?Php
$p_id=$_GET['p_id'];
$todo=$_GET['todo'];

$elements=array("p_id"=>"$p_id","db_status"=>"","msg"=>"");
$elements['msg']="Records Deleted";
$elements['db_status']="True";
echo json_encode($elements);
?>

Using CSS code for the message box

#msg_display{
 display: none;
 position: fixed;
 z-index: 10;
 top:0;
 right:50%;
}

We will post data to a backend script using GET method and then get the data back from the script. We will receive data as JSON string and display them in a display box.
In our demo script we have three checkboxes with different id, on click ( check or uncheck ) of any checkbox the change event function will fire.
We will read the id ,value and status of the clicked checkbox and store them in variables.

var chk_id=$(this).attr('id');
var chk_value=$(this).val();
var chk_status= $(this).prop('checked');

Now using get method we will post checkbox id and status to backed script. You can keep any database updating of string manipulation or any other requirement in your backend script and finally we will return a JSON string with four variables.

$.each(return_data.data, function(key,value){

We will display the variables in a message box.

$('#msg_display').html(" id : " + value.chk_id + " | Checkbox Status : " + value.chk_status + " | db_status : " + value.db_status + " | Script Status : " + value.script_status );

Here is the full code.

<script>
   $(document).ready(function() {
$('input[type="checkbox"]').change(function(){
var chk_id=$(this).attr('id');
var chk_value=$(this).val();
var chk_status= $(this).prop('checked');
$.get('form-get1ck.php',{'chk_id':chk_id,'chk_status':chk_status},function(return_data){
$.each(return_data.data, function(key,value){
$('#msg_display').html(" id : " + value.chk_id + " | Checkbox Status : " + value.chk_status + " | db_status : " + value.db_status + " | Script Status : " + value.script_status );
$('#msg_display').show();
setTimeout(function() { $("#msg_display").fadeOut('slow'); }, 4000);
});
}, "json");

});
   });
</script>

The backend script part is here.

<?Php
$chk_id=$_GET['chk_id'];
$chk_status=$_GET['chk_status'];
/// Set your script status  /// 
$script_status='OK';
$db_status='OK';

/// JSON string as output ///

echo "{"data":[{"chk_id":"$chk_id","db_status":"$db_status","script_status":"$script_status","chk_status":"$chk_status"}]}";
?>

Posting by GET and data return by JSON string

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

JQuery HTTP GET method of posting data