Drop down - showing more information from mySQL

wispas · January 6, 2010

I currently have a drop down that displays a list of hotel names and upon selection it will show the name in the div container... but i want it to show me more that just the hotel name like the hotel description as well.

i want the drop down to only show the hotel name, but when selected for it to show the hotel name and hotel description.

Can someone help me with this please.

wispas · January 6, 2010

<?php

// Connect database

include("includes/connectdb.php");

$sql="SELECT hotel_id, hotel_name, hotel_location, hotel_desc FROM hotel ORDER BY hotel_name ASC";

$result=mysql_query($sql);

$options="";

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

$id=$row["hotel_id"];

$hotel_name=$row["hotel_name"];

$hotel_location=$row["hotel_location"];

$hotel_desc=$row["hotel_desc"];

$options.="<OPTION VALUE=\"$id\">".$hotel_name." (".$hotel_location.")";

}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

function disp_text()

{

var w = document.myform.mylist.selectedIndex;

var selected_text = document.myform.mylist.options[w].text;

document.getElementById('someDivName').innerHTML = selected_text;

//alert(selected_text);

}

</script>

<title>PHP Dynamic Drop Down Menu</title>

</head>

<body>

<OPTION VALUE=0>Choose

<?=$options.="<OPTION VALUE=\"$id\">".$hotel_name.'</option>';?>

</SELECT>

</form>

</body>

</html>

kickstart · January 6, 2010

Hi

Bit crude (could be done better using an attempt at an associative array in javascript), not tested and with a couple of obvious issues eg, what happens when a description contains an inverted comma), but hopefully this will give you the idea:-

<?php
// Connect database
include("includes/connectdb.php");

$sql="SELECT hotel_id, hotel_name, hotel_location, hotel_desc FROM hotel ORDER BY hotel_name ASC";
$result=mysql_query($sql);

$options="";

$id_array = array();
$hotel_name = array();
$hotel_location = array();
$hotel_desc = array();

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

    $id_array[]=$row["hotel_id"];
    $hotel_name[]=$row["hotel_name"];
    $hotel_location[]=$row["hotel_location"];
    $hotel_desc[]=$row["hotel_desc"];
    $options.="<option VALUE='".$row["hotel_id"]."'>".$row["hotel_location"]."</option>";
}

?>

<!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" />

<script language="javascript">

<?php

echo "var hotel_id = new Array('".implode('\',\'',$id_array)."');";
echo "var hotel_name = new Array('".implode('\',\'',$hotel_name)."');";
echo "var hotel_location = new Array('".implode('\',\'',$hotel_location)."');";
echo "var hotel_desc = new Array('".implode('\',\'',$hotel_desc)."');";

?>
function disp_text()
{
for (var i=0; i<hotel_id.length; i++) 
{
	if (document.getElementById('mylist').options[document.getElementById('mylist').selectedIndex].value == hotel_id(i))
	{
		document.getElementById('someDivName').innerHTML = hotel_desc(i);
	}
}
}
</script>

<title>PHP Dynamic Drop Down Menu</title>
</head>

<body>

<form id="myform" name="myform" method="post" action="selected.php">

<SELECT NAME="mylist" id="mylist" onChange="disp_text()">
<OPTION VALUE=0>Choose
<?php echo = $options;?>
</SELECT>
</form>
<div id='someDivName'></div>
</body>
</html>

All the best

Keith

wispas · January 6, 2010

Hi Kickstart,

Really appreciate the help.

Im not sure where to begin editing this. It comes up as blank when i test it.

kickstart · January 6, 2010

Hi

Do a view source and check that the arrays are properly populated.

Entirely possible that one of your description has an inverted comma in and thus your browser has treated the rest of the page as being part of a javascript string.

All the best

Keith

wispas · January 7, 2010

I am following another tutorial now and it is changing very well depending on what i am selecting... i want to use my database data instead... can you show me how i can do this please?

<?php

// Connect database

include("includes/connectdb.php");

$sql="SELECT hotel_id, hotel_name, hotel_desc FROM hotel ORDER BY hotel_name ASC";

$result=mysql_query($sql);

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

</head>

<body>

<option selected value="http://www.javascriptkit.com">JavaScript Kit </option>

<option value="http://freewarejava.com">Freewarejava.com</option>

<option value="http://wired.com" target="newwin">Wired News</option>

<option value="http://www.codingforums.com" target="newwin">Coding Forums</option>

</select>

</span>

</form>

/***********************************************

* Drop down menu w/ description- © Dynamic Drive (www.dynamicdrive.com)

* This notice must stay intact for use

* Visit http://www.dynamicdrive.com/ for full source code

***********************************************/

//1) CUSTOMIZE TEXT DESCRIPTIONS FOR LINKS ABOVE

var thetext1=new Array()

thetext1[0]="Comprehensive JavaScript tutorials and over 400+ free scripts"

thetext1[1]="Direct link to hundreds of free Java applets online!"

thetext1[2]="Up to date news on the technology front"

thetext1[3]="News.com- The #1 technology News site."

thetext1[4]="Web Coding and development forums"

/// You may define additional text arrays if you have multiple drop downs:

var thetext2=new Array()

thetext2[0]="CNN- US and World News."

thetext2[1]="MSNBC- NBC News online."

thetext2[2]="BBC News- Updated every minute of every day."

thetext2[3]="TheRegister- Daily IT news."

// Now, see 2) below for final customization step

function displaydesc(which, descriptionarray, container){

if (document.getElementById)

document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]

}

function jumptolink(what){

var selectedopt=what.options[what.selectedIndex]

if (document.getElementById && selectedopt.getAttribute("target")=="newwin")

window.open(selectedopt.value)

else

window.location=selectedopt.value

}

//2) Call function displaydesc() for each drop down menu you have on the page

// This function displays the initial description for the selected menu item

// displaydesc(name of select menu, name of corresponding text array, ID of SPAN container tag):

// Important: Remove the calls not in use (ie: 2nd line below if there's only 1 menu on your page)

displaydesc(document.form1.select1, thetext1, 'textcontainer1')

</script>

</body>

</html>

kickstart · January 7, 2010

Hi

That is the same concept as the code I gave you earlier. You should be able to take the code I posted earlier to get the method to put the database data into the Javascript arrays.

All the best

Keith

wispas · January 7, 2010

Hi Keith,

Im a bit lost at the moment working in the code.

Can you help me out with it... heres what i have so far:

<?php

// Connect database

include("includes/connectdb.php");

$sql="SELECT hotel_id, hotel_name, hotel_location, hotel_desc FROM hotel ORDER BY hotel_name ASC";

$result=mysql_query($sql);

$options="";

$id_array = array();

$hotel_name = array();

$hotel_location = array();

$hotel_desc = array();

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

$id_array[]=$row["hotel_id"];

$hotel_name[]=$row["hotel_name"];

$hotel_location[]=$row["hotel_location"];

$hotel_desc[]=$row["hotel_desc"];

$options.="<option VALUE='".$row["hotel_id"]."'>".$row["hotel_location"]."</option>";

}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

</head>

<body>

<option selected value="http://www.javascriptkit.com">JavaScript Kit </option>

<option value="http://freewarejava.com">Freewarejava.com</option>

<option value="http://wired.com" target="newwin">Wired News</option>

<option value="http://www.codingforums.com" target="newwin">Coding Forums</option>

</select>

</span>

</form>

var thetext1=new Array()

thetext1[0]="Comprehensive JavaScript tutorials and over 400+ free scripts"

thetext1[1]="Direct link to hundreds of free Java applets online!"

thetext1[2]="Up to date news on the technology front"

thetext1[3]="News.com- The #1 technology News site."

thetext1[4]="Web Coding and development forums"

// Now, see 2) below for final customization step

function displaydesc(which, descriptionarray, container){

if (document.getElementById)

document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]

}

function jumptolink(what){

var selectedopt=what.options[what.selectedIndex]

if (document.getElementById && selectedopt.getAttribute("target")=="newwin")

window.open(selectedopt.value)

else

window.location=selectedopt.value

}

displaydesc(document.form1.select1, thetext1, 'textcontainer1')

</script>

</body>

</html>

kickstart · January 7, 2010

Hi

It is pretty similar to what I originally posted. Difference is that it is using the selected index to get the description to display, whereas I had looped through an array of names to get a match and then used the index of that array as the index of the array of descriptions to get the description to display.

<?php
// Connect database
include("includes/connectdb.php");

$sql="SELECT hotel_id, hotel_name, hotel_location, hotel_desc FROM hotel ORDER BY hotel_name ASC";
$result=mysql_query($sql);

$options="";

$id_array = array();
$hotel_name = array();
$hotel_location = array();
$hotel_desc = array();

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

    $id_array[]=$row["hotel_id"];
    $hotel_name[]=$row["hotel_name"];
    $hotel_location[]=$row["hotel_location"];
    $hotel_desc[]=$row["hotel_desc"];
    $options.="<option VALUE='".$row["hotel_id"]."'>".$row["hotel_location"]."</option>";
}

?>

<!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>
</head>

<body>

<!--Example drop down menu 1-->

<form name="form1">
<select name="select1" size="1" style="background-color:#FFFFD7" onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')">
<?php echo $options; ?>
</select>

<span id="textcontainer1" align="left" style="font:italic 13px Arial">
</span>

</form>

<script type="text/javascript">

echo "var thetext1 = new Array('".implode('\',\'',$hotel_desc)."');";

// Now, see 2) below for final customization step

function displaydesc(which, descriptionarray, container)
{
if (document.getElementById)
	document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]
}

</script>

</body>
</html>

All the best

Keith

wispas · January 7, 2010

Hi Keith.

Thanks for the help. Much appreciated.

It seems to now load all of the hotel names in the drop down but does not seem to show the description beside it.

kickstart · January 7, 2010

Hi

Do you get any errors?

If they are javascript errors then they will be displayed in the error console in the browser (in Firefox, Tools - Error Console).

If nothing obvious then can you post the generated code (ie, do a view source and then copy / paste that).

All the best

Keith

wispas · January 7, 2010

Hi Keith,

I have opened the error console and am getting the following error:

"thetext1 is not defined"

I have also copied and pasted the code:

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

</head>

<body>



<form name="form1">

<select name="select1" size="1" style="background-color:#FFFFD7" onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')">

<option VALUE='1'>Abu Dhabi</option><option VALUE='42'>Copenhagen</option><option VALUE='63'>Krakow</option><option VALUE='10'>Atlanta</option><option VALUE='29'>Brussels</option><option VALUE='16'>Bangkok</option><option VALUE='145'>Valencia</option><option VALUE='21'>Barcelona</option><option VALUE='2'>Abu Dhabi</option><option VALUE='72'>Las Vegas</option><option VALUE='82'>Madrid</option><option VALUE='6'>Amsterdam</option><option VALUE='95'>Minneapolis</option><option VALUE='103'>New York</option><option VALUE='51'>Dublin</option><option VALUE='35'>Budapest</option><option VALUE='80'>Luxembourg</option><option VALUE='126'>Reykjavik</option><option VALUE='19'>Barcelona</option><option VALUE='39'>Cape Town</option><option VALUE='110'>New York</option><option VALUE='49'>Dublin</option><option VALUE='143'>Valencia</option><option VALUE='54'>Hong Kong</option><option VALUE='134'>Rome</option><option VALUE='66'>Las Vegas</option><option VALUE='56'>Hong Kong</option><option VALUE='96'>Minneapolis</option><option VALUE='41'>Cape Town</option><option VALUE='60'>Hong Kong</option><option VALUE='18'>Bangkok</option><option VALUE='65'>Krakow</option><option VALUE='86'>Malta</option><option VALUE='57'>Hong Kong</option><option VALUE='87'>Malta</option><option VALUE='43'>Copenhagen</option><option VALUE='104'>New York</option><option VALUE='97'>Minneapolis</option><option VALUE='25'>Boston</option><option VALUE='92'>Marrakech</option><option VALUE='125'>Prague</option><option VALUE='67'>Las Vegas</option><option VALUE='123'>Prague</option><option VALUE='14'>Bangkok</option><option VALUE='135'>Rome</option><option VALUE='22'>Barcelona</option><option VALUE='3'>Abu Dhabi</option><option VALUE='17'>Bangkok</option><option VALUE='15'>Bangkok</option><option VALUE='52'>Dublin</option><option VALUE='98'>Minneapolis</option><option VALUE='36'>Budapest</option><option VALUE='100'>Minneapolis</option><option VALUE='47'>Dubai</option><option VALUE='11'>Atlanta</option><option VALUE='4'>Abu Dhabi</option><option VALUE='111'>New York</option><option VALUE='26'>Boston</option><option VALUE='121'>Prague</option><option VALUE='124'>Prague</option><option VALUE='61'>Krakow</option><option VALUE='122'>Prague</option><option VALUE='20'>Barcelona</option><option VALUE='34'>Budapest</option><option VALUE='33'>Budapest</option><option VALUE='144'>Valencia</option><option VALUE='31'>Brussels</option><option VALUE='141'>Tallinn</option><option VALUE='139'>Tallinn</option><option VALUE='118'>Paris</option><option VALUE='148'>Warsaw</option><option VALUE='116'>Paris</option><option VALUE='105'>New York</option><option VALUE='119'>Paris</option><option VALUE='62'>Krakow</option><option VALUE='83'>Madrid</option><option VALUE='30'>Brussels</option><option VALUE='84'>Madrid</option><option VALUE='102'>Minneapolis</option><option VALUE='13'>Atlanta</option><option VALUE='93'>Marrakech</option><option VALUE='68'>Las Vegas</option><option VALUE='44'>Dubai</option><option VALUE='8'>Amsterdam</option><option VALUE='48'>Dubai</option><option VALUE='127'>Reykjavik</option><option VALUE='37'>Cape Town</option><option VALUE='113'>New York</option><option VALUE='149'>Warsaw</option><option VALUE='137'>Stockholm</option><option VALUE='117'>Paris</option><option VALUE='69'>Las Vegas</option><option VALUE='101'>Minneapolis</option><option VALUE='45'>Dubai</option><option VALUE='24'>Boston</option><option VALUE='106'>New York</option><option VALUE='112'>New York</option><option VALUE='70'>Las Vegas</option><option VALUE='114'>New York</option><option VALUE='55'>Hong Kong</option><option VALUE='138'>Stockholm</option><option VALUE='129'>Reykjavik</option><option VALUE='27'>Boston</option><option VALUE='23'>Barcelona</option><option VALUE='131'>Rio De Janeiro</option><option VALUE='132'>Rome</option><option VALUE='77'>Lisbon</option><option VALUE='50'>Dublin</option><option VALUE='107'>New York</option><option VALUE='64'>Krakow</option><option VALUE='99'>Minneapolis</option><option VALUE='81'>Madrid</option><option VALUE='7'>Amsterdam</option><option VALUE='32'>Brussels</option><option VALUE='130'>Reykjavik</option><option VALUE='85'>Madrid</option><option VALUE='120'>Paris</option><option VALUE='46'>Dubai</option><option VALUE='108'>New York</option><option VALUE='94'>Marrakech</option><option VALUE='90'>Marrakech</option><option VALUE='78'>Lisbon</option><option VALUE='75'>Lisbon</option><option VALUE='76'>Lisbon</option><option VALUE='142'>Tallinn</option><option VALUE='109'>New York</option><option VALUE='12'>Atlanta</option><option VALUE='28'>Boston</option><option VALUE='79'>Lisbon</option><option VALUE='5'>Abu Dhabi</option><option VALUE='147'>Valencia</option><option VALUE='146'>Valencia</option><option VALUE='136'>Rome</option><option VALUE='40'>Cape Town</option><option VALUE='88'>Malta</option><option VALUE='91'>Marrakech</option><option VALUE='133'>Rome</option><option VALUE='9'>Amsterdam</option><option VALUE='128'>Reykjavik</option><option VALUE='71'>Las Vegas</option><option VALUE='38'>Cape Town</option><option VALUE='140'>Tallinn</option><option VALUE='73'>Las Vegas</option><option VALUE='115'>New York</option><option VALUE='53'>Dublin</option><option VALUE='89'>Malta</option><option VALUE='74'>Las Vegas</option></select>

<span id="textcontainer1" align="left" style="font:italic 13px Arial"></span>

</form>

<script type="text/javascript">

// Now, see 2) below for final customization step

function displaydesc(which, descriptionarray, container)

{

if (document.getElementById)

document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]

}

displaydesc(document.form1.select1, thetext1, 'textcontainer1')

</script>

</body>

</html>

kickstart · January 7, 2010

Hi

Ah, see what I have done

Change

<script type="text/javascript">

echo "var thetext1 = new Array('".implode('\',\'',$hotel_desc)."');";

// Now, see 2) below for final customization step

to

<script type="text/javascript">

<?php echo "var thetext1 = new Array('".implode('\',\'',$hotel_desc)."');"; ?>

// Now, see 2) below for final customization step

By the way, to quote code use the code tags (the button with the # on it just under the font).

All the best

Keith

wispas · January 8, 2010

Hi Keith,

Script works really well. Thank you so so much...

One last thing... if i was to add another field like 'hotel_location' to:

<?php echo "var thetext1 = new Array('".implode('\',\'',$hotel_desc)."');"; ?>

how would that work?

kickstart · January 8, 2010

Hi

Think the location array is set up in PHP in your script already, so just have another line for another javasrcipt array:-

<?php echo "var thetext2 = new Array('".implode('\',\'',$hotel_location)."');"; ?>

Put in the 2nd container (whereever you want it on screen):-

<span id="textcontainer2" align="left" style="font:italic 13px Arial"></span>

Modify the onChange event on the select:-

onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1');displaydesc(document.form1.select1, thetext2, 'textcontainer2')"

If you want the location in the same place as the description, but I am assuming you want to keep them seperate.

All the best

Keith

wispas · January 8, 2010

Thanks so much Keith for helping me out.

Some of my database fields will not load such as the 'hotel_desc'. I am getting the following error when i check the error console:

Error: missing ) after argument list

Line: 25, Column: 48

Source Code:

ue New York, NY 10016','Cavendish Row,, Upper O'Connell Street Dublin 1, Co. Dublin, Ireland','Calle Barcelonina 5 46002 Valencia, Spain','263 Hollywood Road','Via Vittorio Bachelet, 4 00185 Roma (Lazio), Italy','2880 Las Vegas Blvd S Las Vegas, NV 89109,

is there something i can put in there to allow the ' to be used. Thanks!

kickstart · January 8, 2010

Hi

It is the ' in Upper O'Connell street that is causing the problem.

When you read the database use str_replace to change ' to \'

All the best

Keith

Sign In

Drop down - showing more information from mySQL

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information