How to submit an associative array with HTML & PHP

This post will show you how to submit an associative array with HTML and PHP. This concept is quite useful when you need to submit array type data such as shopping cart information.

Feel free to skip to ‘HTML forms and input‘ or to ‘Submitting Array data through HTML‘ if you’re quite familiar with the syntax of PHP’s array() function.

Associative arrays in PHP

One of the best things about PHP is its dictionary-like arrays. The associative array data structure allows the user to create multi-dimensional arrays with many different data types. It is quite similar to an object but created at runtime. The values in associative arrays exist in key-value pairs.

As described on php.net:

“An array in PHP is actually an ordered map. A map is a type that associates values to keys.”

The code below shows how you can define a simple PHP array:

<?php
// For one dimensional array
$arr = array('hello', 'world', 12, 33.56); // notice different data types in the same array 

// Associative array structure using integer keys
$arr = array (  0 => 'value1', 1=>'value2');

// Or use strings as keys
$arr = array(
'key1' => 'value1',
'key2' => 'value2'
);

Notice that the keys are either integers or strings. This is because, in PHP arrays, the keys must be unique for each value, hence forming key-value pairs.

The code above shows only a basic version definition of a PHP array. To give a better understanding of what the array function is capable of, check out the code below:

<?php
$arr = array(
    'key' => 'value', // String 
    'age' => 25, // integer
    'score' => 87.12, // float
    'trx' => array(33, 55, 75, 113, 180), // one dimentional array
    'orderDetails' => array( // here we have a multidimentiional array as a value
        'name' => 'john doe',
        'productIDs' => array(11, 442, 532, 1341),
        'totalPrice' => 112.53,
        'currency' => 'USD'
    ),
    'myMethod' => function(){
        return "Hello, World!"
    }
);

// To individual access the values:
echo $arr['key']; // Prints value
echo $arr['age']; // Prints 25
echo $arr['score']; // Prints 87.12
echo $arr['trx'][2]; // Accesses 3rd value in the array, prints 75
echo $arr['orderDetails']['name']; // Prints john doe
echo $arr['orderDetails']['productIDs'][0]; // prints 11
echo $arr['myMethod'](); // Executes myMethod function; prints Hello, World!

By now you might have a basic understanding of how PHP arrays work. Next, we’ll look into the HTML <form> and <input> tags, and how we can use these to input array-like data from the user.

HTML forms and input

When it comes to the web, the standard way of submitting any input data taken from a user is through HTML <form> and <input> tags. We will be concentrating on the name attribute of the <input> tags.

A basic syntax for writing name values is:

form.html:

<form action="results.php" method='post'>
    <input type='text' name='genre'>
    <input type='number' name='year'>
    <button type='submit' name='submit'>Submit Form</button>
</form>

results.php:

<?php
$genre = $_POST['genre'];
echo $genre;

In the above code, after the user clicks the submit button, the form data is sent to the results.php file. Since we used the POST method to submit the form, the results are stored in the $_POST array. We can access the data of the input field by using $_POST[’genre’]. Here genre is the value we used in the name attribute of the <input> tag. Let’s now look at an example, we can submit an array of data.

Submitting Associative Array data With HTML & PHP

Suppose you have multiple car names and you want to receive them on the back-end as an array instead of name-value pairs for each car. You can achieve this by using the array notation like car[].

Let’s look at an extended example of the same problem.

form.html:

<form action='results.php' method='post'>
    <input name='cars[]' placeholder='Enter Car Name'>
    <input name='cars[]' placeholder='Enter Car Name'>
    <input name='cars[]' placeholder='Enter Car Name'>
    <input name='cars[]' placeholder='Enter Car Name'>
    <input name='cars[]' placeholder='Enter Car Name'>
    <button name='subimt'>Submit Information</button>
</form>

results.php:

<?php
$cars = $_POST['cars'];
foreach($cars as $car):
    echo $car."<br>";
endforeach;

print_r($cars);

Sample output:

Ferrari Testarossa
Lamborghini Gallardo
Ford Mustang
Honda Prius
Jeep Gladiator

Array
(
    [0] => Ferrari Testarossa
    [1] => Lamborghini Gallardo
    [2] => Ford Mustang
    [3] => Honda Prius
    [4] => Jeep Gladiator
)

In the above, you’ll notice that we only accessed one element in the $_POST array, i.e. cars, to access all the results at once. Using this method may be especially helpful when you are creating fields dynamically. You may even extend the above problem to allow car information and driver information as well.

form.html:

<form action="test.php" method="post">
	Enter Car 1 details: <br>
	<input type="text" name="cars[0][name]" placeholder="Enter car name">
	<input type="number" name="cars[0][year]" placeholder="Enter car year">
	<br><br>

	Enter Car 2 details: <br>
	<input type="text" name="cars[1][name]" placeholder="Enter car name">
	<input type="number" name="cars[1][year]" placeholder="Enter car year">
	<br><br>

	Enter Car 3 details: <br>
	<input type="text" name="cars[2][name]" placeholder="Enter car name">
	<input type="number" name="cars[2][year]" placeholder="Enter car year">
	<br><br>

	<button type="submit">Submit Information</button>
</form>

results.php:

<?php
print_r($_POST);

Sample output:

Array ( 
    [cars] => Array ( 
        [0] => Array ( 
            [name] => Jeep Gladiator 
            [year] => 2019 
        ) 
        [1] => Array ( 
            [name] => Ford Mustand Vintage 
            [year] => 1966 
        ) 
        [2] => Array ( 
            [name] => Ferrari Testarossa 
            [year] => 1990 
        )
    )
)

In Summary

As you can see, an associative array is formed on the server-side. Using this method, you can submit many combinations of data. You can also use this method to get information from fields dynamically added to your form.

Examples can include:

  • Adding a new education/degree field upon button press
  • Adding a new products row when working on a point-of-sale (POS) system.
  • Reading multiple products and their info from newly added products.

You should now be able to submit associative array data with PHP and HTML. Let us know your tips in the comments below. Love to code? Why not check out our coding section?



About the Authors

Each member of Anto's editorial team is a Cloud expert in their own right. Anto Online takes great pride in helping fellow Cloud enthusiasts. Let us know if you have an excellent idea for the next topic!

Support the Cause

Support Anto Online and buy us a coffee. Anything is possible with coffee and code.

Buy me a coffee



One Comment on “How to submit an associative array with HTML & PHP”

Leave a Reply

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