[SOLVED] Basic dropdown alert?

[kernelgpf]

At this point, I'm just trying to show an alert of which dropdown item is selected each time it's selected. It.. doesn't work. Firebug doesn't show any errors. Prototype.js is included in the header.php.

 

<?php
$pagename="My Pod Page";
include "header.php";
?>
<script language="javascript" type="text/javascript">

function item(){
var itemID = document.form1.lifedropdown.options;
var chosen_itemID = itemID[itemID.selectedIndex].value;

alert(chosen_itemID);

new Ajax.Request("item_action_process.php", 
				{ 
				method: 'post', 
				postBody: 'itemID='+$F(chosen_itemID),
				onComplete: showResponse 
				});
			}

		function showResponse(req){
			$('show').innerHTML= req.responseText;
		}
</script>
<div id="show"></div>
<?php

$query=mysql_query("select middlename,age,gender,height,weight,shoesize,mother,father,strength,ethnicity,eyecolor,haircolor,location,marriedtopod,intelligence from pods where podID='$podID' LIMIT 1");
$row=mysql_fetch_array($query);





$itemquery=mysql_query("select items.name,items.itemID,items_main.display from items,items_main where items.name=items_main.name and items.podID='$podID' and items_main.category='life'");
if(mysql_num_rows($itemquery) != "0"){
print "Life: <form id=form1 method=post name=form1 action=pod.php?><select id=lifedropdown name=lifedropdown onchange=item()>";

while($itemrow=mysql_fetch_array($itemquery)){
print "<option value=$itemrow[itemID]>$itemrow[display]</option>";
}

print "</select></form>";
}
?>

[KevinM1]

A few things:

 

First, HTML attribute values should be placed in quotes.  Right now, none are.

 

Second, it doesn't look like you're actually grabbing a hold of that select input.  I'm not familiar with the Prototype framework, but using regular vanilla JavaScript, I'd try something like (ignoring your PHP in the example):

 

<script type="text/javascript">
   window.onload = function()
   {
      var items = document.forms["form1"].elements["lifedropdown"];

      items.onchange = function() //could also use onclick
      {
         var itemID = this[this.selectedIndex].value;
         alert(itemID);
      }

      /* the rest of your script */
   }
</script>

<!-- your form -->

Life:
<form id="form1" name="form1" method="post" action="pod.php">
   <select id="lifedropdown" name="lifedropdown">
      <!-- your options -->
   </select>
</form>

 

Note that I removed the function call from the select's code.  That's just my coding style.  I like keeping my script out of my markup.

 

In any event, something along those lines should work.

[RichardRotterdam]

I'm unsure why you would want to cram the option elements with id. Wouldn't it be more relevant which value is selected rather then which option element?

 

Using prototype your probably better of using a unobtrusive notation like Nightslyr showed in vanilla js

 

this is how I would do it in prototype

<script src="prototype.js"></script>
<script>
//domready
document.observe("dom:loaded", function() {

//get the select element by id
var dropdown=$("lifedropdown");

//add event to the dropdown when changing
dropdown.observe('change',function(){
	console.log(this.value);
});
});

</script>

<select id="lifedropdown">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>