LearningJS888 LearningJS888 - 6 months ago 97
HTML Question

Populate textbox based on Dropdown selection - JavaScript

I have a little question as I'm very new to JavaScript. I've made a dropdown containing various counties, and based on which county is selected, I want a specific email-address to populate a text field. I'm working with the following HTML form:

<div
<br>
Email:
<br>
<input type="text" id="email" readonly=>
</div>
<div>
<br>
Counties:
<br>
<select id="counties">
<option value="Choose One">Choose One</option>
<option value="Charlotte">Charlotte</option>
<option value="Collier">Collier</option>
<option value="Hillsborough">Hillsborough</option>
<option value="Lee">Lee</option>
<option value="Manatee">Manatee</option>
<option value="Pasco">Pasco</option>
<option value="Pinellas">Pinellas</option>
<option value="Polk">Polk</option>
<option value="Sarasota">Sarasota</option>
<option value="Brevard">Brevard</option>
<option value="Broward">Broward</option>
<option value="Indian River">Indian River</option>
<option value="Martin">Martin</option>
<option value="Miami-Dade">Miami-Dade</option>
<option value="Monroe">Monroe</option>
<option value="Palm Beach">Palm Beach</option>
<option value="St Lucie">St Lucie</option>
</select>
</div>


For the first 9 counties; I'd like them to go to "first@email.com

And for the remaining 8 counties; I'd like them to go to "second@email.com

I'm looking for some insight in how to add a value to the counties, and based on that value (Choose One = 0, first nine counties = 1, remaining eight = 2) I'd like to populate the text field with id="email" with the respective email.
How could I go about setting this up in JavaScript? Thanks in advance.

Answer

You can do it with custom attribute. See this fiddle: https://jsfiddle.net/y2t0utk7/

Html

<div>        
    Email:
    <br>
    <input type="text" id="email" />
</div>
<div>
    <br>
    Counties:
    <br>
    <select id="counties" onChange="return setMail()">
        <option data-mail="0" value="Choose One">Choose One</option>
        <option data-mail="1" value="Charlotte">Charlotte</option>
        <option data-mail="1" value="Collier">Collier</option>
        <option data-mail="1" value="Hillsborough">Hillsborough</option>
        <option data-mail="1" value="Lee">Lee</option>
        <option data-mail="1" value="Manatee">Manatee</option>
        <option data-mail="1" value="Pasco">Pasco</option>
        <option data-mail="1" value="Pinellas">Pinellas</option>
        <option data-mail="1" value="Polk">Polk</option>
        <option data-mail="1" value="Sarasota">Sarasota</option>
        <option data-mail="2" value="Brevard">Brevard</option>
        <option data-mail="2" value="Broward">Broward</option>
        <option data-mail="2" value="Indian River">Indian River</option>
        <option data-mail="2" value="Martin">Martin</option>
        <option data-mail="2" value="Miami-Dade">Miami-Dade</option>
        <option data-mail="2" value="Monroe">Monroe</option>
        <option data-mail="2" value="Palm Beach">Palm Beach</option>
        <option data-mail="2" value="St Lucie">St Lucie</option>
    </select>
</div>

JS

function setMail(){
    var ddl = document.getElementById("counties");
    var selectedOption = ddl.options[ddl.selectedIndex];
    var mailValue = selectedOption.getAttribute("data-mail");
    var textBox = document.getElementById("email");
    if(mailValue=="1"){
        textBox.value = "first@email.com";
    }
    else if(mailValue=="2"){
        textBox.value = "second@email.com";
    }   
}