Solved

Passing multi select box values to php using Ajax script

Posted on 2008-10-08
13
1,483 Views
Last Modified: 2012-05-05
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
0
Comment
Question by:revo1059
  • 7
  • 6
13 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 22669364
get rid of ".value":
var services_array = document.getElementById('services[]');
0
 
LVL 1

Author Comment

by:revo1059
ID: 22669401
When I do that, I get this (see attached file)
error.JPG
0
 
LVL 82

Expert Comment

by:hielo
ID: 22669421
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

0
Is Your AD Toolbox Looking More Like a Toybox?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

 
LVL 82

Expert Comment

by:hielo
ID: 22669435
Sorry, this:
services = '&services[' ...

should be:
services += '&services[' ...
0
 
LVL 1

Author Comment

by:revo1059
ID: 22669448
Another error message
error2.jpg
0
 
LVL 1

Author Comment

by:revo1059
ID: 22669455
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

0
 
LVL 82

Expert Comment

by:hielo
ID: 22669583
encodeURIComponent(services_array[counter].value);
0
 
LVL 1

Author Comment

by:revo1059
ID: 22669604
I changed it to that, and got services[5]=6 in the pop up message
0
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
ID: 22669609

<!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 = "";
var total=0;
for (var counter=0; counter < services_array.length; counter++) {
     if( services_array[counter].selected)
	{
      services += '&services[' +total+ ']=' + encodeURIComponent(services_array[counter].value);
	 ++total;
	 }
}
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

0
 
LVL 1

Author Comment

by:revo1059
ID: 22669700
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
0
 
LVL 82

Expert Comment

by:hielo
ID: 22669805
>>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.
0
 
LVL 1

Author Closing Comment

by:revo1059
ID: 31504243
Very nice, even went as far as to answer a slightly off topic question related to original question
0
 
LVL 82

Expert Comment

by:hielo
ID: 22670030
glad to help.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question