Solved

Passing multi select box values to php using Ajax script

Posted on 2008-10-08
13
1,484 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

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…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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…

756 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