How to write HTML code that read the input and produce a combination of string as an output?

Question

Let's say I have two Dropdown Input Field. The first dropdown consists of 1 to 4 numbers. The second dropdown consists of A,B,C and D. When user select his/her choice from both dropdown and click 'SUBMIT', an output text will be shown. For example:

Dropdown 1:

1 -- Bad
2 -- Good
3 -- Great
4 -- Perfect

Dropdown 2:

A -- Boy
B -- Girl
C -- Man
D -- Woman

If User choose 2 and C respectively and click SUBMIT, an output text will be showing 'Good Man'.
How can I achieve this by using HTML code?

Answer 1

You'll have to use Javascript. Here's an example where clicking the submit button will fire an event that changes the text inside #answer.

I'm also splitting on -- to only include the last word in the selected choice.

document.getElementById('submit').addEventListener('click', (e) => {
  const choiceOne = document.getElementById('selectOne').value.split('--')[1].trim();
  const choiceTwo = document.getElementById('selectTwo').value.split('--')[1].trim();
  document.getElementById('answer').textContent = choiceOne + ' ' + choiceTwo;
});

<select id="selectOne">
  <option>1 -- Bad</option>
  <option>2 -- Good</option>
  <option>3 -- Great</option>
  <option>4 -- Perfect</option>
</select>

<select id="selectTwo">
  <option>A -- Boy</option>
  <option>B -- Girl</option>
  <option>C -- Man</option>
  <option>D -- Woman</option>
</select>

<button id="submit">Submit</button>

<p id="answer"></p>

Answer 2

Here's my sample code, you can work on from this.

Codepen: https://codepen.io/DieByMacro/pen/WBdzbp?editors=1111

(function() {
  const firstSelect = document.querySelector('#first-select');
  const secondSelect = document.querySelector('#second-select');
  const btnSubmit = document.querySelector('#submit');
  
  function selectChangeHandler(event) {
    console.log(event.target.value);
  }
  
  function clickHandler() {
    const value1 = document.querySelector('#first-select').value;
    const value2 = document.querySelector('#second-select').value;
    const result = document.querySelector('#result')
    result.innerText = `Selected ${value1} ${value2}`
  }
  
  firstSelect.addEventListener('change', selectChangeHandler )
  secondSelect.addEventListener('change', selectChangeHandler )
  btnSubmit.addEventListener('click', clickHandler )
})()

<select id="first-select">
  <option value="Good">Good</option>
  <option value="Bad">Bad</option>
</select>

<select id="second-select">
  <option value="Boy">Boy</option>
  <option value="Girl">Girl</option>
</select>

<button id="submit">Submit</button>

<div id="result"></div>

Answer 3

It is customary to include your code when you ask a question. It makes answering a little easier.

Assuming I have the HTML right, then something like this (taking from an answer here: Capture a form submit in JavaScript)

document.addEventListener("click",function() {
  /* alert('ready'); */
  document.getElementById('form1').addEventListener("submit",function(e) {
    e.preventDefault(); // before the code
    /* do what you want with the form */
    var adj = document.getElementById('adj').value;
    var noun= document.getElementById('noun').value;

    // Should be triggered on form submit
    document.getElementById("output").innerHTML = adj + " " + noun;
  });
});

<form id="form1" method="get">
  <select id="adj" name="adjective">
    <option value="Good">Good</option>
    <option value="Awesome">Awesome</option>
  </select>
  <select id="noun" name="noun">
    <option value="Boy">Boy</option>
    <option value="Girl">Girl</option>
  </select> 
  <input type="submit">
</form>
<div id="output">
 
</div>