PHP POST: An associative array explained with HTML form and jQuery AJAX

What is $_POST in PHP?

The $_POST is an associative array of variables.

These variables can be passed by using a web form using the post method or it can be an application that sends data by HTTP-Content type in the request.

We often see web forms in different web pages to sign-up, sign-in, subscription etc. After filling the form in those web pages, as you press submit/save button, the data is generally sent to the server.

If form method was used as post and target page is PHP then the form data like your name, email etc. are collected in an associative array, $_POST. For example,

In the current script, you may use PHP $_POST array to get the entered information and store into the database or whatever the scenario may be. In above case, the name of the textbox field is the name.

Following are a few examples of using the PHP $_POST array with a simple web form which is followed by using this with jQuery and AJAX.

A $_POST example with a simple HTML form

In this example, an HTML form is created with a few fields like Name, email, password, address and gender.

After entering some dummy data, press the submit button. The form action is set to the same file where the form is created while the method in the <form> tag is post.

The entered data will be displayed by using the $_POST PHP array as follows:

See online demo and code

In above example, this is how the form tag was used:

1	<form method="post" action="">

 

That means, send the submitted data by using HTTP post method. The action=”” sets the target to the same page.

After that, a few form fields are created like:

 

The name=”postname” is the one that is accessible by using the $_POST PHP array. Similarly, other form fields can be accessed, including select dropdown by using the name of each field in PHP script.

AS you submit the form, following PHP script with $_POST is used to get the entered values:

 

The data taken by using the PHP POST array is assigned to variables. Finally, those variable values are displayed on the web page.

An example of $_POST with Bootstrap form

Technically, there is no difference while accessing the values from the simple HTML form or using the Bootstrap based form. As such, Bootstrap is a popular web framework these days, so I covered this example.

In this example, a web form is created by using the Bootstrap CSS classes. The same form fields are used as in above example along with a submit button.

Clicking on the button will submit the form where PHP script will use the $_POST to assign entered information to variables. Finally, the entered values are displayed on the same webpage. See the example online by clicking the link or image below:

See online demo and code

For using the Bootstrap classes, you have to include its CSS library into the web page. This website contains a series of Bootstrap tutorials that you may read here.

In the demo page, you can see the data is displayed after you enter the information and press the submit button. The same PHP script is used to get the values of the textbox or select dropdown by using the $_POST associative array.

You can see the complete code in the demo page.

An example of using $_POST with jQuery AJAX’s post method

Not only data sent by using the form’s method=post is contained in the $_POST array, but any data sent by using the HTTP Post request is accessible by using the $_POST.

The jQuery’s ajax post method is used to send data by using HTTP request. This method is used to make ajax calls, where the data is sent and returned without refreshing the web page, as it happened in above examples.

In the following example, I will include the jQuery library to use the $post method of jQuery. A form is given to enter the same information as in above examples. However, rather than sending it by using form’s action=””, the data will be sent by using the jQuery post method.

The data sent by $post is sent in the <script> section where a PHP file is called. See the complete code and output at the demo page:

See online demo and code

If you look at the code, there is no method used in the <form> tag or any action page is set, instead, it is simply given CSS class:

1	<form class="form-horizontal" role="form">

 

As you press the button after entering information, at the click event of the button the $.post method of jQuery is called.

In the $.post method, the PHP file is specified along with sending information entered in the form fields:

 

(See the <script> section in code)

In the PHP file, the $_POST array contains that information sent after using the $.post jQuery method. The information is assigned to PHP variables and displayed by using the echo statement:

 

A point to be noted is the echo statement will not directly display the information. The data is returned back to $.post method’s postresult parameter. And this line in the <script> section displays the information in an HTML div:

 

An example of using $_POST with MySQL database

In this example, an HTML dropdown is given to select a product. After selecting the product, press the button “Load Product Information”. At the click event of the button, the $.post method of jQuery is called.

The $.post method calls the PHP file where $_POST method is used to get the value of selected product. On that basis, an SQL query is written to fetch data from the MySQL database’s table.

Finally, PHP returns the fetched data back to $.post method which is displayed in an HTML table. See the example by clicking the link or image below:

See online demo and code

You can see the complete code including markup, jQuery, CSS and PHP at the demo page.