CODEWITHSUNDEEP
phpjquerymysqlselect
Patrick R
Patrick R

Reputation: 1979

Get DB content into dropdown and show DB info from selected dropdown

My problem is that i have 2 dropdowns that get its content from my DB, a simple SELECT * with the category and then select a item from that category.

First dropdown : "dropdown_type" is the category.

Second dropdown : "dropdown_abo" is the item.

At the second dropdown, i am using a JQuery pluging that makes it possible to search inside the dropdown, to get the item faster then scrolling (theres gonna be a lot of items in it). You can see the plugin here

When you select a item from the second dropdown, a div(abo_info) below shall show all the info of the selected item.

My problem is that I'm stuck, and don't know how to proceed. How can i make it so, when i select a category, and then an item i get the content from that item shown in the div below?

I'm using PHP, JQuery and Mysql_*(to DB connect, know about PDO but im not that good at it).

Can i please get some help here, or some examples on how it can be done?

I have made a JSfiddle so you can see the complete code

Upvotes: 2

Views: 69

Answers (2)

Lupin
Lupin

Reputation: 1244

as @WisdmLabs mentioned, you are on the right track...

The steps to continue shouls be:

  1. Add a JS event once both dropboxes were selected (using onchange() or a submit button)

  2. The event will fire an AJAX request for a PHP file with the POST data of the item you want to get the data for.

  3. On the PHP file you will run your SQL query and send back the information needed- preferable as in json.

  4. On the JS AJAX function you will get the Json object and inserted neede info into the page DOM

JS Code

$(".dropboxClass").change(function(){ // you can use a button instead or any other event type
    // here you can first check that bothdropboxes were selected 

    // now get the values of the dropboxes
    drop1 = $("#dropbox1").val();
    drop2 = $("#dropbox2").val();

    // run the AJAX request for the PHP file
    var request = $.ajax({
                    url: 'test2.php',
                    dataType: "json" ,
                    method: "POST",
            data: { d1: drop1, d2:drop2 } 
                });

        request.done(function(itemData){
            // here you will get the Json object , get the data you need and insert into the DOM
            console.log('Status:' + itemData['status']);
            console.log('Name:' + itemData['name']);

            alert('success');
        });

        request.fail(function(){
            // AJAX call failed - do something.....
        });
});

PHP Script

// connect to your DB and get the data you need into an array 

$DB_data = array(
    "status"=>"code",
    "name"=>"item Name",
    "desc"=>"Item Description"
);

echo json_encode($DB_data);

Upvotes: 1

Domain
Domain

Reputation: 11808

You seem to be headed the correct way and doing a good job of it.

Please proceed further by using the following steps as a guideline,

  1. Using jQuery.ajax() or jQuery.post() you can basically send a request to a PHP file.
  2. In the PHP file you can connect to your DB using either PDO or normal mySQL connectors and return your required data back to the AJAX call.
  3. The returned data can be rendered and displayed as required at the HTML sections.

Please use these following references that can give you a better idea code wise:

  1. Beginner’s Guide to Ajax Development with PHP
  2. jQuery Ajax POST example with PHP

Upvotes: 1

Related Questions