CodingForums.com - Showing results from select box

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)

- - Showing results from select box (http://www.codingforums.com/showthread.php?t=146556)

Showing results from select box

My website is in PHP but I think that this would be a Javascript thing. Correct me if I am wrong.

I have a select box like this,

Code:

echo "<select name='ptype' style='background-color:#CDBA96;'>";

   echo "<option value=\"1\">Product 1</option>";

   echo "<option value=\"2\">Product 2</option>";

   echo "<option value=\"3\">Product 3</option>";</select>

I want it where under the box is blank (already is) but when they drop down the menu and select something, it runs a query and produces the results. I didn't want to use a submit button, just change when they select the field in the box. Would Javascript be used for this?

I figured <form action="blah.php?do=products" method="post"> would work, but then it'd be going to a whole new page. What can I do? Thanks.

mmmmmkay... there are a couple ways to tackle this. ajax is probably what you want, because it'll update w\o needing a refresh. i don't claim to have the best way, but here is what you could do:

get the framework of your choice, for the sake of the example i'll say prototype

http://www.prototypejs.org/

for this example you'll want to use the ajax updater that is built into prototype

http://www.prototypejs.org/api/ajax/updater

it uses the following syntax:

new Ajax.Updater(container, url[, options])

the container is what will be updated, the url is your processor page. whatever it echo's first will be dropped into the container. under options you can set post, get, the actual paramters to be sent etc etc

http://www.prototypejs.org/api/ajax/options

below your select box you would have a target div or other container for updating. then you add an onChange event to your select statement.

PHP Code:


		
			
echo "<select name='ptype' onChange=\"new Ajax.Updater('results','procpage.php',{options go here});\" style='background-color:#CDBA96;'>";

   echo "<option value=\"1\">Product 1</option>";

   echo "<option value=\"2\">Product 2</option>";

   echo "<option value=\"3\">Product 3</option>";

   echo "</select>"



   echo "<div id=\"results\">Once you select something I will be replaced</div>

if you're going to do a bunch of these i'd advise making on master updater function for the new Ajax.Updater bit and just pass along the specifics in var form.

i'd suggest really reading the options page. there is an absolute ton you can do, making this a very very powerful tool. the more i read the more i find. check out the entire api if you have time. it's pretty cool.

yell if i can be of further service, i have examples of usage and whatnot.

Wow you lost me on the Ajax thing, that is highly complex.

Will this code automaticly change the query results without a submit button?

well basically what ajax is going to do is submit a post or get string as if you were submitting a form, and sit and listen for the results.

the prototype library takes care of all the logistics for you, really.

here is an example of a function i have in one of my pages:

Code:

function updater(itemid,form){

                        

                        var itemupd = itemid;

                        

                        new Ajax.Updater( itemid, 'func.php', 

                            { method: 'post', parameters: $(form).serialize()

                                } );

                        }

so your onChange statement would call the updater function like:

Code:

<select name='ptype' onChange=\"updater('results','formname');\" style='background-color:#CDBA96;'>

and what prototype will do is take the entire form you specify and submit it as a post string.

then on your processor php page you would treat it like any other form being submitted. the difference is that it's running in the background. your main page is sitting there listening and waiting for something to come back.

so on that processor page you could have a query:

PHP Code:


		
			


$conn = all your connection stuff here



if(ISSET($_POST['ptype'])){$itemid = strip_tags($_POST['ptype']);}



switch($itemid){

case 1:

$itemname = "whatever1";

break;

case 2:

$itemname = "whatever2";

break;

}



$query = 'SELECT `details_to_be_displayed` FROM `my_table` WHERE `my_item` = "'. mysql_real_escape_string($itemname) .'"'



$qresult = mysql_query($query, $conn);

while($result=mysql_fetch_array($qresult)){$details = $result['details_to_be_displayed'];}



echo $details;

and whatever is echo'd in details would be output in that target div. instead of using a switch based on the number of your choice you could straight up use the field name from your db as the id in the option, but it gives away a bit of your middleware logic.

now, i say all this assuming you're using stuff from a database.

there are other ways. if you want to have it all in your page you would just as easily hide\show div's or replace contents without ajax based on the id #. having the onChange call a function that checks the id and sets the innerHTML of the target div is easier, it just means you have to have the results hardcoded in the page instead of the db. if you want examples of that i can help there too.

Now it's making a little more sense, I see some php in there, so that helps learn.

hey! this is exactly my problem.
could you please take a look and help me???
i'm stuck with it!!!
http://www.codingforums.com/showthre...612#post897612
thanks in advance!!