Javascript change input value when select option is selected

Question

I am very new to javascript. So i have a select option and an input field. What i want to achieve is to have the value of the input field change when i select a particular option. This is what i have tried:

First Name: <input type="text" value="colors">

<select name="">
   <option>Choose Database Type</option>
   <option onclick="myFunction(g)>green</option>
   <option onclick="myFunction(r)>red</option>
   <option onclick="myFunction(o)>orange</option>
   <option onclick="myFunction(b)>black</option>
</select>

<script>
function myFunction(g) {
    document.getElementById("myText").value = "green";
}
function myFunction(r) {
    document.getElementById("myText").value = "red";
}
function myFunction(o) {
    document.getElementById("myText").value = "orange";
}
function myFunction(b) {
    document.getElementById("myText").value = "black";
}
</script>

1. Please think about the DRY principle. 2. You have no element with an ID of "text". 3. You're passing in params which are undefined. 4. You don't use them. — evolutionxbox, Jun 21 '17 at 14:46
Without trying to sound too mean/harsh, I would suggest you go off and follow some basic JavaScript tutorials first before asking questions like this as if you knew even a small amount of JS you'd know the problem. — George, Jun 21 '17 at 14:47
@evolutionxbox 5. his functions are named the same and so are overwriting the previous ones, which is the main issue imo — George, Jun 21 '17 at 14:48
Possible duplicate of [onchange select box](https://stackoverflow.com/questions/9764897/onchange-select-box) — nicowernli, Jun 21 '17 at 14:49
@George true. It was more order of first notice than anything... — evolutionxbox, Jun 21 '17 at 14:49

score 26 · Accepted Answer · answered Jun 21 '17 at 14:47

26

A few things:

You should use the onchange function, rather than onclick on each individual option.

Use a value attribute on each option to store the data, and use an instance of this to assign the change (or event.target)

You have no ID on your text field

You're missing the end quote for your onclick function

<select name="" onchange="myFunction(event)">
    <option disabled selected>Choose Database Type</option>
    <option value="Green">green</option>
    <option value="Red">red</option>
    <option value="Orange">orange</option>
    <option value="Black">black</option>
</select>

And the function:

function myFunction(e) {
    document.getElementById("myText").value = e.target.value
}

And add the ID

<input id="myText" type="text" value="colors">

Fiddle: https://jsfiddle.net/gasjv4hs/

answered Jun 21 '17 at 14:47

tymeJV

103,943
14
161
157

Like i aforesaid, i'm very new to javascript. Thanks Alot for the explanation. It worked it out! – Daniel C. Jun 21 '17 at 15:08
Please i tried to implement this on [CKEditor](http://ckeditor.com) but it doesn't work. Do you have an idea how i can make it work? – Daniel C. Jun 22 '17 at 01:59
@DanielC. - Sorry - I'm not very familiar with CKEditor - I'm guessing it has to do with the placement of the script - make sure the script is loaded after the HTML. – tymeJV Jun 22 '17 at 12:53

score 1 · Answer 2 · answered Nov 11 '18 at 13:53

More proper way is to put your JS code in a different .js file and use Jquery as when you go further with your programming this is the proper way.

Your HTML

<input type="text" id="color" name="color">
<select name="" id="changeData">
<option>Choose Database Type</option>
<option data-value="green">green</option>
<option data-value="red">red</option>
<option data-value="orange">orange</option>
<option data-value="black">black</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>

Your JS

$(document).ready(function () {     
$('#changeData').change(function(){
var color = $(this).val();
$('#color').val(color);
})
});

Also make sure that you have added Jquery Library to your Project. You can either download Jquery and add in your project folder OR also you can use CDN. in this example CDN is used.

score 1 · Answer 3 · answered Nov 19 '18 at 12:47

I came up with a similar problem. In my case i was trying to change the minimum value of an input based on the value of an option in a select list. I tried to apply the above solutions but nothing worked. So i came with this, which can be applied to problems similar to this

HTML

<input id="colors" type="text" value="">

<select id="select-colors" name="" onchange="myFunction()">
   <option disabled selected>Choose Colour</option>
   <option value="green">green</option>
   <option value="red">red</option>
   <option value="orange">orange</option>
   <option value="black">black</option>
</select>

JS

function myFunction() {
var x = document.getElementById("select-colors").value;
document.getElementById("colors").value = x;
  }

This works by getting the value of the select with id "select-colors" on every change, assigning it into a variable "x" and inserting it into the input value with id "colors". This can be implemented in anyway based on your problem

score 0 · Answer 4 · answered Jun 21 '17 at 14:49

You create functions with same name multiple times.

Only last one will work.

the variables you pass g,r,o,b are undefined.

Don't add onclick to option add onchange to select.

Make use of HTML5 data-* attribute

function myFunction(element) {
  document.getElementById("myText").value = element;
}

First Name: <input type="text" id="myText" value="colors">

<select name="" onchange="myFunction(this.value);">
   <option>Choose Database Type</option>
   <option data-value="green">green</option>
   <option data-value="red">red</option>
   <option data-value="orange">orange</option>
   <option data-value="black">black</option>
</select>

Please i tried to implement this on [CKEditor](http://ckeditor.com) but it doesn't work. Do you have an idea how i can make it work? — Daniel C., Jun 22 '17 at 02:00

score 0 · Answer 5 · answered Jun 21 '17 at 14:52

You can resolve it this way.

` First Name:

<select name="" onchange="myFunction()" id="selectID">
   <option>Choose Database Type</option>
   <option >green</option>
   <option >red</option>
   <option >orange</option>
  <option >black</option>
</select>

<script>
function myFunction() {
    var selectItem = document.getElementByID('selectID').value;
     document.getElementByID('yourId').value = sekectItem;

}
</script>

score 0 · Answer 6 · answered Jun 21 '17 at 14:53

Here's a way to achieve that:

var select = document.getElementById('colorName');

function myFunction(event) {
  var color = 'No color selected';

  if (select.selectedIndex > 0) {
    color = select.item(select.selectedIndex).textContent;
  }
  
  document.getElementById('myText').value = color;
}

select.addEventListener('click', myFunction);

myFunction();

First Name: <input type="text" id="myText">

<select id="colorName">
   <option>Choose Database Type</option>
   <option>green</option>
   <option>red</option>
   <option>orange</option>
   <option>black</option>
</select>

Please i tried to implement this on [CKEditor](http://ckeditor.com) but it doesn't work. Do you have an idea how i can make it work? — Daniel C., Jun 22 '17 at 02:00

score 0 · Answer 7 · answered Jun 21 '17 at 14:59

Your code should be like following.

<input type="text" name="color" id="color">
 <select name="" id="change_color">
    <option>Choose Database Type</option>
   <option >green</option>
     <option >red</option>
    <option >orange</option>
   <option >black</option>
</select>
<script type="text/javascript" src="jquery.js"></script>
<script>
    $(document).ready(function () {     
    $('#change_color').change(function(){
    var color = ($(this).val());
    $('#color').val(color);
    })
    });
</script>

Please i tried to implement this on [CKEditor](http://ckeditor.com) but it doesn't work. Do you have an idea how i can make it work? — Daniel C., Jun 22 '17 at 02:00

score 0 · Answer 8 · answered Jul 07 '22 at 07:13

Here is JS Code that worked for me

var selectYear = document.getElementById('select-year');
selectYear.addEventListener('change', function() {
  var selectedYear = document.getElementById('selected-year');
  selectedYear.innerHTML = selectYear.value;
});

Select Input ID: select-year Text ID: selected-year

Code generated from Codex AI :)

Javascript change input value when select option is selected

8 Answers8

Linked