CODEWITHSUNDEEP
htmlformsinput
Dita Aji Pratama
Dita Aji Pratama

Reputation: 720

Autofill a text form value after select an option form

I have 2 form

<select>
  <option>Rose</option>
  <option>Violet</option>
</select>

and

<input type="text" value="Autofill here" />

if users select Rose, a text form value will be "Red" automatically.

if users select Violet, a text form value will be "Blue" automatically.

Did you have a simple sample for this?

Upvotes: 1

Views: 11530

Answers (5)

Nam Tran
Nam Tran

Reputation: 62

You can try

var e = document.getElementById("selectFlower");
e.addEventListener("change", function(){
    $('#inp').css('color', $('#selectFlower').val());
});

<select id="selectFlower">
      <option value="red">Rose</option>
      <option value="blue">Violet</option>
</select>

<input type="text" id="inp" value="Autofill here" />

Upvotes: 1

Dalin Huang
Dalin Huang

Reputation: 11342

With jQuery, add change event to select, set selected value to text input. Note: you need to add Blue Red to select option in HTML first:

$('#myselect').on('change', function(){
  $('#myinput').val($(this).val());
})

// init
$('#myselect').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect">
  <option value="Red">Rose</option>
  <option value="Blue">Violet</option>
</select>

<input id="myinput" type="text" value="Autofill here" />

Upvotes: 4

O.Rares
O.Rares

Reputation: 1061

<select id="sel">
  <option value="Rose">Rose</option>
  <option value="Violet">Violet</option>
</select>

<input id="test" type="text" value="Autofill here" />

The JS code is

var selection = document.getElementById("sel");
document.getElementById("test").value(selection.options[ selection.selectedIndex ].value)

Make from this JS code a function and add it to input with onChange attribute

Upvotes: 0

Sandeep Nayak
Sandeep Nayak

Reputation: 4757

Using Vanilla JavaScript

var e = document.getElementById("selectFlower");
e.addEventListener("change", function() {

  var val = e.options[e.selectedIndex].text;
  document.getElementById("inp").value = val;

});

// To show preselected value

var val = e.options[e.selectedIndex].text;
document.getElementById("inp").value = val;
<select id="selectFlower">
  <option>Rose</option>
  <option>Violet</option>
</select>

<input type="text" id="inp" value="Autofill here" />

Upvotes: 0

JanR
JanR

Reputation: 6132

Basic idea using JQuery:

Html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="colorPicker">
  <option value="Red">Rose</option>
  <option value="Blue">Violet</option>
</select>

Javascript:

$(document).ready(function(){
        //when the select changes:
    $('.colorPicker').on("change", function(){
        //set the value of the input to the value of the select.
            $('.colorDisplay').val($(this).val());
    });
});

In principle, we bind a function to change event of the select. Using a class to identify both the input field and the select. When a user selects an option, the input is automatically updated to be the value of the option selected.

Fiddle here

Upvotes: 2

Related Questions