How to make combobox value depends on other comboboxes

Question

I want a combobox which populates itself from other comboboxes, when a user selects an option from the comboboxes it will populate that combobox, which are on the same page, with information related to the selection in the comboboxes.

Below is the code I used to populate a combobox when I selected the select value from the dropdown comboboxes. but it doesnt work, the combobox still blank.

Cheers and thanks in advance :)

HTML

<form role="form" action="" method="post">
    <div class="col-md-3">
        <div class="form-group">
            <label>Brand Name</label>
            <select name="BRAND_CODE" id="BRAND_CODE" required="" class="form-control" onChange="getPRODUCT(this.value);">
                <option value="">Choose Brand</option>
                <option value="1">Brand A</option>
                <option value="2">Brand B</option>
            </select>
        </div>                       
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <label>Production Name</label>
            <select name="PRODUCT_CODE" id="PRODUCT_CODE" required="" class="form-control" onChange="getPRODUCT(this.value);">
                <option value="">Choose Production</option>
                <option value="1">Product 1</option>
                <option value="2">Product 2</option>
                <option value="3">Product 3</option>
            </select>
        </div>  
    </div>  
    <div class="col-md-3">
        <div class="form-group">
            <label>Buyer</label>
            <select name="BUYER_CODE" id="BUYER_CODE" required="" class="form-control">
                <option value="">Choose Buyer</option>
            </select>
        </div>  
    </div>  
</form>

AJAX

<script type="text/javascript">
    function getPRODUCT(val) {
      $.ajax({
      type: "POST",
      url: "check_buyer.php",
      data:['BRAND_CODE='+val,'PRODUCT_CODE='+val],
      success: function(data){
        $("#BUYER_CODE").html(data);
      }
      });
    }
</script>

check_buyer.php

<?php
    require_once("module/conn/conn.php");
    ?>
        <option value="">Choose Buyer</option>
    <?php
    if(!empty($_POST["PRODUCT_CODE"])) {
        $PRODUCT_CODE = $_POST["PRODUCT_CODE"];
        $BRAND_CODE = $_POST["BRAND_CODE"];
        $sql ="select BUYER_CODE,BUYER_NAME from m_buyer where PRODUCT_CODE = '$PRODUCT_CODE' and BRAND_CODE = '$BRAND_CODE'";
        $results = $conn->query($sql);
        while ($rowz = $results->fetch_assoc()) {
            ?>
                <option value="<?php echo $rowz["BUYER_CODE"]; ?>"><?php echo $rowz["BUYER_NAME"]; ?></option>
            <?php
        }
    }
?>

I would maybe try modifying the ajax with `data: { 'BRAND_CODE' : val, 'PRODUCT_CODE' : val }`. Also before the output in the success, I might add `console.log(data);` to see if anything comes back in the console log. — Rasclatt, Nov 06 '17 at 03:42
This might be helpful, https://stackoverflow.com/questions/47083702/filter-dropdown-based-on-other-dropdown-selection/47088878#47088878 — Casper, Nov 06 '17 at 03:45
Also, make sure to prepare / bind your query in the PHP, you are vulnerable to sql injection. — Rasclatt, Nov 06 '17 at 03:46

AngYC · Answer 1 · 2017-11-06T06:43:50.310

0

Your BRAND_CODE and PRODUCT_CODE should refer to different value, try changing the function into

function getPRODUCT(val) {
    $.ajax({
        type: "POST",
        url: "check_buyer.php",
        data: { 'BRAND_CODE': $("#BRAND_CODE").val(), 'PRODUCT_CODE': $("#PRODUCT_CODE").val() },
        success: function(data) {
            $("#BUYER_CODE").html(data);
        }
    });
}

edited Nov 06 '17 at 06:43

answered Nov 06 '17 at 03:52

AngYC

3,051
6
20

still get the blank result.. ill take a look about ajax onchange references – Caps Lock Nov 06 '17 at 06:27
Code updated to use object instead of query string, can try again and see if it works – AngYC Nov 06 '17 at 06:44
still the same result like before. I've tried using 1 combo box condition to get the value for ajax and it works.. but now I'm trying to use 2 combo box as conditions and get blank result :( – Caps Lock Nov 06 '17 at 07:10

How to make combobox value depends on other comboboxes

1 Answers1