Pass dropdown values to text box with javascript

Question

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>

Possible duplicate of setting the HTML textbox value based on the selected option using Javascript function. But it seems to be not working — Heretic Monkey
– Heretic Monkey, Commented Feb 10, 2017 at 20:41
Welcome to Stack Overflow! Please read How to Ask. Key phrases: "Search, and research" and "Explain ... any difficulties that have prevented you from solving it yourself". — Heretic Monkey
– Heretic Monkey, Commented Feb 10, 2017 at 20:41

Mihai Alexandru-Ionut · Accepted Answer · 2017-02-10 20:38:12Z

2

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>

answered Feb 10, 2017 at 20:38

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joannaw Over a year ago

Thank you very much Alexandru-Ionut Mihai! I will give all of these options a try tomorrow.

CMedina · Accepted Answer · 2017-02-10 20:40:46Z

1

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/

answered Feb 10, 2017 at 20:40

CMedina

4,2824 gold badges28 silver badges40 bronze badges

1 Comment

Joannaw Over a year ago

Thank you CMedina!!

Paweł · Accepted Answer · 2017-02-10 20:46:43Z

0

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

answered Feb 10, 2017 at 20:46

Paweł

4,5466 gold badges26 silver badges42 bronze badges

Comments

BARNI · Accepted Answer · 2017-02-10 20:47:42Z

0

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

answered Feb 10, 2017 at 20:47

BARNI

1422 silver badges10 bronze badges

2 Comments

Marie Over a year ago

They are being lazy and asking us to do their homework. Not to mention three other people have already answered. Why would you post an answer?

Joannaw Over a year ago

Thank you very much, BARNI!! I have tried many different iterations of what you posted and just don't know enough to get it working. I will try some more.

zer00ne · Accepted Answer · 2017-02-10 20:50:11Z

0

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

answered Feb 10, 2017 at 20:50

zer00ne

45.2k6 gold badges50 silver badges82 bronze badges

1 Comment

Joannaw Over a year ago

Thank you very much zer00ne!! I will give all of these options a try tomorrow.

Collectives™ on Stack Overflow

Pass dropdown values to text box with javascript

5 Answers 5

1 Comment

1 Comment

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related