how to populate text field when a drop down list item from another field is selected?

Today, We want to share with you populate textbox based on dropdown selection javascript.In this post we will show you change textbox value based on dropdown value selected javascript, hear for how to populate text field when a drop down list item from another field is selected? we will give you demo and example for implement.In this post, we will learn about jquery autocomplete multiple fields using jquery ajax php and mysql with an example.

How to auto populate textbox value from database based on selecting related value from dropdown list?

HTML code

<div>        <br />
        Email:
        <br>
        <input type="text" id="customer_email_address" />
    </div>
    <div>
        <br>
        Counties:
        <br>
        <select id="somemembers" onChange="return updateSetEmailAddress()">
            <option data-livemember="0" value="Select One">Select One</option>
            <option data-livemember="1" value="Kinjal Dave">Kinjal Dave</option>
            <option data-livemember="1" value="Krishna">Krishna</option>
            <option data-livemember="1" value="Rajdhanivora">Rajdhanivora</option>
            <option data-livemember="1" value="Kavita">Kavita</option>
            <option data-livemember="1" value="4cgandhi">4cgandhi</option>
            <option data-livemember="1" value="Bolly4u">Bolly4u</option>
            <option data-livemember="1" value="Tamilrokers">Tamilrokers</option>
            <option data-livemember="1" value="jbox">jbox</option>
            <option data-livemember="1" value="Sarasota">Sarasota</option>
            <option data-livemember="2" value="Bhakti">Bhakti</option>
            <option data-livemember="2" value="Broward">Broward</option>
            <option data-livemember="2" value="JDK Kinkg">JDK Kinkg</option>
            <option data-livemember="2" value="Hitesh">Hitesh</option>
            <option data-livemember="2" value="DSP-patel">DSP-patel</option>
            <option data-livemember="2" value="Mayur">Mayur</option>
            <option data-livemember="2" value="Sejal Ramanai">Sejal Ramanai</option>
            <option data-livemember="2" value="Virat Kohali">Virat Kohali</option>
        </select>
    </div>

jQuery Code

function updateSetEmailAddress(){
    var ddl = document.getElementById("somemembers");
    var selectedOption = ddl.options[ddl.selectedIndex];
    var liveMemberData = selectedOption.getAttribute("data-livemember");
    var textBox = document.getElementById("customer_email_address");
    if(liveMemberData=="1"){
    	textBox.value = "[email protected]_email_address.com";
    }
    else if(liveMemberData=="2"){
    	textBox.value = "[email protected]_email_address.com";
    }   
}

Example

index.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function updateSetEmailAddress(){
    var ddl = document.getElementById("somemembers");
    var selectedOption = ddl.options[ddl.selectedIndex];
    var liveMemberData = selectedOption.getAttribute("data-livemember");
    var textBox = document.getElementById("customer_email_address");
    if(liveMemberData=="1"){
    	textBox.value = "[email protected]_email_address.com";
    }
    else if(liveMemberData=="2"){
    	textBox.value = "[email protected]_email_address.com";
    }   
}
</script>
</head>
<body>
<div>        <br />
        Email:
        <br>
        <input type="text" id="customer_email_address" />
    </div>
    <div>
        <br>
        Counties:
        <br>
        <select id="somemembers" onChange="return updateSetEmailAddress()">
            <option data-livemember="0" value="Select One">Select One</option>
            <option data-livemember="1" value="Kinjal Dave">Kinjal Dave</option>
            <option data-livemember="1" value="Krishna">Krishna</option>
            <option data-livemember="1" value="Rajdhanivora">Rajdhanivora</option>
            <option data-livemember="1" value="Kavita">Kavita</option>
            <option data-livemember="1" value="4cgandhi">4cgandhi</option>
            <option data-livemember="1" value="Bolly4u">Bolly4u</option>
            <option data-livemember="1" value="Tamilrokers">Tamilrokers</option>
            <option data-livemember="1" value="jbox">jbox</option>
            <option data-livemember="1" value="Sarasota">Sarasota</option>
            <option data-livemember="2" value="Bhakti">Bhakti</option>
            <option data-livemember="2" value="Broward">Broward</option>
            <option data-livemember="2" value="JDK Kinkg">JDK Kinkg</option>
            <option data-livemember="2" value="Hitesh">Hitesh</option>
            <option data-livemember="2" value="DSP-patel">DSP-patel</option>
            <option data-livemember="2" value="Mayur">Mayur</option>
            <option data-livemember="2" value="Sejal Ramanai">Sejal Ramanai</option>
            <option data-livemember="2" value="Virat Kohali">Virat Kohali</option>
        </select>
    </div>
</body>
</html>

I hope you get an idea about auto populate textbox based on a dropdown value.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, donโ€™t forget to share.