Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts

    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.
    Last edited by masterofollies; 08-13-2008 at 02:07 PM. Reason: .

  • #2
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    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.
    Last edited by ohgod; 08-13-2008 at 03:22 PM.

  • #3
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    Wow you lost me on the Ajax thing, that is highly complex.

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

  • #4
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    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.

  • #5
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    Now it's making a little more sense, I see some php in there, so that helps learn.

  • #6
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •