How to change the 2nd textbox value based on the 2nd dropdown that is automatically changed from 1st dropdown?

Question

I have 2 dropdowns where when I change the 1st one, the value of the 2nd is changed accordingly. There are also 2 textboxes, 1 for each of these 2 dropdowns.

When the 1st dropdown is changed, I run an AJAX and display a value from mySQL into the 1st textbox. And as I said, the value of the 2nd dropdown is changed too.

My question is how can I change the 2nd textbox value based on the 2nd dropdown that is automatically changed from 1st dropdown?

This is what I call when I change the 1st dropdown

    function getVariety(seed_name) {        


    var strURL="findVariety.php?seed_name="+seed_name;
    var req = getXMLHTTP();

    if (req) {

        req.onreadystatechange = function() {
            if (req.readyState == 4) {
                // only if "OK"
                if (req.status == 200) {                        
                    document.getElementById('seed_variety_show').innerHTML=req.responseText;            

                } else {
                    alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                }
            }               
        }           
        req.open("GET", strURL, true);
        req.send(null);
    }       
}

findVariety.php

----mysql config variables------
.
.
<select  class="form-control c-square c-theme input-lg" name="seed_variety">
<option value="">Επίλεξε</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value="<?=$row['sv_variety_name']?>"><?=$row['sv_variety_name']?></option>
<? } ?>
</select>

Answer 1

Use value property instead of innerHTML . innerHTML is used to push the html content to the element whereas to set the value of the form elements like input / select , use value

document.getElementById('seed_variety_show').value=req.responseText;

To change the value of second textbox, use onchange listener on second select .

As the select is being added dynamically, you need to use event delegation for that.

Try this:

$('body').on('change', '[name="seed_variety"]', function() {
  alert(this.value);
});