Pass PHP Combo Item To Function

[Solvo]

Newbie Alert!

I have populated a PHP combo box with data from a MySQL database. I now need to pass the selected combo item to a function so I can tell an API to play the selected track.

Basically when I wrote this in HTML I passed the variable "Value" to the function. Now this just doesn't seem to be the case :(

Here is the bit of code I am using.

######FUNCTION
<script type="text/javascript">
function displaymessage(messagetext) {

alert(messagetext)
javascript:niftyplayer('niftyPlayer1').loadAndPlay(messagetext)

}
</script>

######END OF FUNCTION

######PHP BIT
<?php

$con = mysql_connect("localhost","myusername","mypassword") or die('Could not connect: ' . mysql_error());

mysql_select_db('solvote1_jukebox',$con) or die('Could not select database');

$query = 'SELECT * FROM jukeboxdb';
$result = mysql_query($query) or die('Query failed: ' . mysql_error());

echo '<select name="MyJukeBox" onchange=displaymessage(value)>';

while ($row = mysql_fetch_array($result)) {
echo '<option value="',$row['FileName'],'">',$row['Title'],'</option>';
}
echo '</select>';

mysql_close($con);

?>
######END OF PHP BIT

I must be missing something simple. Should I be passing something other then "Value"?

Kind Regards,
Solvo.

[rocknbil]

Welcome abouard Solvo.

This is really more of a Javascript problem (I think.) If you check your error console, you will probably see "value is not defined" as a Javascript error. To pass literal values to a function, you need to quote them.

What I'm not seeing is how the actual clip is being passed. Looking at your original and your PHP, I'm guessing "messagetext" represents the track file name, and the function "displaymessage" initiates the player instance, is this correct?

If so, what you want is to get at the option value of the select list, which is a member in the array of select options. You can see by my confusion you might want to change the function name too, as it's not displaying a message, it's initiating the player.

So first, addressing the select list: You could do this as one big loooooong one-liner in the select list, but it might be more clear to add a second Javascript function to extract the selected value from the select list. So a slight change, pass a reference to the select list object using the this keyword. Second, what if the first item is selected (which it will be)? You have to select another, then the first, to get at the first - so a good practice is to set the first item as ''.

echo '<select name="MyJukeBox" id="MyJukeBox" onchange="switchClip(this)"><option value="">Select Clip</option>';

the corresponding Javascript:

function switchClip (selectObject) { 
 var filename=''; 
 // selectedIndex is the index of the selected item. 
 // This is also why it helps to have the first one blank 
 if (selectObject.selectedIndex==0) { 
 alert('Please select an audio clip.'); 
 return; 
 } 
 // No need for an "else" - if it errors above, 
 // it doesn't get to this 
 filename = selectObject.options[selectObject.selectedIndex].value; 
 // filename should contain the selected filename 
 // uncomment alert to verify 
 // alert(filename); 
 playClip(filename); 
} 
// Now, your function should work as before, 
// Ive just renamed it for clarity. Or, just move these 
// lines into the function above. 
function playClip(file) { 
 if (file != '') { 
 niftyplayer('niftyPlayer1').loadAndPlay(file); 
 } 
 // should never happen; if nothing is selected it 
 // should be captured in the above function. 
 else { alert('No file selected!'); } 
}  

Warning, may contain errors, I typed it out on the fly, but this should work if I get the problem . . .

Optionally, if niftyPlayer (which I don't know of) accepts the title, you could pass both the filename and the title.

function switchClip (selectObject) { 
 var filename=''; 
 var title=''; 
 if (selectObject.selectedIndex==0) { 
 alert('Please select an audio clip.'); 
 return; 
 } 
 filename = selectObject.options[selectObject.selectedIndex].value; 
 title = selectObject.options[selectObject.selectedIndex].text; 
 // alert('filename ' + filename+ ' title ' + title); 
 playClip(filename,title); 
} 
// now accept two parameters . .  
function playClip(file,clipTitle) { 
 if (file != '') { 
 // If title has not been set, assign "Untitled" to it 
 clipTitle=(clipTitle!='')?clipTitle:'Untitled'; 
 niftyplayer('niftyPlayer1').loadAndPlay(file,clipTitle); 
 } 
 else { alert('No file selected!'); } 
}  

[Solvo]

That looks great. I'm actually a .NET programmer and this is all new to me seems essential when making a good site.

Can I assume then that:

onchange="switchClip(this)": "this" is actually a class containing information regarding the selected item from the combo box.

and

function switchClip (selectObject): SelectObject is now a variable that holds the passed "this" class information. Information such as index and value etc

Is SelectObject a reserved namespace or is it just a suitable variable name and could have been anything such as "PassedFileName" etc?

I know your not hear to teach me so I appreciate your time.

[rocknbil]

onchange="switchClip(this)": "this" is actually a class containing information regarding the selected item from the combo box.

In Javascript (and other languages) "this" refers to the current object:

<form action="" onSubmit="return checkform(this);"> refers to the current form
<a href="test.html" onClick="return newWindow(this);"> refers to the current anchor
<checkbox name="tst" id="tst" value="1" checked onClick="toggleCheckboxes(this)"> refers to this checkbox

Whatever the object is, you are passing a reference to it to your function, so you don't need to specify it by name or document ID. As a test, do this:

function switchClip (selectObject) {  
 alert(selectObject.name + ' ' + selectObject.type); 
} 

and your alert should give you "MyJukeBox select-one" because name is a valid attribute of that object, and it is an object of select-one type.

function switchClip (selectObject): SelectObject is now a variable that holds the passed "this" class information.

Correct, but I don't think it would be a class, it's an object (could be wrong, technically it might be a class . . . but it's referred to as an object.)

Is SelectObject a reserved namespace or is it just a suitable variable name and could have been anything such as "PassedFileName" etc?

Anything you want, however selectedIndex is a reserved word, it's an attribute of the select-one object. Of course, like all languages, selectObject and SelectObject are two different things . . .

[Solvo]

Well RocknBill that's some great information I really appreciate this.

I was lucky on two parts. One you showed me how to pass the correct information and two (This is so embarrassing) I actually Used the wrong MySQL reference instead of 'FileName' I should have been passing 'File Name'. I was actually passing nothing.... WAH :S

But no, it is working now thank you plus I have taken another step forward into this intriguing language.

Thank You.