Solved

Passing multi select box values to php using Ajax script

Posted on 2008-10-08
13
1,481 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
 
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

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 …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

707 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now