CODEWITHSUNDEEP
php
pradnya pathade
pradnya pathade

Reputation: 13

how to use two dropdown on single web page in php

I am doing the project in which I have to use the 2 drop-downs.

In the first drop-down, I am selecting the registered customer. After selecting the customer's name, the other customer information gets fetched from the database and filled into relevant text boxes.

In the second drop-down, I am selecting the item name just like in the first drop-down. But after selecting the second drop-down value, the details of customer get refreshed.

I want to retain customer and item information too.

Upvotes: 0

Views: 139

Answers (2)

Chigozie Orunta
Chigozie Orunta

Reputation: 438

Ok here's a sample of what you could do:

<!--myhtml.html (HTML File) put this file into your root folder-->
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/myjs.js" type="text/javascript"></script>
</head>
<body>
    <select id="myDropDown">
        <option id="1" value="Item 1">Item 1</option>
        <option id="2" value="Item 2">Item 2</option>
        <option id="3" value="Item 3">Item 3</option>
    </select>
    <div id="myResultSet">
        <table>
            <tbody>
                <tr>
                    <td id="id"></td>
                    <td id="column1"></td>
                    <td id="column2"></td>
                    <td id="column3"></td>
                    <td id="column4"></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

<!--myjs.js (jQuery Script) put this file into your "js" folder-->
$("#myDropDown").change(function() {
    var queryID = $(this).children("option:selected").attr("id");
    var request = $.ajax({
        url: "php/myphp.php", 
        type: "POST", 
        data: {id:queryID}, 
        dataType: "html"
    });
    request.done(function(msg) {
        var columns = eval("("+msg+")");
        $("td#id").html(column.id);
        //You can replace column1, column2, column3, column4 with the names of the columns on your database...
        $("td#column1").html(columns.column1);
        $("td#column2").html(columns.column2);
        $("td#column3").html(columns.column3);
        $("td#column4").html(columns.column4);
    });
});

<!--myphp.php (PHP Script) put this file into your "php" folder-->
<?php
    $id = $_POST['id'];
    $sql = "SELECT * FROM mytable WHERE id = $id";
    if($result = mysqli_query($sql)) {
        $row = mysqli_fetch_array($result, MYSQLI_ASSOC);
        $json_row = json_encode($row);
        echo $json_row;
    }
?>

Upvotes: 0

user7126103
user7126103

Reputation:

you can use ajax posting to fetch data from database instead of reloading the page. On changing 1st drop down, use jquery ajax to fetch data from database and populate it in 2nd dropdown.

So that you can select the values in both dropdowns without page refresh.

Upvotes: 1

Related Questions