PHP/Javascript drop down list

[wreed]

I am having a issue with my javascript for a php drop down list, and one take a look and tell me what you think?

<script language="JavaScript">

// Benny Sparano [email][e-mail][/email]
// feel free to use this script as long as this text remains intact
// please link JavaScript World- Your Site for any and all JavaScript Info!
// [url]http://chelsea.ios.com/~benny3/javascript/[/url]
// Copyright 1997 JavaScript World


<!-- Hide the script from old browsers --

function surfto(form) {

    var myindex=form.dest.selectedIndex

    window.open(form.dest.options[myindex].value,"main","");

}

//-->

</SCRIPT>

<?php

// Connecting to host
$link = mysql_connect("$host","$login","$password");
if(!$link)
die(mysql_error());

// Selecting database
$select = mysql_select_db("$db");
if(!$select)
die(mysql_error());

// Getting the content of the table
$query = mysql_query("SELECT name, SUBSTRING(name FROM 3) AS ordering FROM `roster` ORDER BY ordering");
if(!$query)
die(mysql_error());

// Print a little form
print "<form name=\"myform\">\n";
print "<select name=\"value\">\n";

// Then we use a loop to create the menu
while($row = mysql_fetch_array($query))
{
print "<option name=\"$row[name]\" value=\"profile.php?name=$row[value]\">$row[name]</option>\n";
}

print "</select>\n";
print "<input type=\"BUTTON\" value=\"Go\" onClick=\"surfto(this.form)\">\n";
print "</form>\n";

// Closing connection
$close = mysql_close($link);

?>

I get this error

Error: 'dest.selectedIndex' is null or not an object
code: 0

[YappyDog]

Well, your html builds a form named "myform";

Your javascript is looking for a form named "dest";

[adamgeorge]

Hey

Your javascript error, means it wasn't able to find the element when you assigned it to 'dest' so when you access dest.selectedIndex it has to throw an error because dest is null.

Let's look at your javascript function:

function surfto(form) {

    var myindex=form.dest.selectedIndex

    window.open(form.dest.options[myindex].value,"main","");

}

Ok, so what's happening is we are assigning the selectedIndex property from a element in the form called 'dest'.

If you look at your code... you have no element named 'dest'. Silly 😉 That's why it is null.

// Print a little form
print "<form name=\"myform\">\n";
print "<select name=\"value\">\n";

// Then we use a loop to create the menu
while($row = mysql_fetch_array($query))
{
print "<option name=\"$row[name]\" value=\"profile.php?name=$row[value]\">$row[name]</option>\n";
}

first you need to rename the <select> tag from "value" to "dest". This is the element it is looking for.

Secondly, the <option> tag does not have or need a "name" attribute. Remove it. How select boxes work, is you give the select tag the name, and the option tags have the possible values.

That should work.

K, cya man
-Adam 🙂

[wreed]

Hey Adam thanks million, its so nice to see you explain it all to me....that was patch work javascript I was doing, patched from another page.

[wreed]

How hard would it be to make it work without a GO box to set it off

[adamgeorge]

Very easy. I was even going to suggest that before as an alternative lol.

When the user makes a selection in the select box, and onChange action is thrown. We can assign a function to be run when that event occurs using JavaScipt.

First we'll write our function:

function surfTo(sURL) {

window.open(sURL,"main","");

}

All it does is just open the URL that is passed in as sURL in a new window.

All we need to do then is just assign this function to the select box:

print "<select name=\"sPageURL\" onChange=\"surfTo(this.options[this.selectedIndex].value)\">\n";

// Then we use a loop to create the menu
while($row = mysql_fetch_array($query))
{
print "<option value=\"profile.php?name=$row[value]\">$row[name]</option>\n";
}

print "</select>\n";

So basically we assign the function to the event like this:

onChange="surfTo(this.options[this.selectedIndex].value"

'this' is a reference to that element.
options is an array referencing each of the <option> tags for that select box.
We use this.selectedIndex to get an index into the options array for the currently selected option. this.options[this.selectedIndex] will return a Option element. So you then need to use value property to get the actual value from the element. (the url)

So, that should work accross all browsers. Some people would just write this.selectedValue to get the selected value from the box. That will only work in IE, so you always need to be carefull when writing JavaScript code... make sure you test it on multiple browsers.

cya man
-Adam 🙂

[wreed]

worked like a champ. sweet.

Hah anyway to get you on IM? send me a email I would like to talk to you privately.....

Sent you a pm with my email