How to validate the select method with submit type?

Question

I want to validate the select method with submit type button. I have created a form and under that, I have created the select method and given some options. By submit type, the onClick should validate my submit type with the options in the select method. How can I assign the value of option to var t based on select?

According to the select option my var t should be changed.

If the value is volvo then it should print val11, similarly Saab= val14, opel= val82, Audi= val34

<select name="carlist" class="temp>
  <option value="10">Volvo</option>
  <option value="20">Saab</option>
  <option value="30">Opel</option>
  <option value="45">Audi</option>
</select>

<input type="submit" class="temp" value="submit the answer">

<script>
   var t;
   if () {
     t=value;
   } else if () {
     t=value;
   } else if () {
     t=value;
   }else {
      t=value;
   }
</script>

Answer 1

You can call a function on clicking the button. Inside the function get the text of the selected option:

function getValue(){
  var el = document.querySelector('.temp');
  var val = el.options[el.selectedIndex].text;
  var t;
  if(val == "Volvo")
    t = 'val11';
  else if(val == "Saab")
    t = 'val14';
  if(val == "Opel")
    t = 'val82';
  else if(val == "Audi")
    t = 'val34';
  alert(t);
}

<form>
  <select name="carlist" class="temp">
    <option value="10">Volvo</option>
    <option value="20">Saab</option>
    <option value="30">Opel</option>
    <option value="45">Audi</option>
  </select>

  <input onclick="getValue()" type="submit" class="temp" value="submit the answer">
</form>

You can also think of using data attribute which is more cleaner and simpler:

function getValue(){
  var el = document.querySelector('.temp');
  var t = el.options[el.selectedIndex].getAttribute('data-val');
  alert(t);
}

<form>
  <select name="carlist" class="temp">
    <option value="10" data-val="val11">Volvo</option>
    <option value="20" data-val="val14">Saab</option>
    <option value="30" data-val="val82">Opel</option>
    <option value="45" data-val="val34">Audi</option>
  </select>

  <input onclick="getValue()" type="submit" class="temp" value="submit the answer">
</form>

Answer 2

You can do a few things, here's the simplest I could get away with.

function submitForm() {
  const value = document.querySelector('[name="carlist"').value;
  console.log(value);
  return false; // to prevent it navigating away.
}

<form onsubmit="submitForm()">
<select name="carlist" class="temp">
  <option value="1">Volvo</option>
  <option value="2">Saab</option>
  <option value="3">Opel</option>
  <option value="4">Audi</option>
</select>

<input type="submit" class="temp" value="submit the answer">

You can also have some validation running earlier, e.g. on change:

/**
 * This function runs on form submit.
 */
function submitForm(event) {
  const value = document.querySelector('[name="carlist"').value;
  console.log(value);
  // to prevent it navigating away.
  event.preventDefault();
  return false; 
}

/**
 * This function runs on selection change
 */
function validateCar(changeEvent) {
  console.log('Change');
  // do something with changeEvent
}

<form onsubmit="submitForm(event)">
<select name="carlist" class="temp" onchange="validateCar(event)">
  <option value="1">Volvo</option>
  <option value="2">Saab</option>
  <option value="3">Opel</option>
  <option value="4">Audi</option>
</select>

<input type="submit" class="temp" value="submit the answer">

Answer 3

You can set an id attribute on the select element and then access it through a querySelector or getElementById.

<form id="carForm">
<select name="carlist" class="temp" id="car">
  <option value="val11">Volvo</option>
  <option value="val14">Saab</option>
  <option value="val82">Opel</option>
  <option value="val34">Audi</option>
</select>
</form>

let carForm = document.getElementById('carForm');

carForm.onsubmit = function(event) {
  var t = document.getElementById('car');
  ...
}

See codepen example