how to get result with 3 dropdown multiple selectbox via AJAX and a DB

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 402,657 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,205 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 1408 | Replies: 3

•

Join Date: May 2008

Posts: 2

Reputation: angela1978 is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

angela1978 angela1978 is offline

Offline

Newbie Poster

how to get result with 3 dropdown multiple selectbox via AJAX and a DB

May 4th, 2008

Hi all,

I would like to get some help with something i would like to see working. It's hard to explain but i'll give it my best shot.

I want to retrieve the result from a DB by selecting multiple selections in 2 or 3 or even more select boxes.

To illustrate i made it visual:

[IMG]http://www.basvaneijk.nl/images/Q_daniweb.gif[/IMG]

http://www.basvaneijk.nl/images/Q_daniweb.gif

For example if i select

Mona Lisa, M. Angelo, Rembrandt and france i would like to see the pictures of all in the db except for dunno.jpg

I have tried it with the example on w3schools with AJAX and database. But it's not even wothy posting it here. I have searched for such a script over the internet, but nothing comes near.

So I hope this Forum can help me out on this one. I would be very thankfull.

Last edited by angela1978 : May 4th, 2008 at 6:15 am.

•

Join Date: Aug 2006

Location: Noida, India

Posts: 157

Reputation: Luckychap is an unknown quantity at this point

Rep Power: 3

Solved Threads: 16

Luckychap

Offline

Junior Poster

Re: how to get result with 3 dropdown multiple selectbox via AJAX and a DB

May 5th, 2008

When you want to send an Ajax request? On each selection or after all the selection.

What exactly you want to know? Give us little more details so that we can help u.

Last edited by Luckychap : May 5th, 2008 at 12:59 am.

•

Join Date: May 2008

Posts: 2

Reputation: angela1978 is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

angela1978 angela1978 is offline

Offline

Newbie Poster

Re: how to get result with 3 dropdown multiple selectbox via AJAX and a DB

May 5th, 2008

Hi thanks for willing to help me. I have 3 scripts. And i manage to get result from just 1 selection. I think what i need is a javascript that remembers all the selection.

I want to send with each change i make with the selection.

These are my scripts.

testdb.php

Help with Code Tags

(Toggle Plain Text)

<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<script src="selectResult.js"></script>
</head>
<body>

<form> 
<table>
  <tr>
    <th>box1</th>
    <th>box2</th>
    <th>box3</th>
  </tr>
  <tr>
    <td>
      <select name="box1" onchange="showResult(this.value)" multiple size="4">
      <option value="1">value1</option>
      <option value="2">value2</option>
      <option value="3">value3</option>
      <option value="4">value4</option>
      <option value="5">value5</option>
      </select>
    </td>
    <td>
      <select name="box2" onchange="showResult(this.value)" multiple size="4">
      <option value="1">value1</option>
      <option value="2">value2</option>
      <option value="3">value3</option>
      <option value="4">value4</option>
      </select>
    </td>
    <td>
      <select name="box3" onchange="showResult(this.value)" multiple size="4">
      <option value="1">value1</option>
      <option value="2">value2</option>
      <option value="3">value3</option>
      <option value="4">value4</option>
      </select>
    </td>
  </tr>
  
</table>

</form>

<p>
<div id="txtHint"><b>Photos will be showed here.</b></div>
</p>
</body>
</html>

selectResult.js

Help with Code Tags

(Toggle Plain Text)

// JavaScript Document
var xmlHttp
function showResult(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
var url="getphoto.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

and the last is for the DB

Help with Code Tags

(Toggle Plain Text)

<?php
$q=$_GET["q"];

$con = mysql_connect('localhost', '****', '****');
if (!$con)
 {
 die('Could not connect: ' . mysql_error());
 }

mysql_select_db("designconsumer", $con);

$sql="
      SELECT photo FROM db         
      WHERE result = '".$q."'    
      limit 0, 50
";

$result = mysql_query($sql);

while($row = mysql_fetch_array($result))
 {

 echo "<img src=\"". $row['photo'] ."\" width=\"80\" style=\"padding: 20px; border: 0px solid #000;\">";

 }

mysql_close($con);
?>

Last edited by angela1978 : May 5th, 2008 at 4:17 am.

•

Join Date: Oct 2007

Location: South Africa

Posts: 60

Reputation: RoryGren is an unknown quantity at this point

Rep Power: 1

Solved Threads: 7

RoryGren

Offline

Junior Poster in Training

Re: how to get result with 3 dropdown multiple selectbox via AJAX and a DB

May 5th, 2008

As your code currently stands, showResult(this.value) is only going to use the value of the clicked select box. Each time you click one of the selects, it will only send its value to the javascrit function and ignore the rest. I assume you want the values from all three to be taken into account every time one of them is clicked.

You will need the values passed to your showResult function to include the values from all three - probably use onClick="getElementById('selectboxid').value for all three and concatenate them in some way that your getphoto.php page will be able to interpret.