How to auto populate second select box on base of first select box and auto populate textbox on base of second select box

Question

product_listing.php FORM part

<?php 
$arr_cat_bn = [category01, category02];
$arr_subcat_ln_for_cbo_default = [subcategory01, subcategory02]; // For category01
$arr_subcat_ln_for_cbo_default = [subcategory11, subcategory12]; // For category02

$str_cat_bn_default = $arr_cat_bn[0];
if(isset($_POST["cbo_cat_bn"]))
{
    $str_cat_bn_default = trim($_POST["cbo_cat_bn"]);
}

$str_subcat_ln_form = $arr_subcat_ln_for_cbo_default[0];
if(isset($_POST["cbo_subcat_ln"]))
{
        $str_subcat_ln_form = trim($_POST["cbo_subcat_ln"]);
}
?>

<form role="form" name="frm_add" method="POST" action="product_listing.php">

    <select name="cbo_cat_bn" id="cbo_cat_bn" onChange="get_subcat_ln(this.value);">
        <?php 
        foreach($arr_cat_bn as $cat_bn) { 
            if($str_cat_bn_default == $cat_bn) { $str_selected="selected"; } else { $str_selected = ""; } ?>
            <option value="<?php echo $cat_bn; ?>" <?php print($str_selected);?>><?php echo $cat_bn; ?></option>
    </select>   
                
    <div id="before_get_subcat_ln">
        <select name="cbo_subcat_ln" id="cbo_subcat_ln"  onChange="get_qty(this.value);">
            <?php 
            sort($arr_subcat_ln_for_cbo_default);
            foreach($arr_subcat_ln_for_cbo_default as $subcat_ln) { 
            if(trim($str_subcat_ln_form) == trim($subcat_ln))  { $str_selected_ln = "selected"; } else { $str_selected_ln = ""; } 
            ?>
            <option value="<?php echo $subcat_ln; ?>" <?php print($str_selected_ln);?>><?php echo $subcat_ln; ?></option>
        </select>
    </div>
    <div id="after_get_subcat_ln"></div>    
                        
    <div id="before_get_qty">
        <input type="text" id="txt_qty" name="txt_qty" value="<?php print($int_qty); ?>">
    </div>
    <div id="after_get_qty"></div>    
               
    <button type="submit" >SUBMIT</button>                              
                        
</form>

product_listing.php jQuery part

<script>
function get_subcat_ln(catbn) {
var str_catbn = catbn;

    var dataString = "cat_bn_all="+str_catbn;
    $.ajax({
        type: "POST",
        url: "../user/get_subcategory_p.php?",
        data: dataString,
        success: function(html)
        {
            $("#before_get_subcat_ln").hide();
            $("#after_get_subcat_ln").html(html);
        }
    });
}

function get_qty(subcatln) {
var str_subcatln = subcatln;

    var dataString = "cat_bn_all_and_subcat_ln="+str_subcatln;
    $.ajax({
        type: "POST",
        url: "../user/get_qty_p.php?", 
        data: dataString,
        success: function(html)
        {
            $("#before_get_qty").hide();
            $("#after_get_qty").html(html);
        }
    });
}
</script>

get_subcategory_p.php (auto populates sub category select box on base of category select box)

On this page, POST data processed and result data are stored in Array arr_subcat_ln and returned back to PHP page like this.

echo "<select name='cbo_subcat_ln' id='cbo_subcat_ln'>";
sort($arr_subcat_ln);
foreach($arr_subcat_ln as $subcat_ln) { 
    echo "<option value='" . $subcat_ln . "'>" . $subcat_ln . "</option>";
} 
echo "</select>";

get_qty_p.php (auto populates qty text box on base of sub category select box)

On this page, POST data processed and result data are stored in variable str_PackageSize and returned back to PHP page like this.

echo "<input type='text' id='txt_qty' name='txt_qty'  value='".$str_PackageSize."'>";

• first select box = category select box
• second select box = sub category select box

When page loads, first value of category array displays in first select box by default. And based on default category in first select box, correct sub category values populates in second select box where first value of sub category array displays first by default. After that correct qty displays in qty text box based on default sub category in second select box. If I change sub category from second select box, it gives correct qty value for that selected sub category.

Now, problem is that when I change value in first select box, it gives correct sub category values in second select box but doesn't make any change in qty text box on basis of default sub category value in second select box. Now further if I change sub category value in second select box, still it doesn't change value of qty text box on basis of selected sub category value.

So qty is displayed correctly for default selected category and default selected sub category when page loads. It gives correct qty if I don't change category and only change sub category. Once I change category, I get correct sub category values for this selected category. But then I don't get correct qty for any sub category.

So please let me know that what wrong I am doing in my code or what is missing?

Answer 1

As the subcategory select-box is created dynamically you need to call get_qty(subcatln) under success function of ajax and pass the default value of subcategory which is available in html . Now, to pass default value you can use two ways .They are as follows :

First way : You can pass that html string in selector i.e : $() and then use find(":first-child").val() which will give you first option of select-box and then you can pass same to your get_qty(subcatln) function.

Demo Code :

var html = '<select name="cbo_subcat_ln" id="cbo_subcat_ln"><option value="first">first</option><option value="second">second</option><option value="third">third</option></select>'
 var subcatln = $(html).find(":first-child").val();
 console.log("First default value : "+subcatln);
 //call function
 //get_qty(subcatln)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Second way : You can check if the div after_get_subcat_ln has any select inside it or not and depending on this you can get value of select and pass the same to your get_qty(subcatln) .

Demo Code :

var html = '<select name="cbo_subcat_ln" id="cbo_subcat_ln"><option value="first">first</option><option value="second">second</option><option value="third">third</option></select>'

$("#after_get_subcat_ln").html(html);
//check if the div have `cbo_subcat_ln` 
if ($("#after_get_subcat_ln").find("select#cbo_subcat_ln").length > 0) {
  //get that value
  var subcatln = $("select#cbo_subcat_ln :first-child").val()
  console.log("Second way : " + subcatln)
  //call function
  //get_qty(subcatln);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="after_get_subcat_ln"></div>

You need to put above code in ajax success of get_subcat_ln(catbn) function .i.e :

function get_subcat_ln(catbn) {
  ...
    $.ajax({
        type: "POST",
        url: "../user/get_subcategory_p.php?",
        data: dataString,
        success: function(html)
        {
            $("#before_get_subcat_ln").hide();
            $("#after_get_subcat_ln").html(html);
          //here you need to get value of either way
          //call get_qty(subcatln) to update qty input
        }
    });
}

Answer 2

This is actually a JS issue. You forgot to add the onChange in your php-script. So whenever your <select> gets replaced the onChange is missing.

$('#btn').on('click', function() {
  $('#select').html('<select><option>A</option><option>B</option>');
});

$('#btn2').on('click', function() {
  $('#select').html('<select onChange=\'alert("yay" + this.value);\'><option>A</option><option>B</option>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="select">
  <select>
    <option>1</option>
    <option>2</option>
  </select>
</div>
<hr />
<button id="btn">Load list without onChange</button><br />
<button id="btn2">Load list with onChange</button>

You may want to read this too: MCVE