How to Send JavaScript Array to the AJAX using jQuery and PHP

An Array is used to store multiple values in a single variable.

This can be used to pass the group of related values as data to the $.ajax for processing and get the response.

E.g. pass all checked checkboxes values, selected values from the list.

In this tutorial, I show how you can pass JavaScript Array to an AJAX request with an example.

How to Send JavaScript Array to the AJAX using jQuery and PHP


  1. Table structure
  2. Configuration
  3. HTML
  4. PHP
  5. jQuery
  6. Demo
  7. Conclusion

1. Table structure

I am using userinfo table in the example.

CREATE TABLE `userinfo` (
  `name` varchar(100) NOT NULL,
  `email` varchar(100) NOT NULL,
  `lang` varchar(100) NOT NULL,

2. Configuration

Create a config.php file for the database connection.

Completed Code


$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
   die("Connection failed: " . mysqli_connect_error());


Create a simple form layout that has two input elements, multiple checkboxes, and a button.

Here, I used the same name="prolang" on the checkboxes.

Display the AJAX response on successful callback in <div class='details'>.

Completed Code

<div class="container">
  <div class="content">
   <h2>Enter Details</h2>
   <div class="element">
     <input type="text" id="txt_name" placeholder="Name">

   <div class="element">
    <input type="email" id="txt_email" placeholder="email">

   <div class="element">
    <div>Languages you now?</div>
    <input type="checkbox" name="prolang" value="JavaScript"> JavaScript <br/>
    <input type="checkbox" name="prolang" value="jQuery"> jQuery <br/>
    <input type="checkbox" name="prolang" value="AngularJS"> AngularJS <br/>
    <input type="checkbox" name="prolang" value="NodeJS"> NodeJS <br/>
    <input type="checkbox" name="prolang" value="TypeScript"> TypeScript <br/>

   <div class="element">
    <input type="button" value="Submit" id="submit">

  <div class="details">
    Name : <span id="name"></span><br/>
    Email : <span id="email"></span><br/>
    Languages : <span id="lang"></span><br/>
    jQuery : <span id="foundjquery"></span>

4. PHP

Create a getData.php file for handling AJAX requests.

Store $_POST values.

$_POST['lang'] contains an Array so first check whether it contains 'jQuery' string or not.

Convert it into string using implode() method for storing in the MySQL table.

Store values in the userinfo table and initialize $return_arr Array with values and return it in JSON format.

Completed Code

include "config.php";

$name = $_POST['name'];
$email = $_POST['email'];
$lang = $_POST['lang'];

$foundjquery = "Not found";
    $foundjquery = "found";
// Converting the array to comma separated string
$lang = implode(",",$lang);

// check entry
$sql = "SELECT COUNT(*) AS cntuser from userinfo WHERE email='".$email."'";
$result = mysqli_query($con,$sql);
$row = mysqli_fetch_array($result);
$count = $row['cntuser'];

if($count > 0){
    // update
    $updatequery = "UPDATE userinfo SET name='".$name."',lang='".$lang."' WHERE email='".$email."'";

    // insert
    $insertquery = "INSERT INTO userinfo(name,email,lang) VALUES('".$name."','".$email."','".$lang."')";
$return_arr = array('name'=>$name,'email'=>$email,'lang'=>$lang,"foundjquery"=>$foundjquery);

echo json_encode($return_arr);

5. jQuery

On submit, button click gets input values and initializing the Array lang with checked checkboxes values by looping on $("input[name='prolang']:checked") selector using .each() function.

Passing the initialized variables as data in AJAX request.

data: {name:name,email:email,lang:lang}

Here, name and email are string type variables and lang is an Array variable.

Note – You can pass JavaScript Array variable as same as any other variable in AJAX request.

Completed Code


    // submit button click

        var name = $("#txt_name").val();
        var email = $("#txt_email").val();
        var lang = [];

        // Initializing array with Checkbox checked values

        if(email != ''){
                url: 'getData.php',
                type: 'post',
                data: {name:name,email:email,lang:lang},
                dataType: 'JSON',
                success: function(response){

                    // selecting values from response Object
                    var name =;
                    var email =;
                    var lang = response.lang;
                    var foundjquery = response.foundjquery;

                    // setting values


6. Demo

View Demo

7. Conclusion

You can simply pass a JavaScript Array variable in the $.ajax as any other variable.

On PHP script you can directly use it as a normal PHP Array.

If you found this tutorial helpful then don't forget to share.