How to POST data to a PHP script using HTML as an Array

When we work with HTML and PHP, sometimes we need to send data to a PHP script as an array. As an example consider about a food ordering page. In that case we should provide the functionality of choosing more than one food item in several quantities. If we are not supposing to do this with array, we are required to do more coding with both HTML and JavaScript. With this technique we are using only the HTML for client side and PHP for the server side.

Note : <input type="hidden"> is an important HTML form element which can hold some data to be sent to the PHP script. But they are not visible to the HTML viewers.

foodMenu.html

<form action="foodMenu.php" method="post">
<div>
        <p>Lunch</p>
        <p>
        <span><input type="hidden" value="Food Item 1 " name="itemName[]">Food Item 1
<input type="hidden" value="100" name="itemCost[]">100/=</span><br>
<input type="textbox" value="0" name="itemQTY[]">
<input type="button" value="Select" >
        </p>
        <p>
        <span><input type="hidden" value="Food Item 2" name="itemName[]">Food Item 2
<input type="hidden" value="150" name="itemCost[]">150/=</span><br>
<input type="textbox" value="0" name="itemQTY[]">
<input type="button" value="Select">
        </p>
        <p>
        <span><input type="hidden" value="Food Item 3" name="itemName[]">Food Item 3
<input type="hidden" value="150" name="itemCost[]">150/=</span><br>
<input type="textbox" value="0" name="itemQTY[]">
<input type="button" value="Select" >
        </p>
<input type="submit" value="Submit" >
 </div>

foodMenu.php

<?php   

$itemName=$_POST['itemName'];  //Grab the posted item names from the html form
$itemQTY=$_POST['itemQTY'];    //Grab the posted item QTY from the html form
$itemPrice=$_POST['itemCost'];  //Grab the posted item prices from the html form

$grandTotal=0;
echo('<table>');
echo('<tr><td>Meal List</td></tr>');
echo('<tr><td>Items</td><td>QTY</td><td>Cost</td></tr>');

for($count=0;$count<count($itemName);$count++){ //loop to print stored data in the arrays
    if($itemQTY[$count]>0){
        echo("<tr>");
        echo('<td>'.$itemName[$count].'</td><td>'.$itemQTY[$count].'</td><td>'.subTotal($itemPrice,$itemQTY,$count));
        echo("</tr>");
    }
}
echo('<tr>');
    echo('<td>'.'</td><td>'.totalQTY($itemQTY).'</td><td>'.$grandTotal.'</td>');                                             
    echo('</tr>');
echo('</table>');
//function to calculate sub totals and grand totals
function subTotal($itemPrice,$itemQTY,$count){
 global $grandTotal;  //refer to above global variable at the begining
$subTotal[$count]=$itemPrice[$count]*$itemQTY[$count];
$grandTotal=$grandTotal+$subTotal[$count];

return $subTotal[$count];

}
//function to calculate the total number of the QTYs
function totalQTY($itemQTY){
return array_sum($itemQTY);
}
?>

Automatically populate SELECT items in HTML using JAVASCRIPT

We are going to learn how we can automatically populate a data set to view in a select element in HTML using javascript. As an example we will populate set of years, months and dates inside of select element which can be used to input a particular birthday in a HTML form.


<script language="javascript">

             function loadYears(){
            var sel = document.getElementById('year');

// 'new Date().getFullYear()' is used to get current year.

            for(var i = 1950; i <= new Date().getFullYear(); i++) {
            var opt = document.createElement('option');
            opt.innerHTML = i;
            opt.value = i;
            sel.appendChild(opt);
            }
            }
           
            function loadDays(){


            document.getElementById('day').innerHTML = ""; //initially clears the data items which were included by the previous function invokes.

            var sel = document.getElementById('day');

     // if/else set is to decide the number of days for a particular month.     
 
   if(document.getElementById('month').value!='February' && document.getElementById('month').value!='April' && document.getElementById('month').value!='June' && document.getElementById('month').value!='August' && document.getElementById('month').value!='November' && document.getElementById('month').value!='September'){
                for(var i = 1; i < 32; i++) {
                var opt = document.createElement('option');
                opt.innerHTML = i;
                opt.value = i;
                sel.appendChild(opt);
                }
                }else{
               
                for(var i = 1; i < 31; i++) {
                var opt = document.createElement('option');
                opt.innerHTML = i;
                opt.value = i;
                sel.appendChild(opt);
                }
            }
            }
           
            function loadMonths(){

//JavaScript array to store the names of the months
 var months = ["January","February","March","April","May","June","July","August","September","October","November","December"];    
            var sel = document.getElementById('month');
            for(var i = 0; i < months.length; i++) {
            var opt = document.createElement('option');
            opt.innerHTML = months[i];
            opt.value = months[i];
            sel.appendChild(opt);
            }
            }
        </script>

<body onload="loadYears();loadMonths()"> <!-- According to my logic Year and month generation functions should be invoked at the body onload event -->

<!-- Following are the particular select elements on the html page -->
<select id="year" name="year"></select>
               
<select id="month" name="month" onclick="loadDays()"> </select><!-- According to my logic days should be loaded at the time of choosing the month. So I invoked that function by the event of onclick here. -->
                           
<select id="day" name="day"></select>