0





35

Advertisement

1

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.

Question author Kirataka | Source

Advertisement


0


1

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.

Answer author Rajdeep-paul