asked on

Passing multi select box values to php using Ajax script

I have a multi select box called services[]. I want to save the values that are in that box to a database using ajax to pass the selected values to the php script. I have tried this code

var services_array = document.getElementById('services[]').value;
services = "";
for (counter=0; counter<services_array.length; counter++) {
services = services + services_array[counter] + ",";
}
alert (services)

but it only returns 1 value, even if you select more than one option.

If i can pass the values in an array to the php script, adding that to the database is easy.

Thanks in advance

hielo

get rid of ".value":
var services_array = document.getElementById('services[]');

revo1059

ASKER

When I do that, I get this (see attached file)
error.JPG

hielo

try:

var services_array = document.getElementById('services[]').options;
var services = "";
for (var counter=0; counter < services_array.length; counter++) {
      services = '&services[' +counter+ ']=' + encodeURIComponent(services_array[counter]);
}
services = services.substring(1);

Open in new window

hielo

Sorry, this:
services = '&services[' ...

should be:
services += '&services[' ...

revo1059

ASKER

Another error message
error2.jpg

revo1059

ASKER

I made a test page instead of using the real page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
 
function display_services() {
var services_array = document.getElementById('services[]').options;
var services = "";
for (var counter=0; counter < services_array.length; counter++) {
      services = '&services[' +counter+ ']=' + encodeURIComponent(services_array[counter]);
}
services = services.substring(1);
alert (services)
}
</script>
 
</head>
 
<body>
<form id="form1" name="form1" method="post" action="">
	<label>
	<select name="services[]" size="5" multiple="multiple" id="services[]">
		<option value="1">test</option>
		<option value="2">test2</option>
		<option value="3">test3</option>
		<option value="4">test4</option>
		<option value="5">test5</option>
		<option value="6">test6</option>
					</select>
	</label>
	<label>
	<input name="button" type="button" id="button" onclick="display_services()" value="Button" />
	</label>
</form>
</body>
</html>

Open in new window

hielo

encodeURIComponent(services_array[counter].value);

revo1059

ASKER

I changed it to that, and got services[5]=6 in the pop up message

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

revo1059

ASKER

Perfect, that worked. I looked at my php code, and it's a little different than I thought. I use this script

$service = $_POST['services'];
foreach ($service as $service_id) {

//insert all the programs chosen and then redirect

$insertSQL = sprintf("INSERT INTO services (order_id, service_id) VALUES (%s, %s)",
GetSQLValueString($order_id, "int"),
                                    GetSQLValueString($service_id, "int"));


mysql_select_db($database_reseller, $reseller);
$Result1 = mysql_query($insertSQL, $reseller) or die(mysql_error());

How would I store the php values when they are passed like this

services[0]=2&services[2]=4

If you want me to ask another question that would be fine

hielo

>>How would I store the php values when they are passed like this
PHP should see it as an array. So I would expect:
$service = $_POST['services'];
foreach ($service as $service_id) {...}

to work (Unless you are submitting a get instead of $_POST).

>>If you want me to ask another question that would be fine
If the problem persists, yes.

revo1059

ASKER

Very nice, even went as far as to answer a slightly off topic question related to original question

hielo

glad to help.