CODEWITHSUNDEEP
javascripthtml
Chrys
Chrys

Reputation: 79

Inserting a value into an input

I have a list of countries with their callsign and I want that by selecting a country in the list the indicative corresponding to the country is put in my input but it does not work ... I do not find the solution

<script type="text/javascript">
var mytextbox = document.getElementById('Recipient');
var mydropdown = document.getElementById('indicatif');

mydropdown.onchange = function(){
     mytextbox.innerHTML = this.value;
}
</script>
<select style="visibility:hidden;" style="color:black;" id="indicatif">
    <option value="">Destination country</option>
    <option value="+355">Albania</option>
    <option value="+213">Algeria</option>
    <option value="+376">Andorra</option>
    <option value="+244">Angola</option>
    <option value="+1264">Anguilla</option>
    <option value="+1268">Antigua and Barbuda</option>
    <option value="+54">Argentina</option>
    <option value="+374">Armenia</option>
    <option value="+297">Aruba</option>
    <option value="+61">Australia</option>
    <option value="+43">Austria</option>
    <option value="+994">Azerbaijan</option>
    <option value="+1242">Bahamas</option>
    ....
</select>
<input style="color:black;" name="Recipient" id="Recipient" type="text">

Upvotes: 1

Views: 70

Answers (2)

kind user
kind user

Reputation: 41893

var mytextbox = document.getElementById('Recipient');
var mydropdown = document.getElementById('indicatif');

mydropdown.addEventListener('change', function(){
   mytextbox.value = mydropdown.value;
});
<select style="color:black;" id="indicatif">
    <option value="">Destination country</option>
    <option value="+355">Albania</option>
    <option value="+213">Algeria</option>
    <option value="+376">Andorra</option>
    <option value="+244">Angola</option>
    <option value="+1264">Anguilla</option>
    <option value="+1268">Antigua and Barbuda</option>
    <option value="+54">Argentina</option>
    <option value="+374">Armenia</option>
    <option value="+297">Aruba</option>
    <option value="+61">Australia</option>
    <option value="+43">Austria</option>
    <option value="+994">Azerbaijan</option>
    <option value="+1242">Bahamas</option>
    ....
</select>
<input style="color:black;" name="Recipient" id="Recipient" type="text">

Full code snippet, just copy and paste it into your project.

<html>

<head>
  <title>HelloWorld</title>

</head>

<body>

  <select style="color:black;" id="indicatif">
      <option value="">Destination country</option>
      <option value="+355">Albania</option>
      <option value="+213">Algeria</option>
      <option value="+376">Andorra</option>
      <option value="+244">Angola</option>
      <option value="+1264">Anguilla</option>
      <option value="+1268">Antigua and Barbuda</option>
      <option value="+54">Argentina</option>
      <option value="+374">Armenia</option>
      <option value="+297">Aruba</option>
      <option value="+61">Australia</option>
      <option value="+43">Austria</option>
      <option value="+994">Azerbaijan</option>
      <option value="+1242">Bahamas</option>
  </select>
  <input style="color:black;" name="Recipient" id="Recipient" type="text">

  <script>
    var mytextbox = document.getElementById('Recipient');
    var mydropdown = document.getElementById('indicatif');

    mydropdown.addEventListener('change', function() {
      mytextbox.value = mydropdown.value;
    });
  </script>
</body>

</html>

Upvotes: 3

JC Hern&#225;ndez
JC Hern&#225;ndez

Reputation: 807

Try this:

mydropdown.onchange = function(){
     mytextbox.value = mydropdown.value;
}

Upvotes: 1

Related Questions