Populate textbox based on Dropdown selection - JavaScript

Question

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 "[email protected]

And for the remaining 8 counties; I'd like them to go to "[email protected]

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.

Do you have any JS you can show us? One thing that comes to mind is to use the email addresses as the value for each <option>. — johnniebenson
– johnniebenson, Commented May 19, 2016 at 15:23
I don't have any JS yet, I've been searching around for a good way of doing this, but haven't found anything yet. — swedishcheef
– swedishcheef, Commented May 19, 2016 at 15:26

mshsayem · Accepted Answer · 2016-05-19 15:47:48Z

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(){
    // find the dropdown
    var ddl = document.getElementById("counties");
    // find the selected option
    var selectedOption = ddl.options[ddl.selectedIndex];
    // find the attribute value
    var mailValue = selectedOption.getAttribute("data-mail");
    // find the textbox
    var textBox = document.getElementById("email");

    // set the textbox value
    if(mailValue=="1"){
        textBox.value = "[email protected]";
    }
    else if(mailValue=="2"){
        textBox.value = "[email protected]";
    }   
}

nlgn · Accepted Answer · 2016-05-19 15:41:58Z

Since you said you are new in javascript, let's use a pure javascript way to do it.

You can add an onChange to the select HTML tag and the function you passed in will be triggered every time you change its value.

Inside the function, you can base on the value of the selection, to decide what is the new value for the email box, using switch, if statement etc..

To do what you want, you can use integer be the value as you mentioned.

HTML:

<select id="counties" onchange="func()">

Javascript:

    function func(){
        var dropdown = document.getElementById("counties");
        var selection = dropdown.value;
        console.log(selection);
        var emailTextBox = document.getElementById("email");
        // assign the email address here based on your need.
        emailTextBox.value = selection;
      }

Demo

Collectives™ on Stack Overflow

Populate textbox based on Dropdown selection - JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related