How to get all selected values from different inputs - Javascript

Question

I see a lot of questions like that but mine is different from theirs. I have a form and the form includes 3 different select area for different variables. I want to get them but I don't know how to do and I'm newbie on Javascript and HTML.

edit: I deleted the " sending database " part. It was part of the context.

Here is HTML:

    <form>

  <p> Scores: </p>

    <select name ="scores:">
      <option value= " 9 " name= " 9 "> 9 </option>
      <option value= " 8 " name= " 8 "> 8 </option>
      <option value= " 7 " name= " 7 "> 7 </option>
      <option value= " 6 " name= " 6 "> 6 </option>
      <option value= " 5 " name= " 5 "> 5 </option>
      <option value= " 4 " name= " 4 "> 4 </option>
      <option value= " 3 " name= " 3 "> 3 </option>
      <option value= " 2 " name= " 2 "> 2 </option>
      <option value= " 1 " name= " 1 "> 1 </option>

    </select>

<p> Years: </p>


  <select id ="year">
  </select>

  <p> Languages: </p>

  <select name="language">
    <option value ="Aborginial", name = "Aborginial"> Aborginial </option>
    <option value="Arabic"> Arabic </option>
    <option value="Aramaic">Aramaic</option>
    <option value="Bosnian">Bosnian</option>
    <option value="Cantonese">Cantonese</option>
    <option value="Chinese">Chinese</option>
    <option value="Czech">Czech</option>
      </select>

  <button type="button">Submit data</button>
  </form>

Assuming user selected score 7, set the language to Bosnian and the year is 1980 ( I'm populating the year box with a function don't worry it is not empty list ) and I want to get these selected values (score: 7, lang: Bosnian, year:1980) By the way all of them are in the form. So how can I get these selected values?

How is your question different? The only difference I see with, for example, https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript is that you have more than one ` — yuriy636, Aug 15 '17 at 11:03
I have 3 different selected area and different options are settled below them. So I can use the same function as they used? If it has the same solution, sorry for that post. — Zahid Tekbaş, Aug 15 '17 at 11:08

score 2 · Answer 1 · answered Aug 15 '17 at 11:10

You have the following mistakes in your HTML:

No special symobols allowed in form elements name attribute.
You can't put comma after HTML attribute.
No need to put extra <option> tag attributes if your value equal to your option's name.

So in this code:

<select name="scores">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
</select>

You can access "scores" value as:

var select_scores = document.getElementById("form").scores;
select_scores.options[select_scores.selectedIndex].value;

Same for other form <select> elements.

Thanks for suggestion and solution! – Zahid Tekbaş Aug 15 '17 at 11:12 — Zahid Tekbaş, Aug 15 '17 at 11:12

score 1 · Accepted Answer · answered Aug 15 '17 at 11:23

Return an object :

document.getElementById("submit").addEventListener("click", getData);

function getData() {
var score = document.getElementById('scores').value;
var year = document.getElementById('year').value;
var language = document.getElementById('language').value;
var data = {'score':score, 'year':year, 'lang':language};
console.log(data);
}

    <form>

  <p> Scores: </p>

    <select id ="scores" name ="scores:">
      <option value= " 9 " name= " 9 "> 9 </option>
      <option value= " 8 " name= " 8 "> 8 </option>
      <option value= " 7 " name= " 7 "> 7 </option>
      <option value= " 6 " name= " 6 "> 6 </option>
      <option value= " 5 " name= " 5 "> 5 </option>
      <option value= " 4 " name= " 4 "> 4 </option>
      <option value= " 3 " name= " 3 "> 3 </option>
      <option value= " 2 " name= " 2 "> 2 </option>
      <option value= " 1 " name= " 1 "> 1 </option>

    </select>

<p> Years: </p>


  <select id ="year">
  </select>

  <p> Languages: </p>

  <select id= "language" name="language">
    <option value ="Aborginial", name = "Aborginial"> Aborginial </option>
    <option value="Arabic"> Arabic </option>
    <option value="Aramaic">Aramaic</option>
    <option value="Bosnian">Bosnian</option>
    <option value="Cantonese">Cantonese</option>
    <option value="Chinese">Chinese</option>
    <option value="Czech">Czech</option>
      </select>

  <button id="submit" type="button">Submit data</button>
  </form>

How to get all selected values from different inputs - Javascript

2 Answers2