Using html & javascript Populate textbox

Question

My question is to populate textbox data using html & javascript:

I have 2 dropdown

1st dropdown contains Country 2nd dropdown contains Office location

After selecting 2 dropdowns the text box should be filled with respective manager name for that particular office location.

Dropdown 1
<label> Select Country: </label>
<select id="con">
<option>Germany</option>
<option>France</option>
<option>United Kingdom</option>
<select>
Dropdown 2
<label> Select Office location: </label>
<select id="loc">
<option>DE</option>
<option>FR</option>
<option>UK</option>
<select>
<label>ManagerName:</label><input type="text" value="" id="mgrid">

Output:

If Germany & DE selected ManagerName: Alex

If France & FR selected ManagerName: Louis

If United Kingdom & UK selected ManagerName: Michel

Thanks in advance

Mamun · Accepted Answer · 2021-05-14 10:42:38Z

You can maintain an array of the manager's information from which you can select the name based on the value on the dropdowns:

var managers = [
  {country:'Germany', office:'DE', name:'Alex'},
  {country:'France', office:'FR', name:'Louis'}, 
  {country:'United Kingdom', office:'UK', name:'Michel'}
];

document.querySelectorAll('#con, #loc').forEach(function(sel){
  sel.addEventListener('change',function(){
    var conSel = document.querySelector('#con');
    var conVal = conSel.options[conSel.selectedIndex].text;
    var locSel = document.querySelector('#loc');
    var locVal = locSel.options[locSel.selectedIndex].text;
    var manager = managers.find(m => m.country == conVal && m.office == locVal);
    if(manager){
      document.querySelector('#mgrid').value = manager.name;
    }
    else{
      document.querySelector('#mgrid').value = '';
    }
  });
})

<label> Select Country: </label>
<select id="con">
  <option>Germany</option>
  <option>France</option>
  <option>United Kingdom</option>
<select>
<label> Select Office location: </label>
<select id="loc">
  <option>DE</option>
  <option>FR</option>
  <option>UK</option>
<select>
<label>ManagerName:</label><input type="text" value="" id="mgrid">

AbsoluteBeginner · Accepted Answer · 2021-05-14 12:29:12Z

1

My suggestion:

con.onchange = () => showName(),
  loc.onchange = () => showName();

const showName = () => {
  var manager;
  con.value === "Germany" && loc.value === "DE" ? manager = "Alex" :
    con.value === "France" && loc.value === "FR" ? manager = "Louis" :
    con.value === "United Kingdom" && loc.value === "UK" && (manager = "Michel");
  mgrid.value = manager ? manager : 'none';
};

<label>Select Country:</label>
<select id="con">
<option>Germany</option>
<option>France</option>
<option>United Kingdom</option>
<select>

<br>

<label>Select Office location:</label>
<select id="loc">
<option>DE</option>
<option>FR</option>
<option>UK</option>
<select>

<br>

<label>ManagerName:</label>
<input type="text" value="" id="mgrid">

answered May 14, 2021 at 12:29

AbsoluteBeginner

2,2833 gold badges15 silver badges24 bronze badges

2 Comments

Micheal Over a year ago

Hi thanks for the answer @AbsoluteBeginner. I tried as below but I did not yield any answer in my html page. Am I doing something wrong here?

<script>   con.onchange = () => showName(),   loc.onchange = () => showName();  const showName = () => {   var manager;   con.value === "Germany" && loc.value === "DE" ? manager = "Alex" :     con.value === "France" && loc.value === "FR" ? manager = "Louis" :     con.value === "United Kingdom" && loc.value === "UK" && (manager = "Michel");   mgrid.value = manager ? manager : 'none'; };   </script>

AbsoluteBeginner Over a year ago

@Micheal The JS code of your comment is essentially the one of my answer. It works: jsfiddle.net/rg5v8ont Check out the browser's console when executing your HTML page.

AbsoluteBeginner · Accepted Answer · 2021-05-14 18:59:50Z

const con = document.getElementById('con');
const loc = document.getElementById('loc');
const mgrid = document.getElementById('mgrid');

function selectChange() {
  if (con.value === 'Germany' && loc.value === 'DE') {
    mgrid.value = 'Alex';
  } else if (con.value === 'France' && loc.value === 'FR') {
    mgrid.value = 'Louis';
  } else if (con.value === 'United Kingdom' && loc.value === 'UK') {
    mgrid.value = 'Michel';
  }
}

Dropdown 1
<label> Select Country: </label>
<select id="con" onchange="selectChange()">
<option>Germany</option>
<option>France</option>
<option>United Kingdom</option>
<select>

Dropdown 2
<label> Select Office location: </label>
<select id="loc" onchange="selectChange()">
<option>DE</option>
<option>FR</option>
<option>UK</option>
<select>

<label>ManagerName:</label>
<input type="text" value="" id="mgrid">

Dawid Witaszek · Accepted Answer · 2021-05-14 19:33:43Z

1

The most simple solution is to use DOM manipulation. Just add id property for yours selectors and textbox.Than add appropriate event listeners. For more information check thease tutorials:

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents

https://developer.mozilla.org/pl/docs/Web/API/EventTarget/addEventListener

I hope it'd help you :)

edited May 14, 2021 at 19:33

answered May 14, 2021 at 10:33

Dawid Witaszek

463 bronze badges

Collectives™ on Stack Overflow

Using html & javascript Populate textbox

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related