CODEWITHSUNDEEP
javascript
Joannaw
Joannaw

Reputation: 19

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>

Upvotes: 1

Views: 4209

Answers (5)

zer00ne
zer00ne

Reputation: 43880

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=””>

Upvotes: 0

BARNI
BARNI

Reputation: 142

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)">

Upvotes: 0

Paweł
Paweł

Reputation: 4516

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="">

Upvotes: 0

CMedina
CMedina

Reputation: 4222

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/

Upvotes: 1

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48367

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>

Upvotes: 2

Related Questions