Populate textbox based on Dropdown selection - JavaScript - 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.

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 = "first#email.com";
}
else if(mailValue=="2"){
textBox.value = "second#email.com";
}
}

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

Related

Change text within Label to option from selection menu

This my custom select menu:
<select name="bankSelect" id="bankSelect" onchange="dispchange(this.form.bankSelect)">
<option>EQUIFAX</option>
<option value = 5 >EQUIFAX</option>
<option value = 6>TRANSUNION</option>
<option value = 7>EXPERIAN</option>
<option value = 8>BANK OF AMERICA</option>
<option value = 9>WELLS FARGO</option>
<option value = 10>CITIBANK</option>
<option value = 11>JPMORGAN</option>
<option value = 12>NAVIENT</option>
<option value = 13>CAPITAL ONE</option>
<option value = 14>U.S BANCORP</option>
</select>
This is my label:
<div class="info">
<label>Bank: </label>
<label id="bank">EQUIFAX</label><br>
</div>
I need to change the text within label with the ID='bank to the option i select from the menu i above.
So if i pick the option with value 9, then my label should change the text it's displaying by defualt,'EQUIFAX' to then display 'WELLS FARGO'.
This is what I've tried in my java-script based on googling similar questions:
function dispchange(bankSelect) {
var bsel_index = bankSelect.selectedIndex;
var bselin = bankSelect.options[bsel_index].value;
if(bselin == '6')
document.getElementById("bank").innerHTML = 'Transunion';
else if(opcao == '1')
document.getElementById('complemento').innerHTML = 'Titulo';
}
It does nothing. What am I doing wrong? Is there a better way / another way to change the label? Can I use something other than a label to display my choice from the selection menu? If so, how do I ensure is always displays the choice currently selected?
use option.text instead of option.value:
function dispchange() {
var el = document.getElementById('bankSelect');
document.getElementById('bank').innerHTML = el.options[el.selectedIndex].text;
}
<select name="bankSelect" id="bankSelect" onchange="dispchange()">
<option>EQUIFAX</option>
<option value="5">EQUIFAX</option>
<option value="6">TRANSUNION</option>
<option value="7">EXPERIAN</option>
<option value="8">BANK OF AMERICA</option>
<option value="9">WELLS FARGO</option>
<option value="10">CITIBANK</option>
<option value="11">JPMORGAN</option>
<option value="12">NAVIENT</option>
<option value="13">CAPITAL ONE</option>
<option value="14">U.S BANCORP</option>
</select>
<div class="info">
<label>Bank: </label>
<label id="bank">EQUIFAX</label><br>
</div>
function dispchange(bankSelect) {
console.log(document.getElementById("bankSelect").value)
document.getElementById('bank').innerHTML = document.getElementById("bankSelect").value;
}
<select name="bankSelect" id="bankSelect" onchange="dispchange()">
<option value="EQUIFAX">EQUIFAX</option>
<option value="TRANSUNION">TRANSUNION</option>
<option value ="EXPERIAN">EXPERIAN</option>
<option value= "BANK OF AMERICA">BANK OF AMERICA</option>
<option value ="WELLS FARGO">WELLS FARGO</option>
</select>
<div class="info">
<label>Bank: </label>
<label id="bank">EQUIFAX</label><br>
</div>
If you can change the value of the options from number to the Bank name then the following code is going to work as you need.
Otherwise, you have to create an array or object with the numbers and Bank names.
Is the above code work for you?

Automatically changing input values when selected a new element

How can I get input values to change dynamically when I select some element from select tag. I want in this input box to be shown a proper value when I change select option.
<select onchange="changevalue()" id="selectingg">
<option value="0">...</option>
<option value="1">Comedy</option>
<option value="2">Horror</option>
<option value="3">Action</option>
<option value="4">Sci-fi</option>
<option value="5">Adventure</option>
<option value="6">Documentary</option>
<option value="7">Anime</option>
</select>
<input type = "text" id="inputting"></input>
You could use addEventListener on change event and get the value from the event.target dropdown like so:
document.getElementById("dropdownCategory").addEventListener('change', event => document.getElementById('categorySelected').value = event.target.value);
<select id="dropdownCategory">
<option value="0">...</option>
<option value="1">Comedy</option>
<option value="2">Horror</option>
<option value="3">Action</option>
</select>
<input type="text" id="categorySelected"></input>
The below code is working fine for me you may try this code.
In below code I am assigning select value to input tag value.
function changevalue(){
document.getElementById("inputting").value =
document.getElementById("selecting").value;
}
<select onchange="changevalue()" id="selecting">
<option value="0">...</option>
<option value="1">Comedy</option>
<option value="2">Horror</option>
<option value="3">Action</option>
<option value="4">Sci-fi</option>
<option value="5">Adventure</option>
<option value="6">Documentary</option>
<option value="7">Anime</option>
</select>
<input type = "text" id="inputting"></input>

getting the value of dropdown menu's and displaying choice using JS

Once the user chooses which flavour they want, I want to be able to display a message on the webpage with the choices they have made from the drop-downs after the submit button is clicked. Here is what I have so far:
<select name="flavour1" required>
<option value="">Please select a Flavour!</option>
<option value="apple">Apple</option>
<option value="strawberry">Strawberry</option>
<option value="lemon">lemon</option>
<option value="pear">Pear</option>
<option value="cola">Cola</option>
<option value="lime">Lime</option>
</select>
<select name="flavour2" required>
<option value="">Please select a Flavour!</option>
<option value="noflavour">No More Flavours!</option>
<option value="apple">Apple</option>
<option value="strawberry">Strawberry</option>
<option value="lemon">lemon</option>
<option value="pear">Pear</option>
<option value="cola">Cola</option>
<option value="lime">Lime</option>
</select>
<input type="submit" value="Get your Flavour!!" onclick="getFlavour()">
JavaScript to attempt to display message into element with id: "postFlavour"
function getFlavour(){
var flavour1 = getElementById("flavour1").value;
var flavour2 = getElementById("flavour1").value;
document.getElementById("postFlavour").innerHTML = "Congratulations, here are your chosen flavours: "+flavour1+", "+flavour2;
}
function getFlavour(){
var sel1 = getElementById("flavour1");
var sel2 = getElementById("flavour2");
var flavour1 = sel1.options[sel1.selectedIndex];
var flavour2 = sel2.options[sel2.selectedIndex];
document.getElementById("postFlavour").innerHTML = "Congratulation, here are your chosen flavours: "+flavour1+", "+flavour2;
return false;
}

How can I check if Dynamically created Select Boxes have been selected

I have some code that has one contact select box hard coded and then if you click on a add button it adds more contacts. Each contact can be selected from a dropdown and give a location in at location text box.
I want on submit to be able to know if they have selected someone and if not I want to clear out the Location box as there cannot be a location if there is no contact.
<!--- The myContactCount variable is set in another part of javascript this is the current count plus one of the number of current select boxes. --->
<script type="text/javascript" language="javascript">
var e='';
var contactSelectedValue='';
for(var i=1;1<myContactCount;i++){
e = document.getElementById('myContactID_'+i);
contactSelectedValue = e.options[e.selectedIndex].value;
/* I am trying to alert the value so I can then use a if statement to check for null or even change the 'Select a Contact' value to 0 and test for that. */
alert(contactSelectedValue);
}
</script>
<!--- the ID will be 1-100 depending on how many contacts they have added --->
<select name="myContactID_#ID#">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2">Barbara</option>
<option value="3">Cavlin</option>
</select>
So after they are created dynamically they code would look like this.
<select name="myContactID_1">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2">Barbara</option>
<option value="3" selected="selected">Cavlin</option>
</select>
<select name="myContactID_2">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2" selected="selected">Barbara</option>
<option value="3">Cavlin</option>
</select>
<select name="myContactID_3">
<option value="">Select a Contact</option>
<option value="1" selected="selected">Abe</option>
<option value="2">Barbara</option>
<option value="3">Cavlin</option>
</select>
Your script has couple of issues:-
1<myContactCount instead of i<=myContactCount and you are using name in the select and
trying to fetch it by id.
Demo
Html
<select id="myContactID_1">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2">Barbara</option>
<option value="3" selected="selected">Cavlin</option>
</select>
<select id="myContactID_2">
<option value="">Select a Contact</option>
<option value="1">Abe</option>
<option value="2" selected="selected">Barbara</option>
<option value="3">Cavlin</option>
</select>
<select id="myContactID_3">
<option value="">Select a Contact</option>
<option value="1" selected="selected">Abe</option>
<option value="2">Barbara</option>
<option value="3">Cavlin</option>
</select>
JS
var e='';
var contactSelectedValue='';
for(var i=1;i<=3;i++){
e = document.getElementById('myContactID_'+i);
contactSelectedValue = e.options[e.selectedIndex].value;
/* I am trying to alert the value so I can then use a if statement to check for null or even change the 'Select a Contact' value to 0 and test for that. */
alert(contactSelectedValue);
}

Cascading Combo box HTML

I am not really a web person and am having trouble creating a cascading combo box. I have my options, but when I cannot figure out how to do a JavaScript command to switch the second box depending on the first box's selection.
These are my first set of options:
<select id="searchType" onchange="selectedOption(this)">
<option value="sessions">Sessions</option>
<option value="files">Files</option>
<option value="clients">Clients</option>
</select>
Depending on what they click there I would like to show these set of options:
SESSIONS
<select id="secondOptions">
<option value="conf">Config ID</option>
<option value="length">Length</option>
<option value="date">Date</option>
</select>
FILES
<select id="secondOptions">
<option value="id">File ID</option>
<option value="length">Length</option>
<option value="sent">Sent</option>
<option value="sessionId">Session ID</option>
</select>
CLIENTS
<select id="secondOptions">
<option value="name">Client Name</option>
<option value="organization">Organization</option>
<option value="specialty">Specialty</option>
<option value="sessionId">Session ID</option>
</select>
And finally a textbox to type into to really specify the search.
Once again, I am trying to do this using JavaScript, but if there is a better way to do this let me know please.
Given the amended html mark-up:
<form action="#" method="post">
<select id="searchType">
<option value="sessions">Sessions</option>
<option value="files">Files</option>
<option value="clients">Clients</option>
</select>
<select id="sessions">
<option value="conf">Config ID</option>
<option value="length">Length</option>
<option value="date">Date</option>
</select>
<select id="files">
<option value="id">File ID</option>
<option value="length">Length</option>
<option value="sent">Sent</option>
<option value="sessionId">Session ID</option>
</select>
<select id="clients">
<option value="name">Client Name</option>
<option value="organization">Organization</option>
<option value="specialty">Specialty</option>
<option value="sessionId">Session ID</option>
</select>
<fieldset id="textAreaSearchBox">
<legend>Search:</legend>
<textarea></textarea>
</fieldset>
</form>
(Note the changed ids, wrapping the form elements in a form, the addition of a fieldset, legend and textarea in the mark-up), the following JavaScript seems to work:
var select1 = document.getElementById('searchType');
var selects = document.getElementsByTagName('select');
select1.onchange = function() {
var select2 = this.value.toLowerCase();
for (i = 0; i < selects.length; i++) {
if (selects[i].id != this.id) {
selects[i].style.display = 'none';
}
}
document.getElementById(select2).style.display = 'block';
document.getElementById('textAreaSearchBox').style.display = 'block';
};
JS Fiddle demo.

Categories