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>

Answer 1

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/

Answer 2

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.

Answer 3

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

Answer 4

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>

Answer 5

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>

Answer 6

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>

Answer 7

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>