How to pass multiple values to a hidden field

I'm trying to integrate the ui autocomplete to some form fields but am running into 2 issues.

The first is how to pass and keep multiple values to a hidden form field. As my script is now it passes the selected values to the hidden field but it only keeps the last one selected. What I need it to do is keep all values selected and format them with a comma and space between each selection. I then need my php file to recognize the comma delimiter and format each value in the array as a separate value instead of returning it as all one value.

The second issue I'm having is I want to still be able to save new values to the database instead of only being able to select current values. As it is now it only passes selected values from the autocomplete suggestions with no way to pass a new one. I'm thinking I need to set up an event that will pass a new value to the hidden field on enter or on click away, or maybe create a small "add" button even.

I'll post my script and php code in replies.

 

My script:

		<div id="editcbprofile">
		<div id="formWrap">
<div id="activities" class="ui-helper-clearfix">
<input id="cb_activitiesterm" type="text">
<input id="cb_activities" name="cb_activities" type="hidden">
					</div>
		</div></div>
		<script type="text/javascript" src="autocomplete/js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="autocomplete/js/jquery-ui-1.8.custom.min.js"></script>
		<script type="text/javascript">
			$(function(){
				
				//attach autocomplete
				$("#cb_activitiesterm").autocomplete({
					
					//define callback to format results
					source: function(req, add){
					
						//pass request to server
						$.getJSON("autocomplete/autocom.php?callback=?", req, function(data) {
							
							//create array for response objects
							var suggestions = [];
							
							//process response
							$.each(data, function(i, val){								
								suggestions.push(val.cb_activitiesterm);
							});
							
							//pass array to callback
							add(suggestions);
						});
					},
					
					//define select handler
					select: function(event, ui) {
						
						//create formatted activity
						var activity = ui.item.value,
							span = $("<span>").text(activity),
							a = $("<a>").addClass("remove").attr({
								href: "javascript:",
								title: "Remove " + activity
							}).text("x").appendTo(span);
						
			//add interest to activities div		          
                        span.insertBefore("#cb_activitiesterm");	
                                
                  //add activity to hidden form field
                  $('input[name=cb_activities]').val(activity);
					},
					
					//define select handler
					change: function() {
						
						//prevent 'to' field being updated and correct position
						$("#cb_activitiesterm").val("").css("top", 2);
					}
				});
				
				//add click handler to activities div
				$("#activities").click(function(){
					
					//focus 'to' field
					$("#cb_activitiesterm").focus();
				});
				
				//add live handler for clicks on remove links
				$(".remove", document.getElementById("activity")).live("click", function(){
				
					//remove current activity
					$(this).parent().remove();
					
					//correct 'to' field position
					if($("#activities span").length === 0) {
						$("#cb_activitiesterm").css("top", 0);
					}				
				});				
			});
		</script>

Code (markup):

 

My php file:

<?php

	//connection information
	$host = "localhost";
	$user = "myusername";
	$password = "mypassword";
	$database = "mydb";
	$param = $_GET["term"];
	
	//make connection
	$server = mysql_connect($host, $user, $password);
	$connection = mysql_select_db($database, $server);
	
	//query the database
	$query = mysql_query("SELECT * FROM jos_comprofiler WHERE cb_activities REGEXP '^$param'");
	
	//build array of results
	for ($x = 0, $numrows = mysql_num_rows($query); $x < $numrows; $x++) {
		$row = mysql_fetch_assoc($query);
    
		$activities[$x] = array("cb_activitiesterm" => $row["cb_activities"]);		
	}
	
	//echo JSON to page
	$response = $_GET["callback"] . "(" . json_encode($activities) . ")";
	echo $response;
	
	mysql_close($server);
	
?>

Code (markup):

 

Looked over your code , but am to tired to download everything and fix it up.
Going to give you some advice though :
1.Replace your for in the php with :

$result = '';
if(mysql_num_rows($query) > 0)
{
$i=0;
while($row = mysql_fetch_array($query))
{
if($i > 0)
$result .= ',';

$result .= $row['cb_activities'];
$i++;
}
}

$activities = array("cb_activitiesterm" => $result);

PHP:

2.When you add the value to the hidden field do :

var val = $('#field').val();
$('#field').val(val+','+return_from_ajax);

HTML:

Hope that all helps.