Display data after selected item

Question

First Id like to thank everyone for such positive response on my previous question.

Now I got another question I need help with.

I have a dropdown menu with a list of items. The list is generated inside while loop. Here is the code:

$query = "SELECT Key, Short FROM product WHERE Active = 1 OR Short LIKE 'Blue%'";
$run = mysql_query($query) or die(mysql_error());

echo 'Product: <br />';
?>

<select id="select2" name="select2">
<?php
$ids = 0;
echo "<option selected='selected'>-Select product-</option>";
while($rows = mysql_fetch_assoc($run)) {
    echo "<option value=$ids>".$rows['Short']."</option>";
    $ids++;
}
?>
</select><br /><br />

Now what I need to do is create another dropdown menu below this one and show contracts depending on which option they selected from dropdown menu. Each item they select also have a number called Key. Now inside another table called contracts I have stored all contracts with the same value Key. So...in the second dropdown menu I have to show the contracts based on the key they selected with the item in the first dropdown menu.

I really hope it is clear enough to understand, I am a little confused.

Update: Ok, here is new code:

index.php

$("select#select2").change(function(){
    $.ajax({
        type: "GET",
        url: "process.php",
        data: "selected_key=" + $(this).val(),
        success: function(result) {
            $("select#text2").html(result);
        }
    });
});

</script>

<select id="text2" name="text2">

</select>

And here is my process.php

<?php ## URL_TO_GET_CONTRACTS_FOR_KEY ##
$selectedKey = $_GET['selected_key'];
$query = "SELECT * FROM contacts WHERE Key = '".$selectedKey."'";
$run = mysql_query($query);
while($row = mysql_fetch_assoc($run)) {
    echo "<option value='..'>..</option>";
    } ?>

But I cant see anything displayed in my text2 dropdown menu.

**Heads up!** The next major release of PHP is *deprecating* the `mysql_` family of functions. Now would be a great time to [switch to PDO](http://php.net/book.pdo) or [mysqli](http://php.net/book.mysqli). — Charles, Dec 20 '12 at 08:42

ennovativemedia · Accepted Answer · 2012-12-20T08:50:49.590

2

Think you best use option value $rows['Key'] in first dropdown menu and add an jQuery selector that takes the selected value and gets te corresponding contracts for that key.

Should be something like this..

PHP CODE

$query = "SELECT Key, Short FROM product WHERE Active = 1 OR Short LIKE 'Blue%'";
$run = mysql_query($query) or die(mysql_error());
echo 'Product: <br />'; ?>
<select id="select2" name="select2">
<?php
echo "<option selected='selected'>-Select product-</option>";
while($rows = mysql_fetch_assoc($run)) {
    echo "<option value='".$rows['Key']."'>".$rows['Short']."</option>";
}
?>
</select>

jQUERY CODE

$("select#select2").change(function(){
    $.ajax({
        type: "GET",
        url: "URL_TO_GET_CONTRACTS_FOR_KEY",
        data: "selected_key=" + $(this).val(),
        success: function(result) {
            $("select#NEWSELECT").html(result);
        }
    });
});

Explanation: URL_TO_GET_CONTRACTS_FOR_KEY is an url to a PHP file you have to write. In that file you have access to $_GET['selected_key'], use that value to get the contracts for that key. In that file you should echo the "" tags for the second select. Like this:

<?php ## URL_TO_GET_CONTRACTS_FOR_KEY ##
$selectedKey = $_GET['selected_key'];
$query = ..
$run = ..
while($row = mysql_fetch_assoc($run)) {
    echo "<option value='..'>..</option>";
} ?>

NEWSELECT should be replaced by the id of the select where the returned options should be placed in.

edited Dec 20 '12 at 08:50

answered Dec 20 '12 at 08:36

ennovativemedia

361
1
7

Hey, which URL do I put under the url? And how do I then put the selected one inside another dropdown menu? – Smiley Dec 20 '12 at 08:41
edited the post above: added an explanation section. This should help you – ennovativemedia Dec 20 '12 at 08:51
Ok, thanks for help :) So what all I need to put in file (url)? – Smiley Dec 20 '12 at 08:54
The ajax file should contain the code in explanation section in the post above. In the file you will retrieve all contracts for given $selectedKey and echo that data in – ennovativemedia Dec 20 '12 at 08:59
Ok, but which query do I need to run? I cant think right now, too much confusion. – Smiley Dec 20 '12 at 09:02
1

In your question you said: "So...in the second dropdown menu I have to show the contracts based on the key they selected with the item in the first dropdown menu." That's what you got to do in the ajax file. "SELECT * FROM contracts WHERE Key = '".$selectedKey."'" (I don't know how your tables are formed) – ennovativemedia Dec 20 '12 at 09:07
Hey, Ive updated my first post, could you please take a look? – Smiley Dec 20 '12 at 09:13
You don't just have to copy my code, you should alter the query to work on your database. I don't know how your database looks like. – ennovativemedia Dec 20 '12 at 09:19
Ok, changed something, but now inside dropdown menu it display options as '..', how can I change that? – Smiley Dec 20 '12 at 09:25
The .. in while loop in ajax script should be changed by php variables you want to show in dropdown – ennovativemedia Dec 20 '12 at 09:32

score 1 · Answer 2 · edited May 23 '17 at 11:56

1

php is server side you can not do this with only php for that you need ajax (if you want to so without refresh page)

just make ajax call on select drop down and show another

Note

The entire ext/mysql PHP extension, which provides all functions named with the prefix mysql_, is officially deprecated as of PHP v5.5.0 and will be removed in the future. So use either PDO or MySQLi

Good read

The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead

edited May 23 '17 at 11:56

Community

1
1

answered Dec 20 '12 at 08:33

NullPoiиteя

56,591
22
125
143

he can do it with refresh the page – echo_Me Dec 20 '12 at 08:33
Never used ajax, is it possible to do it with jquery, and could you help a little more please? – Smiley Dec 20 '12 at 08:34

score 0 · Answer 3 · answered Dec 20 '12 at 08:42

There are ways to do this but they will be cumbersome and annoying compared to AJAX. (what I mean by ways is get all required data first but this is a bad idea).

Why AJAX

AJAX can send and receive data from other pages while not reloading your whole page. The PHP you've written above will output only HTML to the browser. So to run more PHP you need to store additional code in a file and run that.

How to use it

A simple way would be with jQuery. This will go with your jQuery on client side

$("select#select2").change(function(){
$.ajax({
    type: "POST",
    url: "url_to_contacts",
    data: "reqd_key=" + $(this).val(),
    success: function(result) {
        $("select#select3").html(result);
      }
   });
});

There will be the seperate PHP file mentioned above. Variable can be picked up using $_POST This will contain the query and its will output HTML. This output HTML will be put as the new selects HTML by the line $("select#select3").html(result);

Suggestion do some research on AJAX before trying this and understand how to dynamically edit pages

What url do I need to provide? All data is taken from database. — Smiley, Dec 20 '12 at 08:48

Display data after selected item

3 Answers3