We Keep Coding

textarea stays empty despite setting its .innerHTML

I have 2 fields from which i select some values to be concatenated and posted in a div from which, on submit, i save into a database.
So i select values from 'tags1' and 'tags2' and after i push the button 'adauga' the concatendated values show in the textarea with id 'd11'. Up untill now everythign works fine, untill i press the button 'Clear' to clear the div from values. After that if i try to add values again it does not work, nothing is displayed in the 'd11' div.
Below is the html and the script:
<select name="tehnologie[]" id="tags2" size="13" multiple = "multiple">
<option value="GSM">GSM</option>
<option value="UMTS">UMTS</option>
<option value="LTE">LTE</option>
<option value="NR (5G)">NR (5G)</option>
<option value="Radiodifuziune AM">Radiodifuziune AM</option>
<option value="Radiodifuziune FM">Radiodifuziune FM</option>
<option value="TV digital">TV digital</option>
<option value="TV analogic">TV analogic</option>
<option value="PMR/PAMR">PMR/PAMR</option>
<option value="Satelit">Satelit</option>
<option value="Aero">Aero</option>
<option value="RAmator">RAmator</option>
<option value="Alte aplicatii radio">Alte aplicatii radio</option>
</select>
<input name="banda_buffer" type="number" list="frecvente" id="tags1" >
<datalist id="frecvente">
<option value="800">800</option>
<option value="900">900</option>
<option value="1800">1800</option>
<option value="2100">2100</option>
<option value="2600">2600</option>
</datalist>
<input hidden type="text" id="tags3" >
<input type="button" id="adauga" onClick="myFunction1();" name="adauga" value="+" />
<textarea id="d11" name="banda" rows="5" cols="300" readonly class="form-control input-md"></textarea>
<button type="button" onclick="ClearFields();">Clear</button>
<input type="submit" id="submit" name="submit" onClick="alerta();" value="Salveaza" class="btn btn-primary">
And the js:
var cpvuri1=[];
var AreaToDisplay1=document.getElementById('d11');
function myFunction1(){
var text1=document.getElementById('tags1').value;
var text2=document.getElementById('tags2').value;
var text3= text2 +' - '+ text1;
cpvuri1.push(text3);
AreaToDisplay1.innerHTML=cpvuri1;
}
function ClearFields() {
document.getElementById("d11").value = "";
document.getElementById("tags1").value = "";
document.getElementById("tags2").value = "";
document.getElementById("tags3").value = "";
cpvuri1=[];
}
function alerta() {
document.getElementById("tags3").value = cpvuri1;
}

You can use value rather than innerHTML
function myFunction1(){
var text1=document.getElementById('tags1').value;
var text2=document.getElementById('tags2').value;
var text3= text2 +' - '+ text1;
cpvuri1.push(text3);
AreaToDisplay1.value=cpvuri1;
}

Second dropdown value is not changing if I doesn't change my first dropdown

I am trying to show a table of reviews by taking the value of two dropdowns. When I was having one dropdown(positive, negative etc) that works fine but when I introduce another dropdown(food, drinks etc) it is not working.
It only works when I change the first dropdown and second dropdown but if I kept the first dropdown unchanged then it's not working
I tried by adding onchange method to the second dropdown. I just started with Javascript so not much idea about what to try.
function printResult(form) {
var output = {
{
output | safe
}
};
var sel = form.list;
var sel2 = form.list2;
var selectedVal = sel.options[sel.selectedIndex].value;
var selectedVal2 = sel2.options[sel.selectedIndex].value;
//document.getElementById("showResult").innerText = "Your number is: " + selectedVal;
//console.log(output);
document.getElementById("showResult").innerText = "Your number is: " + selectedVal2;
}
<form action="dropdown" onSubmit="return printResult(this);">
<label for="sentiment">Sentiment</label>
<div class="styled-select blue semi-square">
<select name="list">
<option value="all">All</option>
<option value="positive">Positive</option>
<option value="negative">Negative</option>
<option value="neutral">Neutral</option>
</select>
</div>
<div>
<select name="list2" onChange="printResult()">
<option value="menu">Menu Range</option>
<option value="food">Food</option>
<option value="drinks">Drinks</option>
<option value="desserts">Desserts</option>
</select>
</div>
<input type="submit" value="Filter">
<span id="showResult"></span>
</form>

You need to pass the form on the change too and return false to not submit the form:
function printResult(form) {
var sel = form.list;
var sel2 = form.list2;
var selectedVal = sel.value;
var selectedVal2 = sel2.value;
document.getElementById("showResult").innerText = "Your number is: " + selectedVal2;
return false;
}
<form action="dropdown" onSubmit="return printResult(this);">
<label for="sentiment">Sentiment</label>
<div class="styled-select blue semi-square">
<select name="list">
<option value="all">All</option>
<option value="positive">Positive</option>
<option value="negative">Negative</option>
<option value="neutral">Neutral</option>
</select>
</div>
<div>
<select name="list2" onChange="printResult(this.form)">
<option value="menu">Menu Range</option>
<option value="food">Food</option>
<option value="drinks">Drinks</option>
<option value="desserts">Desserts</option>
</select>
</div>
<input type="submit" value="Filter">
<span id="showResult"></span>
</form>
Perhaps you wanted this instead
window.addEventListener("load", function() {
document.getElementById("form1").addEventListener("submit", function(e) {
e.preventDefault(); // stop submission
var sel = this.list;
var sel2 = this.list2;
var selectedVal = sel.value;
var selectedVal2 = sel2.value;
document.getElementById("showResult").innerText = (selectedVal && selectedVal2) ? selectedVal + ":" + selectedVal2 : "Please select both";
});
});
<form action="dropdown" id="form1">
<label for="sentiment">Sentiment</label>
<div class="styled-select blue semi-square">
<select name="list">
<option value="">All</option>
<option value="positive">Positive</option>
<option value="negative">Negative</option>
<option value="neutral">Neutral</option>
</select>
</div>
<div>
<select name="list2">
<option value="">Menu Range</option>
<option value="food">Food</option>
<option value="drinks">Drinks</option>
<option value="desserts">Desserts</option>
</select>
</div>
<input type="submit" value="Filter">
<span id="showResult"></span>
</form>

How to show text of selectbox to a textbox? [duplicate]

This question already has answers here:
How to add the value of selectbox to a textbox?
(2 answers)
Closed 5 years ago.
How can I show the text of selectbox to each textbox based on selected event?
My code only shows the value of selectbox to textbox. I want to replace it with text of each option.
Here is my code:
var selectBox = document.getElementById('mySelect');
var selectBox2 = document.getElementById('mySelect2');
selectBox.addEventListener('change', handleChange);
selectBox2.addEventListener('change', handleChange);
function handleChange(event)
{
if (event.target.id == "mySelect") {
document.getElementById('myInput').value = selectBox.value;
} else {
document.getElementById('myInput2').value = selectBox2.value;
}
}
<select id="mySelect">
<option value="Option 1"> this Text</option>
<option value="Option 2">this Text 2</option>
</select>
<select id="mySelect2">
<option value="Option 1">this Text</option>
<option value="Option 2">this Text 2 </option>
</select>
<input type="text" id="myInput" />
<input type="text" id="myInput2" />

You can access the label of selected option using selectedOptions[0].text on select element.
var selectBox = document.getElementById('mySelect');
var selectBox2 = document.getElementById('mySelect2');
selectBox.addEventListener('change', handleChange);
selectBox2.addEventListener('change', handleChange);
function handleChange(event)
{
if (event.target.id == "mySelect") {
document.getElementById('myInput').value = selectBox.selectedOptions[0].text;
} else {
document.getElementById('myInput2').value = selectBox2.selectedOptions[0].text;
}
}
// Set initial values:
document.getElementById('myInput').value = selectBox.selectedOptions[0].text;
document.getElementById('myInput2').value = selectBox2.selectedOptions[0].text;
<select id="mySelect">
<option value="Option 1"> this Text</option>
<option value="Option 2">this Text 2</option>
</select>
<select id="mySelect2">
<option value="Option 1">this Text</option>
<option value="Option 2">this Text 2 </option>
</select>
<input type="text" id="myInput" />
<input type="text" id="myInput2" />

You'd use the textContent of the options instead of the value
var selectBox = document.getElementById('mySelect');
var selectBox2 = document.getElementById('mySelect2');
selectBox.addEventListener('change', handleChange);
selectBox2.addEventListener('change', handleChange);
function handleChange(event) {
if (event.target.id == "mySelect") {
var index = selectBox.selectedIndex;
var option = selectBox.options[index]
document.getElementById('myInput').value = option.textContent;
} else {
var index = selectBox2.selectedIndex;
var option = selectBox2.options[index];
document.getElementById('myInput2').value = option.textContent;
}
}
<select id="mySelect">
<option value="Option 1"> this Text</option>
<option value="Option 2">this Text 2</option>
</select>
<select id="mySelect2">
<option value="Option 1">this Text</option>
<option value="Option 2">this Text 2 </option>
</select>
<input type="text" id="myInput" />
<input type="text" id="myInput2" />
Or using jQuery
$('#mySelect, #mySelect2').on('change', function() {
$('#'+this.id.replace('mySelect', 'myInput')).val($('option:selected', this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mySelect">
<option value="Option 1"> this Text</option>
<option value="Option 2">this Text 2</option>
</select>
<select id="mySelect2">
<option value="Option 1">this Text</option>
<option value="Option 2">this Text 2 </option>
</select>
<input type="text" id="myInput" />
<input type="text" id="myInput2" />

$('.mySelect').change(function(){
var select_box_val = $(this).val();
$('#myInput').val(select_box_val)
});
Try the above code.

node.value is always going to read the value attribute of input .
you can just replace the value with the value you actually trying to pass .
Ex;
<option value="this Text">this Text</option>
<option value="this Text 2">this Text 2 </option>

Here you go,
in case you want the selected option instead just change .text to .value like,
document.getElementById('myInput').value = selectBox.options[selectBox.selectedIndex].value;
var selectBox = document.getElementById('mySelect');
var selectBox2 = document.getElementById('mySelect2');
selectBox.addEventListener('change', handleChange);
selectBox2.addEventListener('change', handleChange);
function handleChange(event)
{
if (event.target.id == "mySelect") {
document.getElementById('myInput').value = selectBox.options[selectBox.selectedIndex].text;
} else {
document.getElementById('myInput2').value = document.getElementById('myInput2').value = selectBox2.options[selectBox2.selectedIndex].text;
}
}
<select id="mySelect">
<option value="Option 1"> this Text</option>
<option value="Option 2">this Text 2</option>
</select>
<select id="mySelect2">
<option value="Option 1">this Text</option>
<option value="Option 2">this Text 2 </option>
</select>
<input type="text" id="myInput" />
<input type="text" id="myInput2" />

Pass dropdown values to text box with javascript

I don't know much about javascript and unfortunately don't have time to learn before this project is due (wish I did!). I assume it is possible to pass the value of a drop-down selection into a hidden text input field on a form before the form is submitted. Could anyone help me figure out how to do that with javascript? Thank you! Here are my drop-down and text box details:
<div class="formEntryArea">
<div class="formEntryLabel">
<span class="formLabel"><label for=" langdropdown">Would you like to receive library notices in English or Spanish? ><span class="formRequired">*</span></label></span>
</div>
<div class="formMultiSelect" id=”langdropdown”>
<select name=" langdropdown ">
<option value="0" selected="selected">Choose language</option>
<option value="eng">English</option>
<option value="spa">Spanish</option>
<input type="text" id="ddepartment" name="ddepartment" value=””>
</select>
</div>

This is simply. First of all, you have to bind a change event handler for your select. Then, you have to set input text with value selected from dropdown.
var select=document.getElementsByTagName('select')[0];
var input=document.getElementById('ddepartment');
select.onchange=function(){
input.value=select.options[select.selectedIndex].text;
}
<div class="formEntryArea">
<div class="formEntryLabel">
<span class="formLabel"><label for=" langdropdown">Would you like to receive library notices in English or Spanish? ><span class="formRequired">*</span></label></span>
</div>
<div class="formMultiSelect" id=”langdropdown”>
<select name=" langdropdown ">
<option value="0" selected="selected">Choose language</option>
<option value="eng">English</option>
<option value="spa">Spanish</option>
</select>
<input type="text" id="ddepartment" name="ddepartment">
</div>

You can use this code:
var myselect = document.getElementById("MySelect");
myselect.onchange = function(){
alert(myselect.options[myselect.selectedIndex].value);
document.getElementById("ddepartment").value = myselect.options[myselect.selectedIndex].value;
};
Result: https://jsfiddle.net/fh5myefw/

Mind to close the tags, it's better practice.
var select = document.getElementById('selectElem');
var outputElem = document.getElementById('ddepartment');
select.addEventListener('change',function(){
var newValue = !this.selectedIndex ? "":this.options[this.selectedIndex].text;
outputElem.value = newValue;
});
<select name="langdropdown" id="selectElem" required>
<option value="" selected="selected">Choose language</option>
<option value="eng">English</option>
<option value="spa">Spanish</option>
</select>
<input type="text" id="ddepartment" name="ddepartment" value="">

this is javascript function
function func(selectObject)
{
document.getElementById('ddepartment').value = selectObject.value;
}
add onchange event to select element like this
<select name="langdropdown" onchange="func(this)">

Here use this:
var sel = document.getElementById('lang');
sel.onchange = function() {
var val = this.options[this.selectedIndex].value;
var che = document.getElementById('cache').value;
che = val;
console.log(che);
}
SNIPPET
var sel = document.getElementById('lang');
sel.onchange = function() {
var val = this.options[this.selectedIndex].value;
var che = document.getElementById('cache').value;
che = val;
console.log(che);
}
<select id='lang' name="lang">
<option value="" selected>Choose language</option>
<option value="eng">English</option>
<option value="spa">Spanish</option>
<option value="jpn">Japanese</option>
<option value="zho">Chinese</option>
<option value="fin">Finnish</option>
<option value="nav">Navajo</option>
</select>
<input type="hidden" id="cache" name="cache" value=””>

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.

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