Select one value from dropdown to display values in another dropdown value in php

Question

I have two dropdown one is category & other is product. I want to select value from category based on that i want to display value into product dropdown.

below is my code

<!-- <?php
//   include('session.php');
?> -->
<?php
mysql_connect('localhost', 'root', '');
mysql_select_db('product_management');

$sql = "SELECT * FROM category";
$result = mysql_query($sql);



$sql1 = "SELECT * FROM category.c INNER JOIN products.p where WHERE       category_id.p = '$id' ";
$result1 = mysql_query($sql1);
?>


<!DOCTYPE html>
<html>
<head>
<title>Product Page</title>

</head>
<body>

<div class="container-fluid">
<div class="row">
    <div class="col-md-12" style="margin-left: 30%;margin-top: 10%;">
        <form role="form">

            <div class="form-group">

                <label>
                    Category
                </label>
                <select name='category_type' id="category_type">
                <?php
while ($row = mysql_fetch_array($result)) {
echo "<option value='" . $row['category_id'] ."'>" . $row['category_type'] ."</option>";
}
?>
</select>
            </div>

            <div class="form-group">                     
                <label>
                    Products
                </label>
                 <select id="products" name="products" required>
                    <option value=""> -- SELECT -- </option>
                    <?php
while ($row = mysql_fetch_array($result1)) {
echo "<option value='" . $row['products'] ."'>" . $row['products'] ."</option>";
}
?>
                </select> 
            </div>

            <div class="form-group">                     
                <label>
                    Price
                </label>
                <input type="text" id="price" name="price" required> 
            </div>

            <div class="form-group">                     
                <label>
                    Quantity
                </label>
                 <select id="quantity" name="quantity" required>
                    <option value=""> -- SELECT -- </option>
                </select> 
            </div>


            <div class="form-group">

                <label for="exampleInputFile">
                    Upload Image
                </label>
                <input id="exampleInputFile" type="file" />                 
            </div>



            <button type="submit" class="btn btn-default">Submit</button>
        </form>
    </div>
</div>

How to achieve this? I want to Select one value from dropdown to display values in another dropdown value.

http://stackoverflow.com/questions/34961758/change-dropdown-value-when-another-dropdown-selected-in-a-form-using-jquery-aj — Vel, Dec 03 '16 at 10:34

score 2 · Accepted Answer · edited May 23 '17 at 11:45

You need to make few changes in your code, such as:

Change the category_type dropdown list in the following way,

<select name='category_type' id="category_type">
    <option value=""> -- SELECT -- </option>
<?php
    while ($row = mysql_fetch_array($result)) {
        echo "<option value='" . $row['category_id'] ."'>" . $row['category_type'] ."</option>";
    }
?>
</select>

and create an empty dropdown list for products like this:

<select id="products" name="products" required>
    <option value=""> -- SELECT -- </option>
</select>

Now use AJAX to populate the products dropdown list based on the selected category_type. Create a separate get_products.php page to process the AJAX request. You can use the following jQuery/AJAX code snippet to send the selected category_id to that page.

<script>
    $(document).ready(function(){
        $(document).on('change', '#category_type', function(){
            var category_id = $(this).val();
            if(category_id.length != 0){
                $.ajax({
                    type: 'POST',
                    url: 'get_products.php',
                    cache: 'false',
                    data: {category_id:category_id},
                    success: function(data){
                        $('#products').html(data);
                    },

                    error: function(jqXHR, textStatus, errorThrown){
                        // error
                    }
                });
            }else{
                $('#products').html('<option value=""> -- SELECT -- </option>');
            }
        });
    });
</script>

And on get_products.php page, process your AJAX request in the following way,

<?php

    if(isset($_POST['category_id'])){
        // your database connection code

        $id = $_POST['category_id'];
        $sql = "SELECT * FROM products WHERE category_id = '$id' ";
        $result = mysql_query($sql);
        while($row = mysql_fetch_array($result)){
            echo "<option value='" . $row['product_id'] ."'>" . $row['product_type'] ."</option>";
        }
    }

?>

Change $row['product_id'] and $row['product_type'] as per your table's attribute names.

Sidenote: Don't use mysql_ database extensions, they are deprecated as of PHP 5.5.0 and are removed altogether in PHP 7.0.0. Use mysqli or PDO driver instead. And this is why you shouldn't use mysql_* functions.

if(isset($_POST['category_id'])){ $con = mysqli_connect("localhost","root","","product_management"); if (mysqli_connect_errno()) { echo "Failed to connect to MySQL: " . mysqli_connect_error(); } — Kirataka, Dec 03 '16 at 10:56
I'm using this in my ajax page stil no error or result is coming — Kirataka, Dec 03 '16 at 10:56
@Kirataka Did you change `url: 'get_products.php',` setting according to your page? Also, display error message in your AJAX as well, like this: `error: function(jqXHR, textStatus, errorThrown){ alert(errorThrown); }` — Rajdeep Paul, Dec 03 '16 at 10:59
@Kirataka Did the *alert* message show anything? Also, paste your complete code on [pastebin.com](http://pastebin.com/index.php) and give me it's link here. — Rajdeep Paul, Dec 03 '16 at 11:03
@Kirataka It seems you didn't include jQuery library in your project. Include this line before the jQuery script, ` `. Also, I see the URL being used is *ajax.php* in your AJAX, make sure it's correct. — Rajdeep Paul, Dec 03 '16 at 11:17
@Kirataka I believe your *ajax.php* code is incorrect. You're sending `category_id` to your *ajax.php* page, not `category_type`. So your code should be like this, [http://pastebin.com/MqbqnnPR](http://pastebin.com/MqbqnnPR) — Rajdeep Paul, Dec 03 '16 at 11:26

Select one value from dropdown to display values in another dropdown value in php

1 Answers1