For today’s programming tutorial, I’m going to show how to pass input arrays through an AJAX request using JQuery. This tutorial will assume that you have at least basic knowledge of using JQuery, and also have knowledge of any scripting language of choice (Perl, PHP, Python, Ruby, etc).

For those who have been using JQuery, its been quite frustrating to know that the usual method for passing multi-valued parameters like checkboxes is by giving each checkbox a unique name or id. Sure its a little hassle at first when processing your backend if you only have a few selections needed, but what about larger forms with 20 or more inputs? The solution for this is using the traditional input arrays for forms. But how do you do it? Here’s how:

Let’s make a very simple script. This example will use a survey form as an example. First, let’s do the form for the survey, let’s name this form page as the index.

index.php

Select your favorite programming languages:<br>
	<input type="checkbox" name="prog" value="C">C<br>
	<input type="checkbox" name="prog" value="C++">C++<br>
	<input type="checkbox" name="prog" value="Java">Java<br>
	<input type="checkbox" name="prog" value="VB.NET">VB.NET<br>
	<input type="checkbox" name="prog" value="PHP">PHP<br>
	<input type="checkbox" name="prog" value="Perl">Perl<br>
	<input type="checkbox" name="prog" value="Ruby">Ruby<br>
	<input type="checkbox" name="prog" value="Python">Python<br>
	<input type="submit" id="submit_prog" value='Submit' />

<div id="content">The AJAX response will show up here.</div>

Its a very simple checkbox list, notice that the options all have the same name? We’ll get to that later when we add the AJAX script. Also, we have added a div where to put the contents of the AJAX response. For now, let’s create a simple backend to process our AJAX request. I’m just going to name this post_prog.php for our example:

post_prog.php

You have selected:<br>
<?php
foreach ($_POST['prog'] as $prog)
{
	$prog = htmlspecialchars($prog, ENT_QUOTES);
	echo $prog, '', "\\n";
}
?>

Now that we have our form and our backend, we can now create our AJAX request. In processing our form input, we must select all of the checkboxes with the same name/ID using XPath, then check if they are selected. If they are selected, we will add it to our input array in the query string. Assuming we have created our $(document).ready and $(”#submit_prog”).click handlers already, here is the code to process the input arrays:

index.php

var query_string = '';
$("input[@type='checkbox'][@name='prog']").each(
	function()
	{
		if (this.checked)
		{
			query_string += "&prog[]=" + this.value;
		}
	});

now for the final step, we now do our AJAX request, and pass the query string that we have created to the JQuery’s data parameter. The we’ll append the AJAX response to the div we created earlier. Here is the code for doing it:

index.php

$.ajax(
	{
		type: "POST",
		url: "post_prog.php",
		data: "id=1" + query_string,
		success:
			function(t)
			{
				$("div#content").empty().append(t);
			},
		error:
			function()
			{
				$("div#content").append("An error occured during processing");
			}
	});

The final result can be found here: JQuery Tutorial Demo
Download the source codes for this demo here: JQuery Tutorial Source Codes

Update: For managing larger and more complex forms, check the article on using JQuery’s Form Plug-in