Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Passing multi select box values to php using Ajax script

Posted on 2008-10-08
13
Medium Priority
?
1,493 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
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 
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 2000 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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

721 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