PC Services

"From Payroll to Body Scanners"

Established 1994

Some PHP Tips and 'Tricks'

Thinking beyond each page and DESIGNING your web site

Tel: 0118 946 3634
Email

Javascript/HTML/PHP CheckBox Array in Form

This is more how to write the HTML and Javascript, whilst still being able to return an array of items to the same/next PHP script.

Often search results get displayed as tables of short form information and the user can select one item to drill down for more details or choose several to compare or drill down for more details at the same time. Examples of this would be on a shopping site comparing several items in a category or on a job site selecting some of the vacancies in a search result.

Also you want to check that at least a certain number have been selected using Javascript before posting the form details.

Now the normal way to start this is to have a CHECKBOX for each item, but has a value of the identification number in the list as follows -

<td><input type=checkbox name='box' value=A></td>
<td><input type=checkbox name='box1' value=B></td>
<td><input type=checkbox name='box2' value=C></td>

Now due to the fact that it is easier in PHP decode POST results, as an array, which is easier to perform in HTML as

<td><input type=checkbox name='box[]' value=A></td>
<td><input type=checkbox name='box[]' value=B></td>
<td><input type=checkbox name='box[]' value=C></td>

Then the POST variable $_POST[ 'box' ] contains an array of identification numbers, as PHP gathers all 'box[]' values together, in the same way as a PHP line like

$array[] ='x';

Would add 'x' as the next item in the array. Hence the array returned in the POST variables is already an array which can be easily manipulated or scanned for checks or further database search queries. See MySQL queries using WHERE <x> IN <......> and use of PHP implode function to faciltate this to a simple WHERE clause to scan a list of values by -

WHERE box IN ('".implode( "', '", $box )."')

The trouble really starts when you also need some Javascript Buttons, so that this HTML table containing a column with CHECKBOXes can have shortcut functions to Clear All or Select All CHECKBOXes. To do this in Javascript it is usally done by having all the CHECKBOXes having the 'name' attribute being the same

e.g. name='box'

As Javascript will create this into an array for Javascript usage and mess up the PHP array functions. The easiest way around this is to do two things

Add the 'id=' attribute to each CHECKBOX
Use the method of By Ids to reference the array of HTML checkbox ids.

So our generated HTML becomes

<td><input type=checkbox id=check name='box[]' value=A></td>
<td><input type=checkbox id=check name='box[]' value=B></td>
<td><input type=checkbox id=check name='box[]' value=C></td>

If we now add buttons to Select ALL and Clear ALL to call a function CHECK or UNCHECK all the boxes respectively, whilst adding a check function to the Submit button, we end up with these SHORT Javascript functions to include as a Javascript File or inline scripts as follows -

function checkform( thisid, min )
{
var loop, i = 0;
for( loop = 0; loop < thisid.length; loop++ )
   if( thisid[ loop ].checked == true )
     i++;
if( i < min)
  {
  alert( "At least "+min+" item(s) must be selected\n"
         +"(by a tick in Select column)\n  In order to proceed" );
  return false;
  }
return true;
}

function select_all( thisid, val )
{
var loop;
for( loop = 0; loop < thisid.length; loop++ )
    thisid[ loop ].checked = val;
return true;
}

See the include file 'checkform.js' for full comments. This method is portable as the id is passed in so can be called for various forms or sections of forms.

Then the buttons can simply be created by HTML lines of

<input type=button value="Select ALL" onclick="select_all( check, true ); return false;">
<input type=button value="Clear ALL" onclick="select_all( check, false ); return false;">

The parameters passed are - check the name of the HTML/Javascript id array, whilst true sets all CHECKBOXes to CHECKED value and false clears all CHECKBOXes to UNCHECKED.

To see an example in action go to the next page - Example Array